Как создать редактируемый vue widget для ckeditor 5?

Пользователь

от francis_schuster , в категории: JavaScript , год назад

Как создать редактируемый vue widget для ckeditor 5?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от nelle , год назад

@francis_schuster 

Для создания редактируемого Vue-виджета для CKEditor 5 вы можете использовать официальный плагин Vue-компонента CKEditor 5.


Вот пошаговая инструкция:

  1. Установите пакет @ckeditor/ckeditor5-vue в свой проект:
1
npm install --save @ckeditor/ckeditor5-vue


  1. Создайте Vue-компонент для CKEditor 5, используя <ckeditor> элемент:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <ckeditor :editor="editor" v-model="content" :config="editorConfig" />
</template>

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

export default {
  components: {
    ckeditor: CKEditor.component,
  },
  data() {
    return {
      editor: ClassicEditor,
      content: '<p>Initial content</p>',
      editorConfig: {
        // конфигурация CKEditor 5
      },
    };
  },
};
</script>


  1. Настройте конфигурацию CKEditor 5 в свойстве editorConfig. Например, вы можете добавить плагины, настроить тулбар, настроить расширенные настройки и т. д.
  2. Используйте v-model для связывания содержимого редактора с данными компонента Vue.


Вы можете использовать этот компонент в своих шаблонах и редактировать содержимое CKEditor 5 прямо внутри Vue-компонента.


Пример использования:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <div>
    <h2>My CKEditor 5 Widget</h2>
    <my-ckeditor />
  </div>
</template>

<script>
import MyCkeditor from '@/components/MyCkeditor';

export default {
  components: {
    MyCkeditor,
  },
};
</script>


Пользователь

от vladimir , 4 месяца назад

@francis_schuster 

Для создания редактируемого виджета CKEditor 5 в Vue, вы можете использовать официальный плагин CKEditor 5 для Vue.

  1. Установите пакет @ckeditor/ckeditor5-vue с помощью npm:
1
npm install --save @ckeditor/ckeditor5-vue


  1. Создайте компонент Vue с использованием
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <ckeditor :editor="editor" v-model="content" :config="editorConfig" />
</template>

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

export default {
  components: {
    ckeditor: CKEditor.component,
  },
  data() {
    return {
      editor: ClassicEditor,
      content: '<p>Initial content</p>',
      editorConfig: {
        // настройка CKEditor 5
      },
    };
  },
};
</script>


  1. Настройте конфигурацию CKEditor 5 в свойстве editorConfig. Вы можете добавить плагины, настроить панель инструментов и другие параметры.
  2. Используйте v-model для связывания содержимого редактора с данными компонента Vue.


Теперь вы можете использовать этот компонент в своих шаблонах и редактировать содержимое CKEditor 5 прямо внутри компонента Vue.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
  <div>
    <h2>My CKEditor 5 Widget</h2>
    <my-ckeditor />
  </div>
</template>

<script>
import MyCkeditor from '@/components/MyCkeditor';

export default {
  components: {
    MyCkeditor,
  },
};
</script>


Теперь у вас есть редактируемый виджет CKEditor 5 внутри вашего компонента Vue. Вы можете настроить его и использовать его для редактирования текста прямо в вашем приложении Vue.