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

Я пытаюсь разработать мягкую клавиатуру с помощью 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' ]
        } )

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

ошибка консоли

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

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

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

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


typescript angular ckeditor5
person sometimes24    schedule 03.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

person Reinmar    schedule 04.05.2018
comment
Когда я делаю это формальным способом, я получаю атрибут «невозможно прочитать» со значением null, однако document.querySelector( '#editor' ) что-то возвращает. Как я могу получить доступ к команде Typing package/Delete? - person sometimes24; 05.05.2018
comment
Я не понимаю, что вы имеете в виду. Вы должны быть более конкретными, что вы сделали, что произошло и чего вы хотите достичь. - person Reinmar; 14.05.2018
comment
Я обновил свой вопрос, чтобы быть более ясным - надеюсь, это поможет вам помочь мне :) - person sometimes24; 15.05.2018
comment
Вы столько всего смешали в вопросе, что я до сих пор в полном замешательстве. Вы вставили код с комментарием WHERE I'M BRUGGLING, который совершенно не связан с полученной вами ошибкой и текстовой областью, которая регистрируется в консоли. Вы пытаетесь решить по крайней мере 3 проблемы одновременно, в то время как вы должны работать над ними одну за другой. - person Reinmar; 15.05.2018
comment
Первая проблема, которую вам нужно решить, это почему редактор не запускается (ошибка, которую вы получаете) и это не имеет никакого отношения к использованию пакета ckeditor5-typing в CKEditor. Это вызвано неполной конфигурацией веб-пакета. Откройте для этого новый вопрос, и мы сможем вам помочь. - person Reinmar; 15.05.2018