如何在vue中使用kindeditor富文本编辑器


Posted in Vue.js onDecember 19, 2020

第一步,下载依赖

yarn add kindeditor

第二步,建立kindeditor.vue组件

<template>
 <div class="kindeditor">
 <textarea :id="id" name="content" v-model="outContent"></textarea>
 </div>
</template>

<script>
import '../../node_modules/kindeditor/kindeditor-all.js'
import '../../node_modules/kindeditor/lang/zh-CN.js'
import '../../node_modules/kindeditor/themes/default/default.css'

export default {
 name: 'kindeditor',
 data () {
 return {
  editor: null,
  outContent: this.content
 }
 },
 props: {
 content: {
  type: String,
  default: ''
 },
 id: {
  type: String,
  required: true
 },
 width: {
  type: String
 },
 height: {
  type: String
 },
 minWidth: {
  type: Number,
  default: 650
 },
 minHeight: {
  type: Number,
  default: 100
 },
 items: {
  type: Array,
  default: function () {
  return [
   'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
   'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
   'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
   'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
   'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
   'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
   'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
   'anchor', 'link', 'unlink', '|', 'about'
  ]
  }
 },
 noDisableItems: {
  type: Array,
  default: function () {
  return ['source', 'fullscreen']
  }
 },
 filterMode: {
  type: Boolean,
  default: true
 },
 htmlTags: {
  type: Object,
  default: function () {
  return {
   font: ['color', 'size', 'face', '.background-color'],
   span: ['style'],
   div: ['class', 'align', 'style'],
   table: ['class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'style'],
   'td,th': ['class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor', 'style'],
   a: ['class', 'href', 'target', 'name', 'style'],
   embed: ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality',
   'style', 'align', 'allowscriptaccess', '/'],
   img: ['src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style', '/'],
   hr: ['class', '/'],
   br: ['/'],
   'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6': ['align', 'style'],
   'tbody,tr,strong,b,sub,sup,em,i,u,strike': []
  }
  }
 },
 wellFormatMode: {
  type: Boolean,
  default: true
 },
 resizeType: {
  type: Number,
  default: 2
 },
 themeType: {
  type: String,
  default: 'default'
 },
 langType: {
  type: String,
  default: 'zh-CN'
 },
 designMode: {
  type: Boolean,
  default: true
 },
 fullscreenMode: {
  type: Boolean,
  default: false
 },
 basePath: {
  type: String
 },
 themesPath: {
  type: String
 },
 pluginsPath: {
  type: String,
  default: ''
 },
 langPath: {
  type: String
 },
 minChangeSize: {
  type: Number,
  default: 5
 },
 loadStyleMode: {
  type: Boolean,
  default: true
 },
 urlType: {
  type: String,
  default: ''
 },
 newlineTag: {
  type: String,
  default: 'p'
 },
 pasteType: {
  type: Number,
  default: 2
 },
 dialogAlignType: {
  type: String,
  default: 'page'
 },
 shadowMode: {
  type: Boolean,
  default: true
 },
 zIndex: {
  type: Number,
  default: 811213
 },
 useContextmenu: {
  type: Boolean,
  default: true
 },
 syncType: {
  type: String,
  default: 'form'
 },
 indentChar: {
  type: String,
  default: '\t'
 },
 cssPath: {
  type: [ String, Array ]
 },
 cssData: {
  type: String
 },
 bodyClass: {
  type: String,
  default: 'ke-content'
 },
 colorTable: {
  type: Array
 },
 afterCreate: {
  type: Function
 },
 afterChange: {
  type: Function
 },
 afterTab: {
  type: Function
 },
 afterFocus: {
  type: Function
 },
 afterBlur: {
  type: Function
 },
 afterUpload: {
  type: Function
 },
 uploadJson: {
  type: String
 },
 fileManagerJson: {
  type: Function
 },
 allowPreviewEmoticons: {
  type: Boolean,
  default: true
 },
 allowImageUpload: {
  type: Boolean,
  default: true
 },
 allowFlashUpload: {
  type: Boolean,
  default: true
 },
 allowMediaUpload: {
  type: Boolean,
  default: true
 },
 allowFileUpload: {
  type: Boolean,
  default: true
 },
 allowFileManager: {
  type: Boolean,
  default: false
 },
 fontSizeTable: {
  type: Array,
  default: function () {
  return ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
  }
 },
 imageTabIndex: {
  type: Number,
  default: 0
 },
 formatUploadUrl: {
  type: Boolean,
  default: true
 },
 fullscreenShortcut: {
  type: Boolean,
  default: false
 },
 extraFileUploadParams: {
  type: Array,
  default: function () {
  return []
  }
 },
 filePostName: {
  type: String,
  default: 'imgFile'
 },
 fillDescAfterUploadImage: {
  type: Boolean,
  default: false
 },
 afterSelectFile: {
  type: Function
 },
 pagebreakHtml: {
  type: String,
  default: '<hr style=”page-break-after: always;” class=”ke-pagebreak” />'
 },
 allowImageRemote: {
  type: Boolean,
  default: true
 },
 autoHeightMode: {
  type: Boolean,
  default: false
 },
 fixToolBar: {
  type: Boolean,
  default: false
 },
 tabIndex: {
  type: Number
 }
 },
 watch: {
 content (val) {
  this.editor && val !== this.outContent && this.editor.html(val)
 },
 outContent (val) {
  this.$emit('update:content', val)
  this.$emit('on-content-change', val)
 }
 },
 mounted () {
 var _this = this
 _this.editor = window.KindEditor.create('#' + this.id, {
  width: _this.width,
  height: _this.height,
  minWidth: _this.minWidth,
  minHeight: _this.minHeight,
  items: _this.items,
  noDisableItems: _this.noDisableItems,
  filterMode: _this.filterMode,
  htmlTags: _this.htmlTags,
  wellFormatMode: _this.wellFormatMode,
  resizeType: _this.resizeType,
  themeType: _this.themeType,
  langType: _this.langType,
  designMode: _this.designMode,
  fullscreenMode: _this.fullscreenMode,
  basePath: _this.basePath,
  themesPath: _this.cssPath,
  pluginsPath: _this.pluginsPath,
  langPath: _this.langPath,
  minChangeSize: _this.minChangeSize,
  loadStyleMode: _this.loadStyleMode,
  urlType: _this.urlType,
  newlineTag: _this.newlineTag,
  pasteType: _this.pasteType,
  dialogAlignType: _this.dialogAlignType,
  shadowMode: _this.shadowMode,
  zIndex: _this.zIndex,
  useContextmenu: _this.useContextmenu,
  syncType: _this.syncType,
  indentChar: _this.indentChar,
  cssPath: _this.cssPath,
  cssData: _this.cssData,
  bodyClass: _this.bodyClass,
  colorTable: _this.colorTable,
  afterCreate: _this.afterCreate,
  afterChange: function () {
  _this.afterChange
  _this.outContent = this.html()
  },
  afterTab: _this.afterTab,
  afterFocus: _this.afterFocus,
  afterBlur: _this.afterBlur,
  afterUpload: _this.afterUpload,
  uploadJson: _this.uploadJson,
  fileManagerJson: _this.fileManagerJson,
  allowPreviewEmoticons: _this.allowPreviewEmoticons,
  allowImageUpload: _this.allowImageUpload,
  allowFlashUpload: _this.allowFlashUpload,
  allowMediaUpload: _this.allowMediaUpload,
  allowFileUpload: _this.allowFileUpload,
  allowFileManager: _this.allowFileManager,
  fontSizeTable: _this.fontSizeTable,
  imageTabIndex: _this.imageTabIndex,
  formatUploadUrl: _this.formatUploadUrl,
  fullscreenShortcut: _this.fullscreenShortcut,
  extraFileUploadParams: _this.extraFileUploadParams,
  filePostName: _this.filePostName,
  fillDescAfterUploadImage: _this.fillDescAfterUploadImage,
  afterSelectFile: _this.afterSelectFile,
  pagebreakHtml: _this.pagebreakHtml,
  allowImageRemote: _this.allowImageRemote,
  autoHeightMode: _this.autoHeightMode,
  fixToolBar: _this.fixToolBar,
  tabIndex: _this.tabIndex
 })
 }
}
</script>

