Jump to content

Weekly update – 28 October 2022 – TinyMCE Inputfield released


ryan

Recommended Posts

  • 2 weeks later...

@ryan I really like the implementation of the custom style formats!
One thing I noticed: If you insert a custom class for a link in the module settings, it will remove the class once the href attribute is set:

#Inline a.button { color: white; background-color: black; } /* Button */

I can select the new class in the dropdown, but once I add a href attribute with the link icon the class will be removed.

Link to comment
Share on other sites

Hey @ryan and others!

Playing around with TinyMCE again as it is really a great editor! I wonder how I can make it to only allow bold and nothing else?

--- update ---

This works visually:

{
  "menubar": false,
  "toolbar": "bold",
  "toolbar_sticky": false,
  "quickbars_selection_toolbar": "bold",
  "quickbars_insert_toolbar": "bold"
}

Ze16UDN.png IEDBs2B.png

--- /update ---

At first I thought it works because the toolbar shows only the "B" button, but the quickbars plugin shows too much options!

Another thing that I noticed: I opened the devtools and changed <p>Das ist ein Test</p> to <h1>Das ist ein Test</h1> and after save it was still an <h1> which is... less than ideal.

Does anybody know how I can prevent that from happening and how I can disallow everything but "B" in the quickbar?

Link to comment
Share on other sites

  • 3 weeks later...
On 12/28/2022 at 3:02 PM, jploch said:

@ryan I really like the implementation of the custom style formats!
One thing I noticed: If you insert a custom class for a link in the module settings, it will remove the class once the href attribute is set:

#Inline a.button { color: white; background-color: black; } /* Button */

I can select the new class in the dropdown, but once I add a href attribute with the link icon the class will be removed.

Does anybody know how we can insert buttons with custom classes in TinyMCE ??

That's a VERY common need, eg to add "uk-button-primary" to a link that was inserted via the TinyMCE field.

As @jploch mentioned the inline styles seem not to work on anchor tags ? 

Link to comment
Share on other sites

  • ryan locked and unlocked this topic
  • 3 months later...

Really liking the new TinyMCE editor.

Does anyone know how to extend the valid elements attribute in this module so it allows any styles and also Javascript too?

The Purifier is disabled in the module settings, but the source code pasted into the editor still strips out some Javascript required.

There is documentation for the TinyMCE cloud version, but not sure how to do this if it is not in the module settings?

https://docs.servicenow.com/en-US/bundle/utah-platform-administration/page/administer/form-administration/task/tinymce-allow-javascript.html

Thought it may be possible in /site/modules/InputfieldTinyMCE/InputfieldTinyMCE.module.php but not sure how to do it without breaking it.


tinymce.init({     
        extended_valid_elements : "script[language|type|src]"
    });

/site/modules/InputfieldTinyMCE/InputfieldTinyMCE.module.php

Ryans documentation for whitelisting in the pastefilter may also allow Javascript?

https://processwire.com/blog/posts/using-tinymce-6-in-processwire/#handling-user-pasted-content-with-the-em-pastefilter-em-feature

It seems to be very capable, but I'm just getting used to using it as it looks so good now  and would like any HTML and Javascript source code pasted in via the code window to remain in tact.

Solution:-

Ryan has already provided the "Custom settings JSON" under the "Input" tab of the field options for TinyMCE where you could add the new options:-

{
  "extended_valid_elements" : "script[language|type|src],select[onclick|onchange]"

}

Note that the extended_valid_elements also needed to be surrounded by double quotes too. Also, there is an additional option for the form "select" element specified, so it is now possible to include <script>your Javascript here</script> and also embed it within the <select> element as an attribute too.

Obviously, this is not recommended for security,  but it is great to have this control over a rich text field within Processwire too.

 

 

Link to comment
Share on other sites

On 1/19/2023 at 5:41 PM, bernhard said:

Does anybody know how we can insert buttons with custom classes in TinyMCE ??

That's a VERY common need, eg to add "uk-button-primary" to a link that was inserted via the TinyMCE field.

As @jploch mentioned the inline styles seem not to work on anchor tags ? 

-- EDITED --

Have you tried to use only the class without the "a" tag selector?

#Inline .button { color: white; background-color: black; } /* Button */

in this case you can add the class "button" to your element/text without assign links before.

-- END EDIT --

 

Hi @bernhard , hope this could be helpful:

I found that if you didn't assign a target link to url in "Inser Link",  before selecting your text, the tag and classes aren't inserted.

Eg. At the field-level, in "Custom style formats CSS" settings, I have:

#Buttons a.btn.btn-primary{
/* Std btn */
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    background-color: #f29404;
    border-color: #f29404;
}

and this is the result in the editor:

styled-button.png.192cc150fb8a68afd814d2ff3674e8c7.png 

and in front-end page:

styled-button-front.png.105eaf7a432ed73ca40973c918eb8d63.png

As I said, I have setted the url before the style/tag assignment.

But consider the customization of ProcessPageEditLink that I think it's more powerfull (and TinyMCE inherith all that from pwlink like a charme):

ProcessPageEditLink.thumb.png.4c922f5d96a8755d2c12775d1438684d.png

 

Edited by Cybermano
added one more solution
Link to comment
Share on other sites

Please, is there anybody here that know how to disable/remove inline styles?

I tried using "invalid styles" like:

table|th|tr|td=height|width

or splitting in two separate rules 

table|th|tr|td=heigh
table|th|tr|td=width

And I also tried JSON settings like:

{
"inline_styles": false,
"table_use_colgroups": false,
  "table_default_attributes": {
      "border": "0"
  }
}

But no luck.

In the JSON case the only override is the removal of colgroups and the assignment of border null, but inline style persists...

Link to comment
Share on other sites

Spoiler

Please, is there anybody here that know how to disable/remove inline styles?

...

Found a way: declaring each tag style as invalid_styles at "field-level" (not in module settings), in Custom settings JSON text (surely also in file loading).

{
"invalid_styles":{
 "table":"width height",
 "th": "width height",
 "td": "width height",
 "tr": "width height"
}
"table_use_colgroups": false,
  "table_default_attributes": {
      "border": "0"
  }
}

A bit tedious, but it works.

N.B. For us these settings are mandatory to use Bootstrap or our own classes for tables (and other elements).

Thanks @WillyC: if you find a simplier solution it's welcomed. 

Link to comment
Share on other sites

  • 5 months later...

Hello,

I use a tinymce field with pleasure but face with one problem : the insert media function.

This work with no consistency, sometimes it work like a charm sometimes not at all and erase all medias inserted... 

I can't found a logic for why or what cause this. I tried with Vimeo and YouTube links or iframe codes, with or without text, save before add text, local or online... and I don't know how to find a solution ?

If somebody have an idea I'll be very happy ? 

Have a good day.

Link to comment
Share on other sites

  • 1 month later...

Does anyone know how one can add a style to the TinyMCE styles dropdown, which applies a css class to several HTML-Elements at once?
I managed to do it with JSON like so in the "Default setting overrides JSON text" field:

{
  "style_formats": [
    {
      "title": "Styles",
      "items": [
        {
          "title": "Center",
          "selector": "p,h1,h2,h3,h4,h5,h6",
          "classes": "text-center"
        }
      ]
    }
  ]
}

But how is the syntax for achieving the same within the field "Custom style formats CSS"?
Or is this simply not possible (yet)?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...