Как мы можем добавить свой выпадающий список в крошечном mce, используя yii2 - PullRequest
Новая
       20

Как мы можем добавить свой выпадающий список в крошечном mce, используя yii2

0 голосов
/ 22 января 2019

Я хочу добавить пользовательский выпадающий список в крошечном редакторе mce, я использую инфраструктуру yii и плагин yii для интеграции редактора

1 Ответ

0 голосов
/ 22 января 2019

Вы не добавили ни одной детали в свой вопрос, но так как вы новый здесь и так кодекс поведения был пересмотрен, чтобы быть более приятным и скромным по отношению к новичкам, поэтому я добавив ответ для вас, пройдите Как спросить Вопрос? перед публикацией вопрос в следующий раз.

Вы можете добавить раскрывающийся список в TinyMCE, используя опцию setup, которая принимает функцию обратного вызова с параметром editor, который содержит экземпляр редактора, а затем вам нужно вызвать editor.addButton(label, options) с вариантами создания настраиваемой кнопки выпадающего меню.

Поскольку вы не добавили в вопрос никаких подробностей, например, какие параметры вы собираетесь отобразить в раскрывающемся списке, поэтому я буду считать здесь usernames из базы данных в переменной $users.

Шаги для реализации

  • Сначала мы преобразуем массив $users в массив js, используя yii\helpers\Json::encode().
  • Итерация этого массива для создания раскрывающихся опций с событием 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, измените ее соответствующим образом в настройках панели инструментов редактора, иначе она не будет отображаться до 

<?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),
            ],
        ]
    );
?>
...