Ckeditor 5 не работает при добавлении плагинов (без ошибок)

import InlineEditor from '@ckeditor/ckeditor5-build-inline';
// import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';

InlineEditor
    .create( document.querySelector( '#editor' ), {
        // plugins: [ Bold ],
        toolbar: [ 'bold' ]
    } )
    .then((editor) => {
        editor.setData('Some Text');
    })
    .catch( error => {
        console.error( error );
    } );

введите описание изображения здесь

Когда я включаю плагины:

import InlineEditor from '@ckeditor/ckeditor5-build-inline';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';

InlineEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Bold ],
        toolbar: [ 'bold' ]
    } )
    .then((editor) => {
        editor.setData('Some Text');
    })
    .catch( error => {
        console.error( error );
    } );

введите описание изображения здесь

Мои пакеты npm

[email protected] /var/www/english.dev.*******/frontend/web/js/npm/webpack-demo
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── @ckeditor/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

.html

<div id="editor"></div>

На самом деле моя цель - вставить html с тегом с помощью метода setData (), но, поскольку я недооценен, мне нужно использовать плагин Markdown. Но в любом случае я не могу заставить его работать ни с какими плагинами. Спасибо.

P. S. Я пробовал простые и встроенные формы, но та же проблема.


person Sergey Filatov    schedule 19.12.2017    source источник


Ответы (2)


Я выяснил, что это потому, что не был импортирован и не использовался абзац

import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

....
plugins: [ Paragraph ]
.....

Я думаю, что это нехорошее поведение ckeditor. Но это 1.0.0 что я от нее хочу .. xD

person Sergey Filatov    schedule 20.12.2017

CKEditor 5 очень модульный, и даже такие функции, как поддержка набора текста, представляют собой отдельные плагины, которые вам необходимо загрузить. Создатель редактора не может предположить, какие модули следует загрузить, и оставляет все это разработчикам.

Вы можете узнать больше об архитектуре в "Обзор архитектуры" .

Итак, вы обязаны загрузить все необходимые плагины при сборке редактора из исходного кода. Если вы используете существующие сборки редактора, вам не нужно этого делать, потому что в сборки встроен набор плагинов.

Кстати, загрузки Paragraph недостаточно для создания редактора. Вы не сможете вводить или вставлять. Поэтому есть плагин, который включает все эти важные функции - Essentials.

См. структуры CKEditor 5 Framework "Краткое руководство" для получения дополнительной информации (например, готовых к использованию фрагментов кода).

person Reinmar    schedule 20.12.2017
comment
Спасибо! К сожалению, я узнал об этом прямо сейчас, прежде чем увидел ваше сообщение :( Можно было сэкономить несколько часов ... - person Sergey Filatov; 21.12.2017
comment
@reinmar: Я столкнулся с трудностями при настройке функции копирования и вставки, или я не уверен, как это сделать. Я хочу настроить Base64UploadAdapter для сохранения изображения. Пожалуйста, предоставьте свои входные данные. Параметр stackoverflow.com/questions/57090810/ - person Raphael; 18.07.2019