Vue 手把手教你使用 kindeditor

2023-07-21 22:18| 来源: 网络整理| 查看: 265

第一步：

npm install kindeditor

第二步：创建富文本组件

建立以.vue结尾的单文件

import Vue from 'vue' import VueKindEditor from 'vue-kindeditor' import 'kindeditor/kindeditor-all-min.js' import 'kindeditor/themes/default/default.css' Vue.use(VueKindEditor); export default { name: "kindeditor", data() { return { items: [ "fontsize", "forecolor", "bold", "italic", "underline", "undo", "redo", "justifyleft", "justifycenter", "justifyright", "justifyfull", "wordpaste", "selectall", "image", "link", "subscript", "superscript", "insertorderedlist", "insertunorderedlist", "fullscreen", ], resizeType:0, random:Math.random(), }; }, props:{ width: { type: String, default: '100%' }, height: { type: String, default: '400px' }, content:{ type: String, }, id:{ type:String, default:'editor_id' }, fullscreenMode:{ type:Boolean, default:false }, afterCreate:Function, isDeletImg:{ type:Boolean, default:false }, }, created(){ if(this.isDeletImg){ this.items = [ "fontsize", "forecolor", "bold", "italic", "underline", "undo", "redo", "justifyleft", "justifycenter", "justifyright", "justifyfull", "wordpaste", "selectall", "link", "subscript", "superscript", "insertorderedlist", "insertunorderedlist", "fullscreen", ] } }, methods: { onContentChange(val) { this.editorText = val; this.$emit("kindeditorChange", this.editorText); }, } };

第三步：注册全局组件（关于如何创建全局自定义组件就不在赘述）

import kindeditor from '@/components/kindeditor.vue； Vue.component('kindeditor',kindeditor);

第四部：组件中使用

如果你感觉有收获，欢迎给我点个 Star 、或者收藏一下，都是对我最大的鼓励，我会更有动力输出有价值的内容。

【本文地址】

公司简介

联系我们