Vue 手把手教你使用 kindeditor

第一步：

npm install kindeditor

第二步：创建富文本组件

建立以.vue结尾的单文件

<template><!--参数：content：传进来的数据@kindeditorChange：获取数据的事件 传回一个参数：数据--><div class="kindeditor"><editor:id="id":height="height":width="width":content="content":items="items":resizeType="resizeType"pluginsPath="/static/kindeditor/plugins/":loadStyleMode="false":fullscreenMode="fullscreenMode":afterCreate="afterCreate":uploadJson=" rootDir + '/api/Upload/uploadImg2'"@on-content-change="onContentChange"></editor><!-- :uploadJson=" rootDir + '/api/Upload/uploadImg'" --></div>
</template><script>
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);},}
};
</script><style>
</style>

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

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

第四部：组件中使用

   <kindeditor@kindeditorChange="kindeditorChange":content="ruleForm.article":id="'kin'+ index"/>

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

Vue 手把手教你使用 kindeditor相关推荐

vue手把手教你实现论坛bbs——(二)创建组件
创建页面基本组件:包括Header.PostList.SideBar.Article和UserInfo组件. 1.以创建Header组件为例子,主要步骤: a.编写组件页面基本内容在src/comp ...
vue手把手教你实现论坛bbs——(一)项目骨架
项目下载地址:https://github.com/SD-Gaming/Vue2.0_CNode.bbs 本文复现该项目过程所做的一些记录,选择一个较为简单的项目入手学习vue,正在前端路上摸爬滚打, ...
手把手教你用Vue.js封装Form组件
前言: 在日常使用vue开发WEB项目中,经常会有提交表单的需求.我们可以使用 iview 或者 element 等组件库来完成相关需求:但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节, ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
手把手教你从0开始搭建一个vue项目（完结）
前言上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
???作者:bug菌博客:CSDN.掘金等 ??公众号:猿圈奇妙屋 ??特别声明:原创不易,转载请附上原文出处链接和本文声明,谢谢配合. ??版权声明:文章里可能部分文字或者图片来源于互联网或者百度 ...
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查)
Maynor手把手教你完成一个SpringBoot+Vue+Element实现的SPA商品管理系统(增删改查) 前言完整代码三连后私信我获取~ 撸了一上午完成的SPA商品管理系统,求三连! B站演 ...
add-apt-repository:找不到命令_手把手教你使用nodejs编写cli(命令行)
手把手教你使用nodejs编写cli(命令行) 前端日常开发中,会遇见各种各样的cli,比如一行命令帮你打包的webpack,一行命令帮你生成vue项目模板的vue-cli,还有创建react项目的c ...
websockert后台定时向前端发送状态_（文末送书）手把手教你打造属于自己团队的前端小报系统...
本文首发于政采云前端团队博客:手把手教你打造属于自己团队的前端小报系统 https://www.zoo.team/article/building-a-tabloid-system 前言经常关注我们 ...

Vue 手把手教你使用 kindeditor

Vue 手把手教你使用 kindeditor

Vue 手把手教你使用 kindeditor相关推荐

最新文章

热门文章