CKEditor5 for Vue3 , (用 CKEditor5 Online builder 构建)

注意

1. 使用工具CKEditor5 Online builder tool 构建的;

2. 基于 ckeditor5 v36.0.1 构建的 Classic 版本;

3. 依赖 @ckeditor/ckeditor5-vue 版本^4.0.1 (更高版未测试):

   `@ckeditor/ckeditor5-vue": "^4.0.1`

4. 基本上包括了所有免费的插件,包括下面的插件:

   Alignment、Autoformat、Auto image、Autolink、Autosave、Block quote、Bold、
   CKFinder upload adapte、Code、Code blocks、Data filter、Find and replace、
   Font background color、Font color、Font family、Font size、General HTML Support、
   Heading、Horizontal line、HTML comment、Image、Image insert、Image resize、
   Image style、Image toolbar、Image upload、Indent、Italic、Link、List、Markdown、
   Media embed、Mention、Paste from Office、Remove format、Source editing、
   Special characters、Strikethrough、Style、Subscript、Superscript、Table、
   Table caption、Table cell properties、Table column resize、Table properties、
   Table toolbar、Title、To-do list、Underline、Word count

   Watchdog 插件虽然也是免费的, 但是构建后会报错, 所以未加入

使用方法

1. 安装官方 ckeditor5-vue

   npm install --save @ckeditor/ckeditor5-vue

2. 安装 mbz-ckeditor5-custom

   npm install --save mbz-ckeditor5-custom

3. 使用示例

   <template>
     <div class="main">
       <ckeditor
         ref="editorRef"
         v-model="editorDesign"
         :editor="editor"
         :config="editorConfig"
         :disabled="disabled"
         @ready="onEditorReady"
         @focus="onEditorFocus"
         @blur="onEditorBlur"
         @input="onEditorInput"
         @destroy="onEditorDestroy"></ckeditor>
     </div>
   </template>
   <script setup>
       import { ref, onMounted, reactive } from 'vue'
       import CKEditor from '@ckeditor/ckeditor5-vue'
       import ClassicEditor from 'mbz-ckeditor5-custom'
       import 'mbz-ckeditor5-custom/build/translations/zh.js' //引入中文包
       
       const props = defineProps({
         disabled: {
           type: Boolean,
           default: false, //是否禁用
         },
       })
   
       const editorDesign = ref('') //默认内容
       const ckeditor = CKEditor.component
       const editor = ClassicEditor
       
       const removePlugins = ['Title', 'Style' /*自定义样式(具体见官方文档)*/, 'Markdown' /*默认markdown格式*/]
   
       const editorConfig = reactive({
         language: 'zh-cn',
         removePlugins: removePlugins, //移除不需要的插件
         toolbar: {
           items: [
             'removeFormat',
             'heading',
             '|',
             'bold',
             'italic',
             'strikethrough',
             'underline',
             'alignment',
             '|',
             'fontBackgroundColor',
             'fontColor',
             'fontFamily',
             'fontSize',
             '|',
             'code',
             'codeBlock',
             '|',
             'link',
             'imageInsert',
             'blockQuote',
             'insertTable',
             'mediaEmbed',
             'bulletedList',
             'numberedList',
             'horizontalLine',
             'todoList',
             '|',
             'outdent',
             'indent',
             'specialCharacters',
             'subscript',
             'superscript',
             '|',
             'findAndReplace',
             'sourceEditing',
             //'imageUpload', //使用 imageInsert即可
             // 'undo',
             // 'redo',
             // 'style',
           ],
         },
         heading: {
           options: [
             { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
             { model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
             { model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
             { model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' },
             { model: 'heading4', view: 'h5', title: 'Heading 4', class: 'ck-heading_heading4' },
             { model: 'heading5', view: 'h6', title: 'Heading 5', class: 'ck-heading_heading5' },
           ],
         },
         fontSize: {
           options: [12, 13, 14, 'default', 15, 16, 19, 22, 24, 29],
         },
         image: {
           toolbar: ['imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'],
         },
         table: {
           contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties'],
         },
         ckfinder: {
           uploadUrl: `/uploadfile`, // 上传图片接口
           options: {
             resourceType: 'Images',
           },
         },
       })
   
       const emit = defineEmits(['ready', 'focus', 'blur', 'input', 'destroy'])
   
       const editorRef = ref(null)
       const onEditorReady = () => {
         console.log('准备好了')
         emit('ready')
       }
   
       const onEditorFocus = () => {
         console.log('聚焦')
         emit('focus')
       }
       const onEditorBlur = () => {
         console.log('失去焦点')
         emit('blur')
       }
   
       const onEditorInput = () => {
         console.log('正在录入')
         emit('input')
       }
   
       const onEditorDestroy = () => {
         console.log('销毁')
         emit('destroy')
       }
   </script>