Configuration options for customised formats

[hughbris]

[Confession: I've never used this plugin, though I plan to one day, and will be interested in heavily customising what content editors can do]

I'm passing on a post from Grav Forums as a feature request.

Probably best to read about it there, but here's a summary: the poster wants to add elements to the toolbar with custom classes, which is supported, and which I would also want to do (to provide alternatives for content editors, thereby discouraging custom inline styling).

I think I have provided a working solution by augmenting the base template, but this seems heavy handed. It would be great if certain options like this could be set in plugin configuration, and then iterated in the base template JS init.

What do you reckon? Happy to have a go at this and submit a PR if I get sufficiently encouraged/motivated.

[newbthenewbd]

Actually, the heavy-handed solutions may not be needed, as the mentioned TinyMCE features should work fine when added under parameters in user/config/plugins/tinymce-editor.yaml, like this:

parameters:
  -
    name: fontsize_formats
    value: '6pt 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 32pt 36pt 40pt 44pt 48pt 54pt 60pt 66pt 72pt 80pt 88pt 96pt'
  -
    name: paste_data_images
    value: '1'
  -
    name: style_formats
    value: '[{"title": "My crazy rant", "selector": "blockquote", "classes": "tirade"}]'

or multiline like this:

parameters:
  -
    name: fontsize_formats
    value: '6pt 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 32pt 36pt 40pt 44pt 48pt 54pt 60pt 66pt 72pt 80pt 88pt 96pt'
  -
    name: paste_data_images
    value: '1'
  -
    name: style_formats
    value: |
      [{
        "title": "My crazy rant",
        "selector": "blockquote",
        "classes": "tirade"
      }]

Is there anything that I missed, that makes this approach unsatisfactory? If not, I should probably treat this issue as the call to finally improve the frikkin' documentation, my limited availability unfortunately slows that endeavor... 🙃

[hughbris]

I'm still at the "I don't need this yet" level of concern with this, so I'll accept your suggestion as absolute truth :) Does indeed sound like a documentation problem.

Perhaps let's see if the original poster has any success with this method before closing .. ??

Cheers!

[ezchile]

Hi, I'm the original poster on the Grav forum. Many thanks @newbthenewbd for the amazing plugin, and to @hughbris for leading me here.

I've tried the method mentioned above, adding style_formats to the parameters section of /user/config/plugins/tinymce-editor.yaml

but do not see the entry that was added when then editing anything within Admin.

I've checked within the Plugin's configuration panel, which appears to be able to see the added style_formats, but when editing the TinyMCE editor doesn't appear to show them as options.

I don't think it's an admin caching issue, as I've added a value to fontsize_formats, which is shown when editing, so am not sure whether I'm missing anything, or what to try next?

Many, many thanks for any help you can provide with this!

[newbthenewbd]

This is the case because style_formats does not actually append to the formatselect dropdown on the toolbar, but by default overrides the content of formats in the menu bar, under Format -> Formats. This overriding behavior can also be changed to appending by setting the parameter style_formats_merge to true, like this:

parameters:
  -
    name: fontsize_formats
    value: '6pt 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 32pt 36pt 40pt 44pt 48pt 54pt 60pt 66pt 72pt 80pt 88pt 96pt'
  -
    name: paste_data_images
    value: '1'
  -
    name: style_formats
    value: '[{"title": "Red text", "inline": "span", "styles": {"color": "#ff0000"}}]'
  -
    name: style_formats_merge
    value: 'true'

Meanwhile, to add formats that will be visible on the formatselect toolbar dropdown, one has to set the parameter formats such that it includes the format to be added, and appropriately set the parameter block_formats, which is set to Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre by default, like this:

parameters:
  -
    name: fontsize_formats
    value: '6pt 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 32pt 36pt 40pt 44pt 48pt 54pt 60pt 66pt 72pt 80pt 88pt 96pt'
  -
    name: paste_data_images
    value: '1'
  -
    name: formats
    value: '{"crazyrant": {"inline": "span", "classes": "crazyrant"}}'
  -
    name: block_formats
    value: 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre;Crazy rant=crazyrant'

However, it should be noted that the block formats, set by the mentioned dropdown, are supposed to be exclusive - such that no two different such formats may be used at once. The above example featuring the formats and block_formats parameters breaks that standard, as the Crazy Rant format is only removable by clicking it again in the dropdown once it has been added; while TinyMCE 5.x seems to accept that gracefully, showing checkmarks next to any format used, in the TinyMCE version 4.x, supported by the version 1.2.7 of the integration plugin, the fact that multiple different formats are being used is not shown at all in the dropdown, leaving the user to an uncomfortable guesswork as to what should be done to remove them.

Therefore, unless exclusive formats are to be added, it might be a good idea to change formatselect to styleselect under toolbar if that dropdown is to be customized, like this:

toolbar:
  -
    row: 'newdocument print | cut copy paste | undo redo | searchreplace visualchars | table image media emoticons toc | insertdatetime pagebreak charmap | link unlink anchor | blockquote nonbreaking hr | code'
  -
    row: 'styleselect | fontselect fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | indent outdent | forecolor backcolor | bullist numlist | superscript subscript | removeformat | fullscreen'

After doing that, the style_formats parameters, outlined near the top of this message, can be easily used.

[ezchile]

Thanks so much for looking into this. I've tried what you suggest towards the end of your message (I think) but am still struggling. I'm now seeing the 'Formats' dropdown, but it's empty (in both the menu and toolbox dropdowns)

This is what is now in my /user/config/plugins/tinymce-editor.yaml

enabled: true
plugins:
  - advlist
  - anchor
  - autoresize
  - charmap
  - code
  - colorpicker
  - emoticons
  - fullscreen
  - hr
  - image
  - insertdatetime
  - link
  - lists
  - media
  - nonbreaking
  - pagebreak
  - paste
  - print
  - searchreplace
  - table
  - textcolor
  - toc
  - visualchars
  - wordcount
  - importcss
parameters:
  -
    name: fontsize_formats
    value: '6pt 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 32pt 36pt 40pt 44pt 48pt 54pt 60pt 66pt 72pt 80pt 88pt 96pt'
  -
    name: paste_data_images
    value: '1'
  -
    name: style_formats
    value: '[{"title": "Red text", "inline": "span", "styles": {"color": "#ff0000"}}]'
  -
    name: style_formats_merge
    value: 'true'
menubar: true
menu:
  -
    title: File
    items: 'newdocument print'
  -
    title: Edit
    items: 'undo redo | cut copy paste pastetext | selectall | searchreplace'
  -
    title: Insert
    items: 'media link image | pagebreak charmap anchor hr insertdatetime nonbreaking toc'
  -
    title: View
    items: 'visualchars visualaid | fullscreen'
  -
    title: Format
    items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'
  -
    title: Table
    items: 'inserttable tableprops deletetable | cell row column'
  -
    title: Tools
    items: code
toolbar:
  -
    row: 'newdocument print | cut copy paste | undo redo | searchreplace visualchars | table image media emoticons toc | insertdatetime pagebreak charmap | link unlink anchor | blockquote nonbreaking hr | code'
  -
    row: 'styleselect | fontselect fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | indent outdent | forecolor backcolor | bullist numlist | superscript subscript | removeformat | fullscreen'
branding: false
statusbar: true

Which shows with Admin as:

and

I'm sure it's something simple that I'm missing.. Any ideas what it might be though? I really appreciate your help with this!

[newbthenewbd]

It seems that the importcss plugin causes this breakage, reasons unknown... 🙃

[ezchile]

It appears that it requires the following to be added after the 'style_formats_merge' line:

 -
   name: importcss_append
   value: 'true'

So that it reads:

enabled: true
plugins:
  - advlist
  - anchor
  - autoresize
  - charmap
  - code
  - colorpicker
  - emoticons
  - fullscreen
  - hr
  - image
  - insertdatetime
  - link
  - lists
  - media
  - nonbreaking
  - pagebreak
  - paste
  - print
  - searchreplace
  - table
  - textcolor
  - toc
  - visualchars
  - wordcount
  - importcss
parameters:
  -
    name: fontsize_formats
    value: '6pt 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 32pt 36pt 40pt 44pt 48pt 54pt 60pt 66pt 72pt 80pt 88pt 96pt'
  -
    name: paste_data_images
    value: '1'
  -
    name: style_formats
    value: '[{"title": "Red text", "inline": "span", "styles": {"color": "#ff0000"}}]'
  -
    name: style_formats_merge
    value: 'true'
  -
    name: importcss_append
    value: 'true'
menubar: true
menu:
  -
    title: File
    items: 'newdocument print'
  -
    title: Edit
    items: 'undo redo | cut copy paste pastetext | selectall | searchreplace'
  -
    title: Insert
    items: 'media link image | pagebreak charmap anchor hr insertdatetime nonbreaking toc'
  -
    title: View
    items: 'visualchars visualaid | fullscreen'
  -
    title: Format
    items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'
  -
    title: Table
    items: 'inserttable tableprops deletetable | cell row column'
  -
    title: Tools
    items: code
toolbar:
  -
    row: 'newdocument print | cut copy paste | undo redo | searchreplace visualchars | table image media emoticons toc | insertdatetime pagebreak charmap | link unlink anchor | blockquote nonbreaking hr | code'
  -
    row: 'styleselect | fontselect fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | indent outdent | forecolor backcolor | bullist numlist | superscript subscript | removeformat | fullscreen'
branding: false
statusbar: true

...Leaving me with this:

Thanks so much for your help, @newbthenewbd and @hughbris !

[hughbris]

Glad you figured it out together! I'll leave this for you to close if you want, @newbthenewbd .

[coldestheart]

Hello! anyone can help me with table default styles?

parameters:
  -
    name: fontsize_formats
    value: '6pt 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 32pt 36pt 40pt 44pt 48pt 54pt 60pt 66pt 72pt 80pt 88pt 96pt'
  -
    name: paste_data_images
    value: '1'
  -
    name: table_default_styles
    value: '{ width: "50%" }'

this doesnt work, plz help

[newbthenewbd]

Try value: '{ "width": "50%" }' - that'd be proper JSON, contrary to what the TinyMCE documentation tends to often spread... Yet another thing to be documented better, indeed, collecting them is a good reason to keep this issue open for now. 🙃

[markushuebner]

Hi all,

first: thanks a lot for this plugin! I am deeply diving into grav as another cms to work with and tinymce is a core issue with that.

My question is: How can I achieve, that the chosen classes (works fine even with more than one selected), which are properly rendered in frontend, also appear within tinymce?

E.g. I select a class for a grey background and another for a border for a paragraph, it works and looks fine in frontend. But in tinymce there is no change in appearance.

Is there a possible configuration within tinymce-editor.yaml to load my own defined classes from C:\xampp\htdocs\grav-admin\user\themes\quark\css\custom.css?
Or is it necessary to change some lines within tinymce-editor.php? e.g.

			if(file_exists(__DIR__ . "/../../data/tinymce-editor/css")) {
				$this->grav["assets"]->add("user://data/tinymce-editor/css/editor.css");
			} else {
				$this->grav["assets"]->add("plugin://tinymce-editor/css/editor.css");
			}

to add my own classes to be rendered in tinymce? With all the problems concerning an upgrade of this plugin...
Adding my classes in editor.css did not affect anything...

Thank you very much for some hints!

Greetings,

Markus

[newbthenewbd]

What should work is the content_css parameter, that can be configured in the admin panel or directly in user/config/plugins/tinymce-editor.yaml, for example like this (and hopefully I got this right, it's some busy months again here and I couldn't test 🙃):

parameters:
  -
    name: fontsize_formats
    value: '6pt 7pt 8pt 9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 32pt 36pt 40pt 44pt 48pt 54pt 60pt 66pt 72pt 80pt 88pt 96pt'
  -
    name: paste_data_images
    value: '1'
  -
    name: content_css
    value: '/user/themes/quark/css/custom.css'

[markushuebner]

Hi newbthenewbd,
thank you for this quick response! I will test that on Monday, cause I'm on the road this weekend, and reply the result.

[markushuebner]

Hi newbthenewbd,

I tested your solution - but it did not work, although it looks plausible. What I additionally checked is a change in path. If your "are" within the plugin-folder tinymce-editor, you first would have to leave it to get into the user-path.

• ../../themes/quark/css/custom.css
• ../themes/quark/css/custom.css

Both did not work.

Afterwards I had a look at https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@content_css/, where "content_css" is mentioned. After reading it, I thought this file is more to change the appearance of the editor itself than to define the look of the editable content. Nevertheless I tried to put my custom styles into
user/plugins/tinymce-editor/css/custom.css
and changed the matching line within tinymce-editor.yaml to

  -
    name: content_css
    value: 'css/custom.css'

But like adding my classes to user/plugins/tinymce-editor/css/editor.css it did not make a change.

I would appreciate to get another tip. Thanks a lot.

Greetings,

Markus

[newbthenewbd]

From the link I gave in my previous reply:

Note: If you specify a relative path, it is resolved in relation to the URL of the (HTML) file that includes TinyMCE, not relative to TinyMCE itself.

Therefore, it would seem that using a relative path is a no-go. We would hence have to follow the absolute path example from that link:

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : '/myLayout.css'  // resolved to http://domain.mine/myLayout.css
});

