Использование пакета ckeditor5-typing в CKEditor - PullRequest
Новая
       17

Использование пакета ckeditor5-typing в CKEditor

0 голосов
/ 03 мая 2018

Я пытаюсь разработать программную клавиатуру с использованием CKEditor. Это требует, чтобы я преобразовал текст при вводе (завершено) и иногда нужно удалить ключ (где я борюсь). Мой текущий код выглядит следующим образом: 

ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then(editor => {
            console.log( editor );
            editor.editing.view.document.on( 'keydown', ( event, data ) => {

                var keyPressed = data.domEvent.key;
                //getMappedCharacter returns a map
                //String newKey -> value of the keyPressed
                //Boolean deleteKey -> Whether the previous character should be deleted
                var mappedCode = getMappedCharacter(keyPressed);
                console.log('mc', mappedCode)

                if (mappedCode.newKey != keyPressed) {
                    data.preventDefault();
                    event.stop();


                    if(mappedCode.deleteKey){
                      //  WHERE I'M STRUGGLING
                      // Trying to delete the latest character inserted (where my cursor is located). 
                    }

                    editor.model.change( writer => {
                        writer.insertText( mappedCode.newKey, editor.model.document.selection.getFirstPosition() );
                    } );
                }

            })
        })
        .catch( error => {
            console.error( error );
        } );

В настоящее время я пытаюсь использовать команду Delete пакета ckeditor5-typing с CKEditor5 в проекте Angular / Typescript. Документация говорит, что я должен включить в набор плагинов пакет Typing, например: 

    ClassicEditor
        .create( document.querySelector( '#editor' ), {
            plugins: [ Essentials, Paragraph, Bold, Italic ],
            toolbar: [ 'bold', 'italic' ]
        } )

Однако, когда я это делаю, я получаю следующую ошибку в консоли:

console error

Когда я ввожу document.querySelector('#editor') в консоли, я получаю следующее:

<textarea _ngcontent-c1 dir=​"rtl" id=​"editor" name=​"content">​</textarea>​

Так что я не уверен, почему он показывает мне нулевую ошибку в консоли.

Любая помощь будет оценена

1 Ответ

0 голосов
/ 04 мая 2018

Что делает этот код: 

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Typing ]
    }  )

Это то, что он загружает только Плагин набора текста. В то же время, как я вижу из предупреждений, вы используете сборку CKEditor 5, которая имеет предварительно настроенную панель инструментов (вы можете найти пример здесь ). Итак, что происходит, так это то, что редактор загружает только один плагин, но пытается добавить несколько (несуществующих) кнопок на панель инструментов. Следовательно, предупреждения регистрируются.

Что меня удивляет, так это то, что вы пытаетесь включить этот плагин. Прежде всего, он включен во всех типах сборок редактора. Во-вторых, вам нужно также включить другие плагины, чтобы увидеть что-нибудь. Например. редактор не будет отображать контент, если вы не включите хотя бы плагин Paragraph.

PS. Обязательно прочитайте https://docs.ckeditor.com/ckeditor5/latest/builds/guides/development/installing-plugins.html, поскольку кажется, что вы пытаетесь добавить плагины в сборку, в то время как плагины можно добавлять только тогда, когда редактор собран из исходного кода.

...