如何使用jQuery在WordPress中添加tinymce编辑器？

时间：2018-10-16 作者：Johnny97

我需要添加一个带有jQuery函数的tinymce编辑器。我知道tinymce是一个基于js的编辑器，因此需要有一种方法来执行以下操作：

<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 Tinymce here, pre-fill the editor with the description text and display it inside of the <div class="container">
});
我搜索了很多，但没有前进。你能帮帮我吗？非常感谢。

1 个回复
SO网友:Jacob Peattie

这是4.8中引入的JS版本编辑器的一个很好的用例：https://make.wordpress.org/core/2017/05/20/editor-api-changes-in-4-8/

添加了新的编辑器API#35760. 它使从JS动态实例化编辑器成为可能。

下面是一个如何使用它的示例（从Rheinard Korf的示例中窃取here):

// Remember to wp_enqueue_editor(); inside PHP.

// Add editor
wp.editor.initialize(
  \'test-editor\',
  { 
    tinymce: { 
      wpautop:true, 
      plugins : \'charmap colorpicker compat3x directionality fullscreen hr image lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview\', 
      toolbar1: \'formatselect bold italic | bullist numlist | blockquote | alignleft aligncenter alignright | link unlink | wp_more | spellchecker\' 
    }, 
    quicktags: true 
  }
);
在哪里test-editor 将是textarea 你想做一个编辑器。

结束
标签： php   javascript   小码农  

相关推荐

如何测试unctions.php中的类(来自插件)

我为函数添加了各种代码更改。php。其中许多依赖于某些活动插件，因为它们引用这些插件定义的类。如果插件被禁用，将导致500服务器错误，因为找不到相应的类。有没有办法先考一门课？例如，以下函数依赖于WooCommerce扩展中的类。// Add prices to variations add_filter( \'woocommerce_variation_option_name\', \'display_price_in_variation_option_name\' ); func