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.