利用tinymce.activeEditor获取到 WordPress可视化编辑器中的值（附：tinymce.activeEditor常见其他用法）

文 / @WordPress主题 2023-06-06 08:00:02

要在 WordPress 可视化编辑器中获取内容，你需要使用 JavaScript 和 jQuery。可视化编辑器使用 TinyMCE 编辑器作为其编辑器，因此你可以使用 TinyMCE 提供的 API 来获取内容。

下面是一些使用 jQuery 获取 WordPress 可视化编辑器内容的示例代码：

javascript

// 等待页面加载完成

$(document).ready(function() {

// 获取可视化编辑器的内容

var content = tinymce.activeEditor.getContent();

// 打印内容到控制台
console.log(content);// 将内容显示在一个元素中
$('#output').html(content);
});

上述代码假设你已经在页面上加载了 jQuery 库，并在页面中有一个具有 id 为 output 的元素，你可以在该元素中显示编辑器的内容。

请注意，WordPress 可视化编辑器是通过 AJAX 加载的，因此在获取内容之前，你需要确保编辑器已经完全加载。你可以在 document.ready 或 window.onload 事件中执行获取内容的代码。

另外，你可能需要将上述代码放在 WordPress 的模板文件或自定义 JavaScript 文件中，以确保代码正确执行。

tinymce.activeEditor常见其他用法

除了获取内容之外，tinymce.activeEditor 还提供了一些其他有用的方法和属性，让你可以操作和控制 TinyMCE 编辑器的行为。下面是一些常用的 tinymce.activeEditor 方法和属性的示例：

javascript

tinymce.activeEditor.setContent('<p>这是新的内容。</p>');

javascript

var content = tinymce.activeEditor.getContent();

execCommand(command: string, ui?: boolean, value?: any)：执行指定的命令。可以使用该方法来执行编辑器的内置命令，如粗体、斜体、插入链接等。command 参数是要执行的命令名称，ui 和 value 是可选参数，用于指定命令的额外选项。

javascript

// 设置选中文本为粗体

tinymce.activeEditor.execCommand('bold');

javascript

// 撤销上一个操作

tinymce.activeEditor.undo();

// 重做上一个撤销的操作
tinymce.activeEditor.redo();

javascript

var body = tinymce.activeEditor.getBody();

这些是 tinymce.activeEditor 的一些常见用法示例。TinyMCE 还提供了许多其他方法和属性，你可以在 TinyMCE 的官方文档中查找更多详细信息：https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。

相关文章