如何在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 22 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 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
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
jquery $.ajax入门应用一
2008/11/19 Javascript
JavaScript 基础问答三
2008/12/03 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
深入理解Node module模块
2018/03/26 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python 为什么说eval要慎用
2019/03/26 Python
python 字典访问的三种方法小结
2019/12/05 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
运动会广播稿50字
2014/01/26 职场文书
《三峡》教学反思
2014/03/01 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
五年级学生评语
2014/04/22 职场文书
新闻传播专业求职信
2014/07/22 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL