使用 jQuery 在 TinyMCE 编辑器中选择元素答案

【问题标题】：Select elements inside TinyMCE editor with jQuery使用 jQuery 在 TinyMCE 编辑器中选择元素
【发布时间】：2019-01-23 13:52:11
【问题描述】：

我尝试了很多方法，但没有幸运地使用 jQuery 在 TinyMCE 中选择元素。我需要选择：

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

有可能吗？怎么样？

【问题讨论】：

你应该检查这个：stackoverflow.com/questions/1451208/…
这会帮助你：stackoverflow.com/questions/32697711/…

标签： jquery tinymce

【解决方案1】：

为了使用 jQuery 在 TinyMCE 编辑器中选择元素，您需要包含 tinymce jquery 库，然后您可以获得一个 dom 元素：

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

代码示例。小提琴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>

【讨论】：

【解决方案2】：

iframe 受到保护；您无法使用外部的 JavaScript 访问其中的元素。我也发现了这一点。

相反，请查看 TinyMCE API 参考。 https://www.tiny.cloud/docs/api/

例如，您可以使用函数tinymce.dom.DomQuery() 来访问编辑器中的元素：

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

编辑：如果 iframe 来自同一域 Access iframe elements in JavaScript，则可以访问它们。但我相信 DomQuery 功能更快更容易

【讨论】：