Select elements inside TinyMCE editor with jQuery

Question

I've tried many ways, but no lucky to accomplish to select elements inside TinyMCE with jQuery. I need to select like:

$("div",editor).css("border","1px solid red");
$("iframe div").css("border","1px solid red");

Does it possible? How?

You should check this one: https://stackoverflow.com/questions/1451208/access-iframe-elements-in-javascript — emtei, Aug 16 '18 at 14:57
This will help you: https://stackoverflow.com/questions/32697711/jquery-select-element-inside-tinymce-wysiwyg — Marcus Stratu, Aug 16 '18 at 14:58

score 1 · Answer 1 · answered Aug 16 '18 at 15:22

iframes are protected; you can not access elements within it using JavaScript outside of it. I too found this out the hard way.

Instead, check out the TinyMCE API Reference. https://www.tiny.cloud/docs/api/

For example, you can use the function tinymce.dom.DomQuery() to access the elements in the editor:

tinymce.dom.DomQuery('div').css("border", "1px solid red");

EDIT: You can access iframes if they are from the same domain Access iframe elements in JavaScript. But I believe the DomQuery function is a lot quicker and easier

score 1 · Accepted Answer · answered Aug 16 '18 at 16:05

In order to select elements inside TinyMCE editor with jQuery you need to include the tinymce jquery library then you can get a dom element with:

$('#mytextarea').tinymce().$('body div')

Code example. Fiddle here

tinymce.init({
    selector: '#mytextarea'
});

$('button').on('click', function(e) {
    $('#mytextarea').tinymce().$('body div').css("border","1px solid red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/tinymce/tinymce-dist/master/tinymce.min.js"></script>
<script src="https://rawgit.com/tinymce/tinymce-dist/master/jquery.tinymce.min.js"></script>

<button>Click Me</button>
<textarea id="mytextarea">Hello, World!<div>hello word in div</div></textarea>

Select elements inside TinyMCE editor with jQuery

2 Answers2