Weekly update – 28 October 2022 – TinyMCE Inputfield released

[Joss]

@ryan

Ta!

Since I am in very early dev, I added the line to the config (I didn't have a dbCharset in there) and then duplicated the field. That did it.

 

[jploch]

@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.

[bernhard]

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"
}

 

--- /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?

[bernhard]

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 ? 

[Hackasacka]

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.

 

 

[Cybermano]

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:

 

and in front-end page:

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):

 

Edited May 30, 2023 by Cybermano
added one more solution

[Cybermano]

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...

[WillyC]

@Hackasacka u.uses custom json config settings

there is 1 in module confedigurations screens and is an other in field.setting screen

[WillyC]

@Cybermano inlines style from copypasta or.tinymce makes them ?

[Cybermano]

2 minutes ago, WillyC said:

@Cybermano inlines style from copypasta or.tinymce makes them ?

The second: tinymce created/added...

[Cybermano]

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. 

[Matthieu]

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.

[nurkka]

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)?

[Flashmaster82]

When paste an image into the field and then resize it, it will remove the image? Also when i try to upload from the toolbar "image" from my computer it will just spin. Also if you try to upload from the "quickimage" then it will not place the image? Any fix?