<style>
 
</style>

第三步,引入使用

<template>
 <div id="app">
  <editor id="editor_id" height="500px" width="700px" :content.sync="editorText"
   :afterChange="afterChange()"
   :loadStyleMode="false"
   @on-content-change="onContentChange"></editor>
 <div> editorTextCopy: {{ editorTextCopy }} </div>

 </div>
</template>

<script>
import editor from './components/kindeditor.vue'

export default {
 name: 'app',
 components: {
 editor
 },
 data () {
 return {
  editorText: '直接初始化值', // 双向同步的变量
  editorTextCopy: '' // content-change 事件回掉改变的对象
 }
 },
 methods: {
 onContentChange (val) {
  this.editorTextCopy = val;
  window.console.log(this.editorTextCopy)
 },
 afterChange () {
 }
 }
}
</script>

效果如下:

如何在vue中使用kindeditor富文本编辑器

以上就是vue中使用kindeditor富文本编辑器的详细内容,更多关于vue kindeditor富文本编辑器的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 #Vue.js
vue 通过base64实现图片下载功能
Dec 19 #Vue.js
Vue中computed和watch有哪些区别
Dec 19 #Vue.js
Vue与React的区别和优势对比
Dec 18 #Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 #Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 #Vue.js
vue 数据操作相关总结
Dec 17 #Vue.js
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
php简单静态页生成过程
2008/03/27 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
js分页工具实例
2015/01/28 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
axios学习教程全攻略
2017/03/26 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
python如何重载模块实例解析
2018/01/25 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python小白切忌乱用表达式
2020/05/29 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
几道数据库的概念性面试题
2014/05/30 面试题
2014财产信托协议书范本
2014/11/18 职场文书
校长新学期致辞
2015/07/30 职场文书