Symfony 5 & FOSCKEDITOR: создайте простой настраиваемый плагин, значок этого плагина не отображается на панели инструментов Ckeditor - PullRequest
Новая
       33

Symfony 5 & FOSCKEDITOR: создайте простой настраиваемый плагин, значок этого плагина не отображается на панели инструментов Ckeditor

1 голос
/ 05 мая 2020

С веб-сайта Symfony 5 я установил полезный пакет fosckeditor (CKEDITOR версии 4).

Все работает нормально, у меня на странице появляется поле CKEDITOR. Теперь я хочу создать новый простой плагин.

Я тщательно следовал этому официальному руководству и создал новый плагин в <symfony_root_dir>/public/bundle/fosckeditor/plugins/ с именем 'timestamp' с некоторыми файлами:

enter image description here

В plugin.js я добавляю этот код: 

CKEDITOR.plugins.add( 'timestamp', {
    icons: 'timestamp',
    init: function( editor ) {
        alert('hello test ?'); // this alert appears when I load the page containing the CKEDITOR
        editor.addCommand('insertTimestamp', {
            exec: function (editor) {
                var now = new Date();
                editor.insertHtml('The current date and time is: <em>' + now.toString() + '</em>');
            }
        });
        editor.ui.addButton('timestamp', {
            label: 'Insert Timestamp',
            command: 'insertTimestamp',
            toolbar: 'insert'
        })
    }
});

И в <symfony_root_dir>/public/bundle/fosckeditor/config.js я добавил: 

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = ['timestamp'];
    // same result if instead I add the custom plugin via a string : config.extraPlugins = 'timestamp';
};

В этом простом примере я копирую / вставляю значок из другого плагина, вот файл значка с меткой времени:

enter image description here

Наконец , Перезагружаю страницу (перезагружаю + очищаю кеши). Но панель инструментов Ckeditor не меняется, пользовательский плагин нигде не появляется.

enter image description here

Я пробовал добавить кнопку в файл fos_ckeditor.yaml вот так: 

# ...
fos_ck_editor:
    # ...
    default_config: main_config
    configs:
        main_config:
            # ...
            toolbar:
                - {
                    items:
                      ['timestamp']
                }
    styles:
        # ...

Но кнопка моего настраиваемого плагина отсутствует на панели инструментов CKEditor. У меня нет ошибки javascript в консоли браузера, я не понимаю, где сделал ошибку.

1 Ответ

1 голос
/ 12 мая 2020

Попробуйте эту конфигурацию:

app / templates / ckeditor. html .twig 

{% extends "base.html.twig" %}

{% block body %}

    <div class="ckeditor">

        {{ form_start(form) }}
            {{ form_row( form.content ) }}
        {{ form_end(form) }}

    </div>

{% endblock %}

app / src / Controller / TestController. php

<?php

namespace App\Controller;

use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use FOS\CKEditorBundle\Form\Type\CKEditorType;

class TestController extends AbstractController
{
    public function index()
    {
        $form = $this->createFormBuilder()
                    ->add('content', CKEditorType::class)
                    ->getForm();

        return $this->render('ckeditor.html.twig', [
            'form' => $form->createView()
        ]);
    }
}

app / public / bundles / fosckeditor / plugins / timestamp / plugin. js

CKEDITOR.plugins.add( 'timestamp', {
    init: function(editor) {
        editor.addCommand('insertTimestamp', {
            exec: function (editor) {
                var now = new Date();
                editor.insertHtml('The current date and time is: <em>' + now.toString() + '</em>');
            }
        });

        editor.ui.addButton('timestamp', {
            label: 'Insert Timestamp',
            command: 'insertTimestamp',
            toolbar: 'mode,0',                 // toolbar group and index
            icon: this.path + 'timestamp.png'  // icon file (PNG)
        });
    }
})

app / config / packages / fos_ckeditor.yaml 

twig:
    form_themes:
        - '@FOSCKEditor/Form/ckeditor_widget.html.twig'

fos_ck_editor:
    default_config: test_config

    configs:
        test_config:
            extraPlugins: ["timestamp"]

    plugins:
        timestamp:
            path:     "bundles/fosckeditor/plugins/timestamp/"
            filename: "plugin.js"

Снимок экрана:

CKEditor Plugin Screeshot

Структура каталога подключаемых модулей:

app / public / bundles / fosckeditor / plugins / 

timestamp/
├── plugin.js
└── timestamp.png

Соответствующие ссылки:

...