TinyMCE in custom widget showing to many styles

Henrik Fransas

Vote:

We have a custom property (widget) where we display a tinyMCE editor and in that editor the dropdown for styles has many more options than the built in editor and with ugly titles, for exampel epi_dc_preview, epi_pc_content, epi_dc, epi_dc_h. We are propably missing a setting when we create the editor but I can't find out how to see what is wrong.

The code we use to create the editor is like this:

require(['tinymce/tiny_mce_src'], function () {

    Window.prototype.CreateTinyMCEEditor = function(settingsJSON, containerForTinyMCE) {

        console.log("Window.prototype.CreateTinyMCEEditor");
        
        var settings = JSON.parse(settingsJSON);

        var plugins = "epilink,epiimageeditor,media,epidynamiccontent,epipersonalizedcontent,epiquote,paste,table,directionality,fullscreen,searchreplace,inserthtmlbutton,advimage,epifilebrowser,epifilemanagerdragdrop,epipageleavecheck,epistylematcher,epiimageresize,epiaccesskeysremove,epieditordisable,episearchreplace,epiexternaltoolbar,epitrailing,epiwindowmanager,epivisualaid";
        var buttons = settings.toolbars;

        $("#" + containerForTinyMCE).height(settings.height);
        $("#" + containerForTinyMCE).width(settings.width);

        tinymce.PluginManager.load('inserthtmlbutton', '/util/Editor/tinymce/plugins/inserthtmlbutton/editor_plugin.js');

        var ed = new tinymce.Editor(containerForTinyMCE, {
            theme: "advanced",
            skin: "epi-light",
            skin_variant: '',
            plugins: plugins,
            language: '',
            relative_urls: false,

            theme_advanced_buttons1: buttons.length > 0 ? buttons[0] : "",
            theme_advanced_buttons2: buttons.length > 1 ? buttons[1] : "",
            theme_advanced_buttons3: buttons.length > 2 ? buttons[2] : "",
            theme_advanced_buttons4: buttons.length > 3 ? buttons[3] : "",

            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: false,

            content_css: "",

            // Drop lists for link/image/media/template dialogs
            template_external_list_url: "",
            external_link_list_url: "",
            external_image_list_url: "",
            media_external_list_url: ""
        });

        return ed;
    }
});

Anyone know how to fix this?

#86077

May 13, 2014 15:14

Daniel Badro

Vote:

Have you added and configured an editor.css, that problem have happend when I dont have one defined.

Check

uiEditorCssPaths="pathtoyoureditor.css"

in under applicationsettings in episerverconfig

/Daniel

#86085

May 13, 2014 17:00

Henrik Fransas

Vote:

Daniel. Thanks. I have done that, and it lookes good in the "built-in" editor (for a regular xhtml-property) so i most be something on how I create this one.

Maby there is a EPiServer widget I can use instead of creating it myself

#86106

May 14, 2014 8:40

Vote:

We had a similar problem where we had lots of @import in the beginning of the editor css file and the imports where added before the style options (with the EditMenuName attributes).

Could you give us some example on how the css file looks like?

#86107

May 14, 2014 9:22

Henrik Fransas

Vote:

We use two, the editor.css looks like this:

h2 
{
	EditMenuName: Rubrik 2;
}

h3 
{
	EditMenuName: Rubrik 3;
}

p.preamble 
{
	EditMenuName: Ingress;
}

table.delkurser {
    EditMenuName: Delkurser;
}
/* Copied from gangnam-styles.css (to show ol ul correctly) */
.mceContentBody ul,
.mceContentBody ol {
  margin: 10px 0 15px 10px;
  padding-left: 16px;
  line-height: 18px; }
  .mceContentBody ul li + li,
  .mceContentBody ol li + li {
    margin-top: 9px; }
.mceContentBody ul {
  list-style-type: disc; }
.mceContentBody ol {
  list-style: decimal; }
/* Show user selected text */
.mceContentBody *::selection {
	background: #00f; /* Safari */
	}
.mceContentBody *::-moz-selection {
	background: #39f; /* Firefox */
    color: #fff;
}

Hmm, I think I might know now Will test

#86120

May 14, 2014 11:13

Daniel Badro

Vote:

Try in a private mode tab session just in case of cache issue.

#86134

May 14, 2014 14:08

Henrik Fransas

Vote:

The way to solve this is to implement TinyMCE the same way EPiServer does it, see more here:

http://world.episerver.com/Blogs/Henrik-Fransas/Dates/2014/11/how-to-use-tinymce-in-a-custom-property-the-episerver-wayclean-version/

#113248

Nov 17, 2014 9:40

Try our conversational search powered by Generative AI!

TinyMCE in custom widget showing to many styles