TinyMCE settings in Mezzanine

Question

I have Mezzanine 4.2.3 on Django 1.10.7 and Python 3.6.2.

Mezzanine came with a TinyMCE editor in the admin. I'm not sure what the version is on the editor but I think it is 4+. The default editor was pretty basic, so I wanted to add more functionality.

Mezzanine apparently uses their own custom set up for TinyMCE. It does not look like the one the TinyMCE docs reference, nor do they use django-tinymce.

I am not well versed in JavaScript. Once I found the right file, I copy pasted the Classic js for plugins and toolbars, with mixed results:

WORKS bold, italic, underline, strikethrough, right, left, center, and full justify, increase and decrease indent, find and replace, copy, fonts, code, pre, headings, insert image, print, preview

DOES NOT WORK font color, background color, video embed (5 mg is too big!?), cut, paste, blockquote

Here's the really weird thing: In the editor and in the preview, font and background color work fine. But when I open the website, nothing, and when I go back to the editor, there is no sign of any color any more. Conversely, in the editor, you can't tell Code from Pre, but on the website, they look different, and as they should. My best guess now is that might be a CSS problem, but I haven't checked into that yet. I'm still seeing what works and what does not.

After selecting text, it is very hard to click out of select. It takes three or more clicks to do so. I switched back to the 'content css' setting they had originally, but color font and bg still don't work. I also restarted the server to no effect. I do have pillow. I'm not sure what to do next.

I posted this to the Mezzanine group but have gotten no reply. I also posted to TinyMCE and they said since they had no knowledge of Mezzanine I should go there.

Update

Ok, my bad, I neglected to include code. Here is the original, default code:

var tinymce_config = {
    height: '500px',
    language: language_codes[window.__language_code] || 'en',
    plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste"
],
link_list: window.__link_list_url,
relative_urls: false,
convert_urls: false,
menubar: false,
statusbar: false,
toolbar: ("insertfile undo redo | styleselect | bold italic | " +
          "alignleft aligncenter alignright alignjustify | " +
          "bullist numlist outdent indent | link image table | " +
          "code fullscreen"),
file_browser_callback: custom_file_browser,
content_css: window.__tinymce_css,
valid_elements: "*[*]"  // Don't strip anything since this is handled by bleach.
};

This is the link to the code from TinyMCE that I used

https://www.tinymce.com/docs/demo/classic/

And this is what my code looks like now

var tinymce_config = {
    height: '500px',
    language: language_codes[window.__language_code] || 'en',
    plugins: [
        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern"
    ],
    link_list: window.__link_list_url,
    relative_urls: false,
    convert_urls: false,
    menubar: false,
    statusbar: false,
    toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
    toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | insertdatetime preview | forecolor backcolor",
    toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | visualchars visualblocks nonbreaking template pagebreak restoredraft",
    // content_css: [
    //     '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    //     '//www.tinymce.com/css/codepen.min.css'],
    file_browser_callback: custom_file_browser,
    content_css: window.__tinymce_css,
    valid_elements: "*[*]"  // Don't strip anything since this is handled by bleach.
};

I have since discovered that it is relatively easy to make one of these things yourself. There are youtube tutorials on how. The problem for me in diving into this option is that Mezzanine has scattered TinyMCE throughout the program, including inside grapelli and filebrowser, so I'm not sure how to go about surgically removing all that nor do I know what sort of collateral damage might result.

Would you add links to your posts to all the cross-posts, so that readers who wish to reply can check your duplicates before posting? That way they can avoid wasting their time if you have received the answer elsewhere. — halfer
@halfer Here is the link to the google groups post: groups.google.com/forum/#!topic/mezzanine-users/SwIRGLDSoUg. I have one response now, which is as follows: Copy the default setup from mezzanine/core/static/mezzanine/js/tinymce_setup.js into your static assets, change the TINYMCE_SETUP_JS ... value to your custom path, and then make modifications to it. Which is fine, except it begs the question as to precisely what modifications are to be made. The post I made to the TinyMCE community site has been DELETED! Apparently they don't like posts older than a week. — Malik A. Rumi

Malik A. Rumi Malik A. Rumi · Accepted Answer · 2017-08-21T22:02:22

If you follow the link in my response to halfer's comment, you will see there that I finally got a working answer. I hope that helps others.

TinyMCE settings in Mezzanine

1 Answers