WordPress 4.8:使用多个所见即所得-如何在小工具中使用媒体编辑器?

时间:2017-06-12 作者:Blackbam

随着WP 4.8扩展widgets API,简单文本小部件使用TinyMCE。优点是TinyMCE脚本已经在Ajax请求中排队。

然而,对于客户端,我需要一个具有multiple editors 在里面。此小部件不仅用于小部件的页面,还用于插件中Page builder by SiteOrigin.

在新的WordPress中,widget form()函数的作用如下:

public function form( $instance ) {
        // ...

        foreach(cisI8Suffixes(true) as $suf) {
            ?><div class="cis_editor_bwrap" <?php echo (CIS_I8_ENABLE) ? \'data-cislan="\'.cisLanFromSuf($suf).\'"\': ""; ?>><?php
            wp_editor(cisI8Extract($instance, \'text\', $suf), \'text\'.$suf );
            ?></div><?php
        }

        $this->containerInputHTML($instance);
        $this->linkWrapperInputHTML($instance);
}
然而,只要我只有一个小部件,它就可以工作,因为一旦创建了第二个小部件,ID就会被复制。我需要一个随机数或widget ID(注意:由于wp\\u编辑器不接受ID中的减号,因此需要str\\u替换)。

以下不幸失败:

public function form( $instance ) {
        // ...
        foreach(cisI8Suffixes(true) as $suf) {
            ?><div class="cis_editor_bwrap" <?php echo (CIS_I8_ENABLE) ? \'data-cislan="\'.cisLanFromSuf($suf).\'"\': ""; ?>><?php
            wp_editor(cisI8Extract($instance, \'text\', $suf), str_replace("-","_",$this->get_field_id(\'text\'.$suf)) );
            ?></div><?php
        }
}
如果编辑器ID中有随机数或小部件ID,WordPress无法正确实例化TinyMCE。错误消息如下:

wp-tinymce.php?c=1&ver=4603-20170530:15 Uncaught TypeError: Cannot read property \'onpageload\' of undefined
    at h (wp-tinymce.php?c=1&ver=4603-20170530:15)
    at m (wp-tinymce.php?c=1&ver=4603-20170530:15)
    at h.l.bind (wp-tinymce.php?c=1&ver=4603-20170530:3)
    at o.bind (wp-tinymce.php?c=1&ver=4603-20170530:5)
    at Object.init (wp-tinymce.php?c=1&ver=4603-20170530:15)
    at e (editor.min.js?ver=4.8:1)
    at HTMLDocument.<anonymous> (editor.min.js?ver=4.8:1)
    at a (wp-tinymce.php?c=1&ver=4603-20170530:3)
    at HTMLDocument.p (wp-tinymce.php?c=1&ver=4603-20170530:3)
如果使用可能性二,这是wp\\U编辑器输出的HTML:

<div class="wp-core-ui wp-editor-wrap html-active" id="wp-widget_ciseditor_c27_text-wrap">
    <link href="http://localhost/hiedler/wp-includes/css/dashicons.min.css?ver=4.8" id="dashicons-css" media="all" rel="stylesheet" type="text/css">
    <link href="http://localhost/hiedler/wp-includes/css/editor.min.css?ver=4.8" id="editor-buttons-css" media="all" rel="stylesheet" type="text/css">
    <div class="wp-editor-tools hide-if-no-js" id="wp-widget_ciseditor_c27_text-editor-tools">
        <div class="wp-media-buttons" id="wp-widget_ciseditor_c27_text-media-buttons">
            <button class="button insert-media add_media" data-editor="widget_ciseditor_c27_text" id="insert-media-button" type="button"><span class="wp-media-buttons-icon"></span> Dateien hinzufügen</button>
        </div>
        <div class="wp-editor-tabs">
            <button class="wp-switch-editor switch-tmce" data-wp-editor-id="widget_ciseditor_c27_text" id="widget_ciseditor_c27_text-tmce" type="button">Visuell</button> <button class="wp-switch-editor switch-html" data-wp-editor-id="widget_ciseditor_c27_text" id="widget_ciseditor_c27_text-html" type="button">Text</button>
        </div>
    </div>
    <div class="wp-editor-container" id="wp-widget_ciseditor_c27_text-editor-container">
        <div class="quicktags-toolbar" id="qt_widget_ciseditor_c27_text_toolbar"></div>
        <textarea class="wp-editor-area" cols="40" id="widget_ciseditor_c27_text" name="widget_ciseditor_c27_text" rows="20"></textarea>
    </div>
</div>
所以我的问题是我如何解决这个问题?

我有两个想法:

创建/加载小部件后注册动态编辑器ID并使其正常工作。怎样

根本不要使用wp\\u editor(),而是使用textareas并对其动态应用TinyMCE。问题:文件上载将丢失。如何在每个新的小部件/小部件加载上应用TinyMCE脚本?

到目前为止尝试了很多事情,但都没有成功。

2 个回复
SO网友:Tim Elsass

很难说没有看到所有的代码。

是的,如果您不引用该实例,那么它就不会是唯一的ID。类似这样的方法可以工作,您只需引用类属性$ID:

    for ( $i = 0; $i <= count( $suffixes ); $i++) {
        wp_editor( \'your content\', "{$this->id}_$i" );
    }
文本小部件的js-in-core在处理实例化之前为编辑器实例创建一个随机ID,因此如果您想遵循以下步骤,可以将其转换为PHP:

    $el = \'el\' . preg_replace( \'/\\D/\', \'\', ( rand()/getrandmax() ) ) . \'_\';
由于您是在本地开发的,所以您应该在wp配置中打开SCRIPT\\u DEBUG。php:define(\'SCRIPT\\u DEBUG\',true);帮助您解决javascript问题。这样做会使缩小文件的错误更有意义。该错误是由编辑器中的switchEditor方法引起的。最小js。定制器中的tinymce文本小部件有特殊的处理方式,它不仅仅像调用wp\\u编辑器那么简单,尽管它可能是可以做到的。您可以尝试启用wp\\u skip\\u init进程并添加您自己的初始化代码,可能是:

    add_filter( \'wp_editor_settings\', \'ciseditor_wp_editor_settings\', 5, 2 );
    function ciseditor_wp_editor_settings( $settings, $id ) {
        // look for your prefixed id and return the id associated with it.
        if ( $ed = strstr( $id, \'foo_widget\' ) ) {
            $settings[\'tinymce\'] = array(
                \'wp_skip_init\' => true,
                \'wp_autoresize_on\' => false, // turn off the auto resize height of editor.
            );
            $settings[\'editor_height\'] = 300; // set the height
        }
        return $settings;
    }
我很肯定这不是办法。我建议查看wp-admin/js/text小部件。js来了解core如何实现文本小部件和交换机编辑器功能,以及如何正确处理定制程序的数据。您还应该引用wp includes/widgets/class wp widget文本。php,因为您本质上是想制作已经存在的相同的东西。

通常,在tinymce中出现该错误意味着该实例没有被正确删除和添加回来,因此WordPress的switchEditor在此上下文中为您抛出错误是有道理的。文本小部件中有很多文档。js关于tinymce和动态DOM组件将如何交互的问题,必须加以说明,否则最终会出现问题。

一个快速的解决方案可能是为编辑器实例禁用quicktags,这可以在wp\\U editor\\U设置过滤器中完成,也可以在制作编辑器时将其传递到设置数组中,即:

wp_editor( \'your content\', "{$this->id}_$i", array( \'quicktags\' => false ) );
我曾经在wordpress中动态地在一个项目上创建了tinymce实例,我只记得查看了核心编辑器代码,看看它们包含了哪些参数和脚本来让一切正常工作,所以这也是一个选项。如果您这样做的话,大多数事情都会在php抽象到js的参数方面以1:1的比例进行转换。我认为对于添加媒体按钮,我最终创建了我自己的东西,但是有“media\\u按钮”这样的操作,所以你应该可以在需要显示的地方添加它。

还要考虑为什么在一个小部件中需要多个编辑器。另一种处理方法是在小部件本身中以手风琴样式删除实例,并在扩展手风琴时重建它们,以便一次只显示一个小部件。但我认为最终,在一个小部件中有一个编辑器适合大多数用例,并让最终用户能够灵活地将内容移动到最适合自己使用的地方。

SO网友:majick

如果我正确调用提供给的IDwp_editor 需要已经存在。

也许它在代码中的其他地方对您有用,但从我看到的情况来看,它与此不同?我认为需要这样指定:

public function form( $instance ) {
    // ...
    foreach(cisI8Suffixes(true) as $suf) {
        $id = str_replace("-","_",$this->get_field_id(\'text\'.$suf));
        ?><div class="cis_editor_bwrap" id="<?php echo $id; ?>" <?php echo (CIS_I8_ENABLE) ? \'data-cislan="\'.cisLanFromSuf($suf).\'"\': ""; ?>><?php
        wp_editor(cisI8Extract($instance, \'text\', $suf), $id);
        ?></div><?php
    }
}

结束

相关推荐

Customizer AJAX using buttons

我在wordpress自定义程序中添加了一个新的自定义按钮,我的目标是在自定义程序中创建一个按钮,然后在另一个自定义程序中启动特定功能。php文件。我有两个问题,一个是,只有当我想要激发的函数在其中任何一个函数中时,它才会起作用。php或自定义自定义程序。php。我的第二个问题是,只有当它是活动主题时,它才起作用。我对ajax和定制器还很陌生,所以感谢您的帮助。 //////////////////////////////////////////////////////// inside m