How to add html tag programmatically in TinyMCE editor?

Question

I'm using TinyMCE to edit text. When the user selects some text and presses a button, the selected section should be wrapped with <mark></mark> html tags.

The reason I'm not simply adding a custom text formatting button to the tinymce editor is because I want to trigger other actions to happen with the selected text too (i.e. copy and paste the text elsewhere).

How can I do this?

Michael Fromin · Accepted Answer · 2018-10-11 15:39:04Z

1

You can add your own custom button to the TinyMCE toolbar and trigger JavaScript when its clicked. You can then use the editor APIs to wrap the selected text with the tag and perform other work as needed.

Here is a TinyMCE Fiddle that shows the basic process: http://fiddle.tinymce.com/N1gaab

answered Oct 11, 2018 at 15:39

Michael Fromin

13.9k2 gold badges25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gatlanticus Over a year ago

Thanks! Your solution works perfectly for marking within a single element. However, I would also like this to work over multiple elements (e.g. selection starts halfway through paragraph 1 and finishes in paragraph 2 or 3). The inbuilt bold, italics, etc can do this fine, so I assume I need to use something else from the TinyMCE API rather than insertContent(). Do you have any suggestions?

gatlanticus Over a year ago

I solved the problem of applying across elements by adding formats: {mark: { inline: 'mark' }} to the Editor init property and then calling this.state.editor.formatter.apply('mark') when the button is pressed

Collectives™ on Stack Overflow

How to add html tag programmatically in TinyMCE editor?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related