如何将 Wordpress 中的 wp_editor with jQuery 添加到我的前端?

Question

我需要将带有jQuery函数的wp_editor添加到前端的div中。这是我的代码，但我正在努力处理编辑器部分。这是我的代码：

<div class="container">
<div class"text">
Some text in this div here blub bla bli blu 
</div>
<div class"edit-button"></div>
</div>

jQuery('.edit-button').click(function () {
var description = jQuery('.text');
var description_content = description.text();
//Hide the description in the frontend
jQuery(description).hide();
jQuery('.edit-button').hide();
//Create editor here, pre-fill the editor with the description text and display it inside of the <div class="container">
});

如您所见，我有一个容器。在这个容器中，我有一个文本和一个编辑按钮。当用户单击编辑按钮时，我需要从class"text"中获取文本，将其设置为创建的wp_editor((并将其插入我的容器中。之后，我将隐藏文本和编辑按钮。我该怎么做？我搜索了很多，只是找到了"将wp_editor((设置为文本区域等"的解决方案。

Answer 1

您可以在 PHP 和隐藏编辑器(例如在隐藏的div 中(直接调用wp_editor。单击编辑按钮时，以这种方式设置编辑器内容

// Sets the HTML contents of the activeEditor editor
tinymce.activeEditor.setContent('<span>some</span> html');

https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent

获取内容编辑器：https://wordpress.stackexchange.com/a/252329/74284

---

wp_editor(( 此函数向页面添加许多代码，您无法手动将编辑器 JS/CSS 文件添加到页面。 https://codex.wordpress.org/Function_Reference/wp_editor

<?php wp_editor('', 'test'); ?>

您可以直接调用函数或使用 AJAX。

如果只想添加富文本编辑器，可以使用自定义编辑器 https://www.sitepoint.com/10-best-html-wysiwyg-plugins/