Question

我已经尝试了许多方法，但是要用jQuery在TinyMCE中选择元素并不是很幸运。我需要选择：

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

有可能吗？怎么样？

Answer 1

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函数会更快，更容易

Answer 2

为了在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>

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

2 个答案: