Question: RTE in Modal
Question
Hello,
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)
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.
Issue #1669
[Question] Custom link modal doesn't update the current text but add another text with link
Hello Artur, I'm trying to have a custom modal when clicked link button in RTE. but it doesn't convert selected text to link but what it do...
Issue #2337
[BUG / QUESTION] Deleting default styles does not work
Hello, i'm trying to delete some of the default styles of the blocks. I wrote everything I changed in a plugin. I used this function to upd...
Issue #2961
BUG: Components in custom modal isn't editable
Hello, I'm trying to add custom modal block to my project and I want to change content of this modal also with drag&drop. Here's code of my...
Issue #1887
Get JSON of specific gjs-data-type
I want to export JSON of only a specific gjs-data-type="img" I'm trying this but it doesn't give any result:
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.