Try our conversational search powered by Generative AI!

TinyMCE in custom widget showing to many styles


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) {

        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?

May 13, 2014 15:14

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



in under applicationsettings in  episerverconfig


May 13, 2014 17:00

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

May 14, 2014 8:40

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?

May 14, 2014 9:22

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

	EditMenuName: Rubrik 2;

	EditMenuName: Rubrik 3;

	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

May 14, 2014 11:13

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

May 14, 2014 14:08

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

Nov 17, 2014 9:40
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.