Как добавить настраиваемую кнопку панели инструментов в ckeditor5 в vue с помощью Nuxt? - PullRequest
Новая
       155

Как добавить настраиваемую кнопку панели инструментов в ckeditor5 в vue с помощью Nuxt?

0 голосов
/ 21 июня 2020

Я пытаюсь разработать простой текстовый редактор с nuxt для создания сообщений.
Я хочу иметь возможность сохранять содержание сообщения в моей БД.
У меня вопрос, как я могу добавить кастомное дно на мою панель инструментов?

Я хочу иметь возможность добавлять свои собственные h1, h2 bottom, добавляя им собственный CSS класс, чтобы при сохранении содержимого классы уже присутствовали в моем коде.

Я попытался добавить новую модель в параметры, как описано в документации, но классы по-прежнему не печатаются.
Так что, возможно, решение - создать новое дно ??

Это мой код.

Я установил CKEditor 5. В моем шаблоне: 

<template>
  <div class="container">
     <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
     <button @click="save"  class="btn btn-info"> save html</button>
  </div>
</template>

мой скрипт 

<script>
import Vue from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';


export default Vue.extend({
  data(){
    return{
        editor: ClassicEditor,
        editorData: '<p>Content of the editor.</p>',
        plugins:[],
        editorConfig: {
          allowedContent :true,
          heading: {
              options: [
                {model: 'paragraph', title: 'Paragraph', className: 'ck-heading_paragraph' },
                {model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1', converterPriority: 'high'},
                {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: 'a', title: 'Heading 5', class: 'ck-heading_heading5'},
                {model: 'heading6', view: 'p', title: 'Heading 6', class: 'ck-heading_heading5', attributes:{'class': 'title'}}
              ]
        }
        }
    }
  },
  methods:{
    save(){
      console.log(this.editorData);
    }
  }
})
</script>
...