jQuery - 在 tinyMCE 所见即所得中选择元素

Posted 2023-03-07

【中文标题】jQuery - 在 tinyMCE 所见即所得中选择元素

【英文标题】：jQuery - Select element inside tinyMCE WYSIWYG

【发布时间】：2015-12-18 07:12:14

【问题描述】：

我有一个包含一些所见即所得字段的网站（使用 TinyMCE 和 Wordpress 和高级自定义字段）。我想在这些字段中选择和操作一些元素（添加背景图像），但我不知道该怎么做。

如何进入 TinyMCE 的 iFrame 并修改元素？ 在我选择它们之前，如何确保所有 WYSIWYG 字段都已正确加载？

我正在查看 TinyMCE 4 API，但我仍然不知道。

【问题讨论】：

要在 TinyMCE 编辑器中获取 html 元素，请使用 tinymce.activeEditor.getContent(format: 'html')。

我不想要编辑器中的内容，我想要 ID 为“tinymce”的正文。它位于组成每个编辑器的每个 iframe 内。

【参考方案1】：

如何进入 TinyMCE 的 iFrame 并修改元素？

您可以使用此访问Iframe 对象。

tinymce.activeEditor.contentAreaContainer.childNodes[0];

你可以使用这个访问Iframesdocument。

tinymce.activeEditor.contentAreaContainer.childNodes[0].contentWindow.document;

如何确保在选择所有 WYSIWYG 字段之前正确加载它们？

要知道 tinymce 何时完全初始化，请将 on init 事件附加到编辑器的初始化中。

tinymce.init(
    .....    
    setup: function(editor)
         //fired when tinymce is loaded
         editor.on('init', function(e)                
            //All Loaded 
         );                          
    
);

【参考方案2】：

您可以使用init_instance_callback 函数来设置 iframe 属性。

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。

@WesFoster 这是批评还是要求澄清？这是一个答案，虽然很短。

init_instance_callback: function (editor) $('#' + editor.id + '_ifr').addClass('chatFrame');