Issue #3218Opened January 5, 2021by bgrand-ch2 reactions

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)

artfJanuary 6, 20211 reactions

@bgrand-ch what do you mean by "probably"? 😅

bgrand-chJanuary 6, 20211 reactions

@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.

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.