如何在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 18 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue实现在data里引入相对路径
Jun 05 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介绍篇
2010/10/26 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
JS实现小星星特效
2019/12/24 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
Django中url的反向查询的方法
2018/03/14 Python
python pygame模块编写飞机大战
2018/11/20 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python笔试面试题小结
2019/09/07 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
用Python开发app后端有优势吗
2020/06/29 Python
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
爱的承诺书
2015/01/20 职场文书
Github 使用python对copilot做些简单使用测试
2022/04/14 Python