时间戳

首页 > 解决方案 > Vue.js 2 + ckeditor5 与提及插件

vuejs2 - Vue.js 2 + ckeditor5 与提及插件

问题描述

所有作品，除了提及

主 vue.js 应用程序代码片段

<ckeditor :editor="editor" v-model="innerValue" :config="editorConfig"></ckeditor>
...
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from 'ckeditor5-custom-build';
...
data: () => {
    return {
        innerValue: null,
        editor: ClassicEditor,
        editorConfig: {
            toolbar: ['bold', 'italic', '|', 'NumberedList', 'BulletedList', '|', 'undo'],
            mention: {
                feeds: [
                    {
                        marker: '@',
                        feed: ['@Barney', '@Lily', '@Marshall', '@Robin', '@Ted'],
                        minimumCharacters: 1
                    }
                ]
            }
        },
    }
},

主要应用依赖

...
  "@ckeditor/ckeditor5-vue": "^1.0.3",
  "ckeditor5-custom-build": "0.0.6",
...

ckeditor5-custom-build package.json 代码片段

  "name": "ckeditor5-custom-build",
  "author": "CKSource",
  "description": "A custom CKEditor 5 build made by the CKEditor 5 online builder.",
  "version": "0.0.6",
  "main": "./build/ckeditor.js",
  "license": "SEE LICENSE IN LICENSE.md",
  "devDependencies": {
    ...
    "@ckeditor/ckeditor5-mention": "^16.0.0",
    ...

官方指南https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html

标签： vuejs2ckeditor5

解决方案

推荐阅读