Issue #2937Opened August 4, 2020by MattDBP1 reactions

Question: RTE in Modal

Question

Hello,

Code SnippetTEXT
I'm trying to get TinyMCE to work as an editor in a modal instead of inline.
I am able to get the selected components html with target.getEl().innerHTML but this doesn't include any styling.
When setting the content back with replaceWith(html) all styling is lost on the component.

Is there a way to update/replace the html of a component without losing styles?

`
const cmd = {

    run(editor, sender, options = {}) {
        var target = options.target || editor.getSelected();
        const modal = editor.Modal;

        const STATE = {
            VueInstance: null,
            Html: target.getEl().innerHTML
        };

        const vueElement = document.createElement('div');
        vueElement.innerHTML = `<editor :init="EditorConfig" v-model="Html"></editor>`;

        modal.onceOpen(() => { 
            STATE.VueInstance = new Vue({ 
                el: vueElement,
                data() {
                    return {
                        EditorConfig: config,
                        Html: STATE.Html
                    }
                },
                components: {
                    Editor
                }
            }); 
        });
        modal.onceClose(() => {             
            if(STATE.VueInstance) {
                const html = STATE.VueInstance.Html;
                //target.components(html);
                const originalStyle = target.styleToString();
                const newComp = target.replaceWith(html);
                if(_.isArray(newComp)) {
                    newComp.forEach(i => {
                        i.setStyle(originalStyle);
                    })
                }
                else {
                    newComp.setStyle(originalStyle);
                }
                STATE.VueInstance.$destroy();
            }
        });

        const modalOpts = {
            title: 'Edit',
            content: vueElement
        };

        modal.open(modalOpts)
    }
};

export const EditModalCommand = cmd;
`

Answers (1)

Ju99ernautAugust 17, 20201 reactions

You can use this to get a component and it's style;

const target = editor.getSelected();
let html = target.toHTML();
let css = editor.CodeManager.getCode(target, 'css', {
    cssc: editor.CssComposer
});
html = `<style>${css}</style>` + html;

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.