And what have I observed happening in practice? Well, apparently supplying:

  -
    name: content_css
    value: '/site/user/themes/laguna/css-compiled/template.css'

...made it look for the file... Under https://cloud.tinymce.com/site/user/themes/laguna/css-compiled/template.css.

So, yeah, whole entire URLs it apparently is, until a better solution is found with more time to spare? In the case of my dev instance:

  -
    name: content_css
    value: 'http://localhost/site/user/themes/laguna/css-compiled/template.css'

Hopefully that works out for You, at least inasmuch as it does for me, which is kinda at best... 🙃

[markushuebner]

"Hopefully that works out for You"
Yes, it works. Thank you very much!

In case anyone has the question how to implement more than one css-file:

name: content_css
value: 'http://localhost/grav/user/themes/quark/css/custom.css,http://localhost/grav/user/themes/quark/css/backend.css'

May I ask another question? If there is not a solution given yet, it might be a kind of feature request... (and perhaps should be removed from here to a new topic), but it still is related to the opening post.

What's it all about: If you have lot of individual css-classes, it is a problem to keep them user-oriented within the "format"-dropdown. First you should name and group them by html-tags. That works fine, if a class is only for a certain tag. But what about classes, which suit for several tags? Then, this will not work so good.

Is it possible to address those custom css-classes at the point where they are allowed? In another cms I work with, there it is a contextual supply of possible css classes. If you alter or set up a link, only the css-classes addressing links are shown. Not the ones which are given for images, ...

I hope the image attached makes it a bit more clear, even if the field descriptions are German.

Again: Thank you! :)

[newbthenewbd]

It would seem that this is what You're looking for. Just insert the list using correct JSON (unlike the way it is in the documentation...), e.g.:

  -
    name: link_class_list
    value: '[{"title":"None","value":""},{"title":"Dog","value":"dog"},{"title":"Cat","value":"cat"}]'

This website may be of help making the JSON correct and compacting it (JSON Template: Compact).

Best of luck! 🙂

[markushuebner]

Wow! Thanks again for your response! Now I think I can tick off nearly every point of "convenience" for using tinymce... :)

[rcheetah]

After a few hours of reading and trying: Awesome work @newbthenewbd ! Thank you for this plugin.
But also: +1 for docs ^^