Community guidelines
Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.
Solved by Col View solution
Hi, I’m using the 'TinyMCE Editor Integration’ plugin, as I’m trying to try and replicate another CMS’s backend in Grav, which is TinyMCE based. All is good so far, but I’m running into trouble while attempting to add custom classes, so that they can be used within the TinyMCE editor.
Has anyone managed to do this, and if so, would you mind giving me a few hints as to what I need to do to get this working?
Many thanks!
Hi, I looked into this because I was curious, and can offer some suggestions which may not be exactly what you want, or may not work.
Doesn't look like the plugin does this out of the box. The developer, newbthenewbd, hangs out on Discord by that name, and is friendly and helpful, or you could add an issue (I might even do that).
Looking at the TinyMCE customised format example, this example looks like it would fit:
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' },
It looks like, in the plugin, you would need to add this into templates/forms/fields/tinymce/tinymce.html.twig. It's better to override templates by copying them to the same path in your theme, so copy this to user/<your-theme>/templates/forms/fields/tinymce/tinymce.html.twig first, then edit that file.
Anywhere in that 'init' area starting around line 26, add something like this:
style_formats: [
{ title: 'My crazy rant', selector: 'blockquote', classes: 'tirade' },
],
(since there don't seem to be any style_formats already set up in that template).
Insert that from line 27 to make it simple.
That should work. Sorry for the blind untested coding. Great feature to add into the plugin though, let's hope! I would totally use this.
Cheers
Update: feature request submitted.
Thank you so much for this info Hugh, really appreciated.
I’m currently trying your suggestions, but it’s not looking too good at the moment, but I’ll continue to tinker..
If I get it working, I’ll let you know!! (crosses fingers)
Not sure if you noticed, but the plugin author has suggested a better way on Github. Please report back about it. Cheers.
I’m having a look now and will report back!
Thanks for your help.
Still not showing sadly.. I’ve made a post on the Github issue thread so hopefully we can get to the bottom of this.
Once again, many thanks for your help so far!
Hi @hughbris
I’ve managed to get this working, basically by adding a couple of extra lines to the TinyMCE config file.
In essence, you copy /user/plugins/tinymce-editor/tinymce-editor.yaml file to /user/config/plugins/tinymce-editor.yaml and then make the following changes to the file there:
In the paramaters section, after:
-
name: paste_data_images
value: '1'
add
-
name: style_formats
value: '[
{"title": "Red text", "inline": "span", "styles": {"color": "#ff0000"}},
{"title": "Crazyrant", "inline": "span", "classes": "crazyrant"}
]'
-
name: style_formats_merge
value: 'true'
-
name: importcss_append
value: 'true'
Then, towards the end of the file, change the first entry in the second row in the toolbar: section from ‘formatselect’ to ’styleselect’
Then, you are free to change the values in the style_formats section as required.
Here is a full dump of my current working file:
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"}},
{"title": "Crazyrant", "inline": "span", "classes": "crazyrant"}
]'
-
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
I’m still trying to work out how to get my own stylesheet to be displayed within the TinyMCE editor, so that any added classes display correctly within the back-end - But this at least get past the initial issues. I’ll update this thread if/when I get that working…
Thanks for your help with this @hughbris (and @newbthenewbd), I hope it helps anyone else who need to do this in the future.
Log in to reply.
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 2 | 49 | 1 week ago | ||
| 2 | 57 | 4 weeks ago | ||
| 3 | 1184 | 1 month ago | ||
| 1 | 50 | 1 month ago | ||
| 3 | 75 | 2 months ago |