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

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

francis_schuster

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

47 | 0

ckeditor5 vue

2 ответа

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

nelle

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

@francis_schuster

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

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

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

1	npm install --save @ckeditor/ckeditor5-vue

Создайте Vue-компонент для CKEditor 5, используя <ckeditor> элемент:

<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>

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

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

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

<template>
  <div>
    <h2>My CKEditor 5 Widget</h2>
    <my-ckeditor />
  </div>
</template>

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

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

1 | 0

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

vladimir

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

@francis_schuster

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

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

1	npm install --save @ckeditor/ckeditor5-vue

Создайте компонент Vue с использованием

<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>

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

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

<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.

0 | 0

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

2 ответа

Похожие обсуждения: