Question

我想在微小的mce编辑器中添加一个自定义下拉列表，我正在使用yii框架并使用yii插件来集成编辑器

Answer 1

您尚未在问题中添加任何详细信息，但由于您是新用户蜜蜂在这里，所以Code of Conduct 已被修改为对新来者更加友善和谦虚，所以我为您添加答案，请务必先通过How to Ask a Question?进行发布，然后再发布下次再问。

您可以使用TinyMCE选项在setup中添加下拉列表，该选项采用带参数editor的回调函数，该参数包含编辑器实例，然后您需要调用{{ 3}}，并带有用于创建自定义下拉按钮的选项。

由于您尚未在问题中添加任何详细信息，例如您将在下拉列表中显示的选项是什么，因此，在这里，我将假设数据库usernames中的变量为$users

实施步骤

首先，我们将使用$users将yii\helpers\Json::encode()数组转换为js数组。
迭代该数组以创建带有onclick事件的下拉选项，以将内容插入编辑器。
使用editor.addButton('users',options)创建带有标签users的下拉类型的按钮，以便以后在初始化编辑器工具栏按钮时使用。

在视图顶部添加以下代码

$usersList = \yii\helpers\Json::encode($users);

$tinyMCECallback = <<< JS
    function (editor) {

        let usersList = $usersList;
        let options = [];

        //iterate the user array and create the options with text and 
        //onclick event to insert the content on click to the editor

        $.each(usersList, function(label, mapping) {
            options.push({
                text: label, 
                onclick: function() { tinymce.activeEditor.insertContent(label); }
            });
        });

        //add the dropdown button to the editor 
        editor.addButton('users', {
            type: 'menubutton',
            text: 'Users',
            icon: false,
            menu: options
        });
    }

JS;

现在您需要做的就是将$tinyMCECallback传递到setup小部件的tinyMCE选项，如果您使用的是活动表单，则代码应如下所示。

注意：请不要忘记将按钮的users标签添加到工具栏选项中，或者如果您在javascript代码中进行了更改，请在编辑器工具栏选项中进行相应的更改，否则它将不会t出现

<?php
    echo $form->field(
        $model, 'body'
    )->widget(
        TinyMce::class, [
            'options' => ['rows' => 10],
            'language' => 'en',
            'clientOptions' => [
                'menubar' => false,
                'statusbar' => false,
                'toolbar' => "undo redo | users",
                'setup' => new \yii\web\JsExpression($tinyMCECallback),
            ],
        ]
    );
?>

我们如何使用yii2在微小的mce中添加自定义下拉列表

1 个答案: