How to add new HTML element with inline styles?
Question
I would like to add a new HTML element, with inline styles, around the rte.selection().
With the following example, the HTML is OK, but probably not the JSON part:
const editorRte = this.editor.RichTextEditor
// ...
editorRte.add('fontSize', {
icon: `
<select>
<option value="" disabled selected>Size</option>
<option value="8px">8 pixels</option>
<option value="12px">12 pixels</option>
<option value="16px">16 pixels</option>
<option value="72px">72 pixels</option>
</select>
`,
event: 'change',
result: (rte, action) => {
const selectedValue = action.btn.firstElementChild.value || action.btn.firstChild.value
rte.insertHTML(`<span style="font-size: ${selectedValue}; line-height: 100%;">${rte.selection()}</span>`)
}
})
},
Answers (3)
@bgrand-ch what do you mean by "probably"? 😅
@artf thanks for your quick response 🙂 update dependencies to 0.16.30 resolves my problem 🎉
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1651
How create a new modal dialog like the icons one?
Hi ! I would like create a new modal that contains templates for what users can use them later and add them to canvas/editor. I would like...
Issue #1363
Problem trying to inject new HTML content in the Editor
Hi @artf, I'm now working on doing content in multi-languages inside the editor but I would like to know how can I save in the Dom HTML new...
Issue #2189
[Question] How to add "Ordered/Unordered List" option in rte/custom block
Hi I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte: And this works if my page is pre-filled wit...
Issue #2177
How to create a block with HTML and CSS and javascript content.
Can somebody please show me a code example of how to create a block with javascript and css styles. The main problem is that the js code is...
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.