如何在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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
详解Vue的mixin策略
Nov 19 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
解读Vue组件注册方式
May 15 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 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
无限级别菜单的实现
2006/10/09 PHP
用 PHP5 轻松解析 XML
2006/12/04 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
Nodejs libuv运行原理详解
2019/08/21 NodeJs
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
Python求算数平方根和约数的方法汇总
2016/03/09 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
性能服装:HYLETE
2018/08/14 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
护理专业自荐书
2014/06/04 职场文书
营销学习心得体会
2014/09/12 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
原告离婚代理词
2015/05/23 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
远程教育培训心得体会
2016/01/09 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers