Try our conversational search powered by Generative AI!

TinyMCE Style Dropdown

Vote:
 

Hi all, having some trouble getting the Styles dropdown setup. We're defining a set of styles which combine various classes from our css files via a non-visual TinyMCE plugin. This works fine, but as soon as we specify a few styles sheets for the editor to link into via a UIEditorCSSPaths dynamic property, the styles get replaced with the ones in the css files.

Comparing the TinyMCE.Init js that gets injected, there seems to be some sort of conflict between Content_CSS and Style_Formats.


tinyMCE.init(
    {
        "mode": "exact",
        "dialog_type": "window",
        "convert_urls": false,
        "language": false,
        "content_css": "/App_Themes/Sapphire/Skin.css,/App_Themes/Sapphire/Skin.Text.css",
        "style_formats": [],
        "entities": "160,nbsp",
        "theme": "advanced",
        "theme_advanced_layout_manager": "RowLayout",
        "theme_advanced_container_editorcontainer": "mceEditor",
        "theme_advanced_container_statusBar": "mceElementpath",
        "theme_advanced_containers_default_align": "left",
        "theme_advanced_resizing_use_cookie": false,
        "theme_advanced_path": true,
        "theme_advanced_resizing": true,
        "theme_advanced_containers": "row1,row2,row3,editorcontainer,statusBar",
        "theme_advanced_statusbar_location": "bottom",
        "elements": "ctl00_FullRegion_PC_75_1_EditForm_MainBody_ctl00",
        "width": 614,
        "editorwidth": "614px",
        "height": 300,
        "epiImageEditor_dialogWidth": 900,
        "epiImageEditor_dialogHeight": 600,
        "epidynamiccontent_enabledcontrols": "epidynamiccontent, code, undo, redo, cut, copy, fullscreen",
        "extended_valid_elements": "span[contenteditable\u003cfalse|data-hash|data-state|data-dynamicclass|disabled|data-classid|data-groups|data-contentgroup|id|class|style|title|dir\u003cltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],div[contenteditable\u003cfalse|data-hash|data-state|data-dynamicclass|disabled|data-classid|data-groups|data-contentgroup|id|class|style|title|dir\u003cltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope|axis|headers|abbr|id|class|style|title|dir\u003cltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],#th[colspan|rowspan|width|height|align|valign|scope|axis|headers|abbr|id|class|style|title|dir\u003cltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup]",
        "epipersonalizedcontent_enabledcontrols": "epipersonalizedcontent, code, undo, redo, cut, copy, fullscreen",
        "formats": { "contenttitle": { "attributes": { "title": "Content Title" }, "block": "div", "classes": "text-large text-colour-title" }, "contenttext": { "attributes": { "title": "Content Text" }, "block": "div", "classes": "text-small text-colour-content" }, "lightlinkdarkshadow": { "attributes": { "title": "Light Link Dark Shadow" }, "inline": "span", "classes": "inlineblock text-small text-colour-title light-dark-underline" }, "lightlinklightshadow": { "attributes": { "title": "Light Link Light Shadow" }, "inline": "span", "classes": "inlineblock text-small text-colour-title light-light-underline" }, "darklinklightshadow": { "attributes": { "title": "Dark Link Light Shadow" }, "inline": "span", "classes": "inlineblock text-small text-colour-link dark-light-underline" }, "darklinkdarkshadow": { "attributes": { "title": "Dark Link Dark Shadow" }, "inline": "span", "classes": "inlineblock text-small text-colour-link dark-dark-underline" }, "padleft35": { "attributes": { "title": "Pad Left 35" }, "block": "div", "classes": "pad-left-35" }, "padleft15": { "attributes": { "title": "Pad Left 15" }, "block": "div", "classes": "pad-left-15" } },
        "skin": "epi-light",
        "epi_page_context": { "id": "4_282", "parentId": "1", "pageFolderId": "4", "epslanguage": "en-US", "pageTypeId": 7 },
        "plugins": "epilink,epiimageeditor,media,epidynamiccontent,epipersonalizedcontent,epiquote,paste,table,fullscreen,searchreplace,productlink,advimage,epifilebrowser,epipageleavecheck,episearchreplace,epistylematcher,epitrailing,epieditordisable,epiaccesskeysremove,epiexternaltoolbar,epifilemanagerdragdrop,StyledEditor,epiwindowmanager,epivisualaid",
        "theme_advanced_container_row1": "epilink,unlink,anchor,image,epiimageeditor,media,epidynamiccontent,epipersonalizedcontent,epiquote,separator,cut,copy,paste,pastetext,pasteword,separator,table,delete_table,row_props,cell_props,separator,col_before,col_after,delete_col,separator,row_before,row_after,delete_row,separator,split_cells,merge_cells",
        "theme_advanced_container_row2": "bold,italic,underline,separator,justifyleft,justifycenter,justifyright,separator,bullist,numlist,hr,styleselect,undo,redo,separator,cleanup,code,visualaid,fullscreen,search,formatselect",
        "theme_advanced_container_row3": "productlink"
    });

    

tinyMCE.init(
    {
        "mode": "exact",
        "dialog_type": "window",
        "convert_urls": false,
        "language": false,
        "content_css": "",
        "style_formats": [{ "title": "Content Title", "block": "div", "classes": "text-large text-colour-title" }, { "title": "Content Text", "block": "div", "classes": "text-small text-colour-content" }, { "title": "Light Link Dark Shadow", "inline": "span", "classes": "inlineblock text-small text-colour-title light-dark-underline" }, { "title": "Light Link Light Shadow", "inline": "span", "classes": "inlineblock text-small text-colour-title light-light-underline" }, { "title": "Dark Link Light Shadow", "inline": "span", "classes": "inlineblock text-small text-colour-link dark-light-underline" }, { "title": "Dark Link Dark Shadow", "inline": "span", "classes": "inlineblock text-small text-colour-link dark-dark-underline" }, { "title": "Pad Left 35", "block": "div", "classes": "pad-left-35" }, { "title": "Pad Left 15", "block": "div", "classes": "pad-left-15" }],
        "entities": "160,nbsp",
        "theme": "advanced",
        "theme_advanced_layout_manager": "RowLayout",
        "theme_advanced_container_editorcontainer": "mceEditor",
        "theme_advanced_container_statusBar": "mceElementpath",
        "theme_advanced_containers_default_align": "left",
        "theme_advanced_resizing_use_cookie": false,
        "theme_advanced_path": true,
        "theme_advanced_resizing": true,
        "theme_advanced_containers": "row1,row2,row3,editorcontainer,statusBar",
        "theme_advanced_statusbar_location": "bottom",
        "elements": "ctl00_FullRegion_PC_75_1_EditForm_MainBody_ctl00",
        "width": 614,
        "editorwidth": "614px",
        "height": 300,
        "epiImageEditor_dialogWidth": 900,
        "epiImageEditor_dialogHeight": 600,
        "epidynamiccontent_enabledcontrols": "epidynamiccontent, code, undo, redo, cut, copy, fullscreen",
        "extended_valid_elements": "span[contenteditable\u003cfalse|data-hash|data-state|data-dynamicclass|disabled|data-classid|data-groups|data-contentgroup|id|class|style|title|dir\u003cltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],div[contenteditable\u003cfalse|data-hash|data-state|data-dynamicclass|disabled|data-classid|data-groups|data-contentgroup|id|class|style|title|dir\u003cltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope|axis|headers|abbr|id|class|style|title|dir\u003cltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],#th[colspan|rowspan|width|height|align|valign|scope|axis|headers|abbr|id|class|style|title|dir\u003cltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup]",
        "epipersonalizedcontent_enabledcontrols": "epipersonalizedcontent, code, undo, redo, cut, copy, fullscreen",
        "formats": { "contenttitle": { "attributes": { "title": "Content Title" }, "block": "div", "classes": "text-large text-colour-title" }, "contenttext": { "attributes": { "title": "Content Text" }, "block": "div", "classes": "text-small text-colour-content" }, "lightlinkdarkshadow": { "attributes": { "title": "Light Link Dark Shadow" }, "inline": "span", "classes": "inlineblock text-small text-colour-title light-dark-underline" }, "lightlinklightshadow": { "attributes": { "title": "Light Link Light Shadow" }, "inline": "span", "classes": "inlineblock text-small text-colour-title light-light-underline" }, "darklinklightshadow": { "attributes": { "title": "Dark Link Light Shadow" }, "inline": "span", "classes": "inlineblock text-small text-colour-link dark-light-underline" }, "darklinkdarkshadow": { "attributes": { "title": "Dark Link Dark Shadow" }, "inline": "span", "classes": "inlineblock text-small text-colour-link dark-dark-underline" }, "padleft35": { "attributes": { "title": "Pad Left 35" }, "block": "div", "classes": "pad-left-35" }, "padleft15": { "attributes": { "title": "Pad Left 15" }, "block": "div", "classes": "pad-left-15" } },
        "skin": "epi-light",
        "epi_page_context": { "id": "4_282", "parentId": "1", "pageFolderId": "4", "epslanguage": "en-US", "pageTypeId": 7 },
        "plugins": "epilink,epiimageeditor,media,epidynamiccontent,epipersonalizedcontent,epiquote,paste,table,fullscreen,searchreplace,productlink,advimage,epifilebrowser,epipageleavecheck,episearchreplace,epistylematcher,epitrailing,epieditordisable,epiaccesskeysremove,epiexternaltoolbar,epifilemanagerdragdrop,StyledEditor,epiwindowmanager,epivisualaid",
        "theme_advanced_container_row1": "epilink,unlink,anchor,image,epiimageeditor,media,epidynamiccontent,epipersonalizedcontent,epiquote,separator,cut,copy,paste,pastetext,pasteword,separator,table,delete_table,row_props,cell_props,separator,col_before,col_after,delete_col,separator,row_before,row_after,delete_row,separator,split_cells,merge_cells",
        "theme_advanced_container_row2": "bold,italic,underline,separator,justifyleft,justifycenter,justifyright,separator,bullist,numlist,hr,styleselect,undo,redo,separator,cleanup,code,visualaid,fullscreen,search,formatselect",
        "theme_advanced_container_row3": "productlink"
    });		

    

When I have UIEditorCSSPaths set Style_Formats gets set to an empty array. Is this by design? We really need to have both our css referenced and custom styles in the styles dropdown. The two features on their own are of little use for what we are trying to achieve.

 

Cheers

 
 
#61283
Sep 14, 2012 4:30
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.