В первой части создали собственный билд редактора CKE 5, теперь установим редактор, вставляем скрипты на страницу блога. Первым делом установим собранный билд редактора.

Напишем разметку формы для привязки редактора к id = mytextarea

Создадим функцию createEditor для запуска скрипта CKE editor 5

function createEditor(idTextarea) {
            ClassicEditor
                .create( document.querySelector('#mytextarea'), {
                  style: {
                    definitions: [
                      {
                        name: 'Button',
                        element: 'a',
                        classes: ['btn btn-default']
                      },
                      {
                        name: 'Headline',
                        element: 'span',
                        classes: ['table']
                      }
                    ]
                  },
                  extraPlugins: [MyCustomUploadAdapterPlugin],
                  htmlSupport: {
                    allow: [
                      {
                        name: /.*/,
                        attributes: true,
                        classes: true,
                        styles: true
                      }
                    ]
                  },
                  fontFamily: {
                    options: [
                      'default',
                      'Arial, Helvetica, sans-serif',
                      'Courier New, Courier, monospace',
                      'Georgia, serif',
                      'Lucida Sans Unicode, Lucida Grande, sans-serif',
                      'Tahoma, Geneva, sans-serif',
                      'Times New Roman, Times, serif',
                      'Trebuchet MS, Helvetica, sans-serif',
                      'Verdana, Geneva, sans-serif'
                    ],
                    supportAllValues: true
                  },
                  fontSize: {
                    options: [10, 12, 14, 'default', 18, 20, 22],
                    supportAllValues: true
                  },
                  heading: {
                    options: [
                      {model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
                      {model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'},
                      {model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
                      {model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'},
                      {model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4'},
                      {model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5'},
                      {model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6'}
                    ]
                  },

                })
                .then(editor => {
                  window.editor = editor;
                  editor.model.document.on( 'change:data', ( evt, data ) => 
                   {
                    $('textarea#tab_mytextarea').html(editor.getData());
                  });

                })
                .catch(err => {
                  console.log(err);
                });
          }

Рассмотрим подробнее, в блоке style находятся костомные стили кнопки , блоки и т.д можно добавлять от наличия потребностей для быстрой стилизации текста статьи. очень удобная штука рекомендую.

  style: {
                    definitions: [
                      {
                        name: 'Button',
                        element: 'a',
                        classes: ['btn btn-default']
                      },
                      {
                        name: 'Headline',
                        element: 'span',
                        classes: ['table']
                      }
                    ]
                  },

Сама загрузка картинки будет происходить через дополнительный плагин extraPlugins: [MyCustomUploadAdapterPlugin], обратите внимание что файл upload.php сохраняет картинку и возвращает url сохраненной картинки в формате json

function MyCustomUploadAdapterPlugin(editor) {
            editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
              return new MyUploadAdapter(loader);
            };
          }

          class MyUploadAdapter {
            constructor(loader) {
              // CKEditor 5's FileLoader instance.
              this.loader = loader;
              // Файл обработчик сохраняет картинки и возвращает url сохраненной картинки в формате json_encode(array('url'=>$full_path)).
              this.url = 'ckeditor/upload.php';
            }

            // Starts the upload process.
            upload() {
              return this.loader.file
                  .then(file => new Promise((resolve, reject) => {
                    this._initRequest();
                    this._initListeners(resolve, reject, file);
                    this._sendRequest(file);
                  }));
            }

            // Aborts the upload process.
            abort() {
              if (this.xhr) {
                this.xhr.abort();
              }
            }
            _initRequest() {
              const xhr = this.xhr = new XMLHttpRequest();
              xhr.open('POST', this.url, true);
              xhr.responseType = 'json';
            }
            _initListeners(resolve, reject, file) {
              const xhr = this.xhr;
              const loader = this.loader;
              const genericErrorText = 'Couldn\'t upload file:' + ` ${file.name}.`;
              xhr.addEventListener('error', () => reject(genericErrorText));
              xhr.addEventListener('abort', () => reject());
              xhr.addEventListener('load', () => {
                const response = xhr.response;
                if (!response || response.error) {
                  return reject(response && response.error ? response.error.message : genericErrorText);
                }
                // If the upload is successful, resolve the upload promise with an object containing
                // at least the "default" URL, pointing to the image on the server.
                resolve({
                  default: response.url
                });
              });

              if (xhr.upload) {
                xhr.upload.addEventListener('progress', evt => {
                  if (evt.lengthComputable) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                  }
                });
              }
            }

            // Prepares the data and sends the request.
            _sendRequest(file) {
              const data = new FormData();
              data.append('upload', file);
              //csrf_token CSRF protection
              //data.append('csrf_token', requestToken);
              this.xhr.send(data);
            }
          }

Мы можем настроить вывод html текста в редакторе, вырезать не нужные теги и атрибуты, в нашем случае свобода действия, доступны атрибуты, классы, стили и т.д.

 htmlSupport: {
                    allow: [
                      {
                        name: /.*/,
                        attributes: true,
                        classes: true,
                        styles: true
                      }
                    ]
                  },

Про настройку fontFamily, fontSize, heading итак все понятно редактируем, добавляем нужные настройки для редактора.

Для многих удобно добавлять данные в форму, а далее сохранять уже в базу, как вариант мы можем отправлять наш текст из редактора при каждом изменении в тег textarea, далее по кнопки submit отправить POST данные в обработчик. В функции за это отвечает этот фрагмент кода.

.then(editor => {
    window.editor = editor;
    editor.model.document.on( 'change:data', ( evt, data ) => {
      $('textarea#tab_mytextarea').html(editor.getData());
    });
 }

На этом пока все, редактор готов к работе!