vue中使用kindeditor富文本编辑器2
时间:2019-11-18
本文章向大家介绍vue中使用kindeditor富文本编辑器2,主要包括vue中使用kindeditor富文本编辑器2使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
第一步,下载依赖
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>
效果如下:
原文地址:https://www.cnblogs.com/ldlx-mars/p/11881242.html
- 如何让ASP.NET默认的资源编程方式支持非.ResX资源存储
- 在VS中通过建立依赖关系使文件结构更清晰
- 一个关于ConfigurationManager.GetSecion方法的小问题
- 追踪记录每笔业务操作数据改变的利器——SQLCDC
- 一个完整的用于追踪数据改变的解决方案
- C# 4.0新特性-"协变"与"逆变"以及背后的编程思想
- 通过内存分析工具来证明字符串驻留机制
- 如果在BackgroundWorker运行过程中关闭窗体…
- 从数据到代码——基于T4的代码生成方式
- 解决T4模板的程序集引用的五种方案
- 编写T4模板进行代码生成无法避免的两个话题:"Assembly Locking"&"Debug"
- 从yield关键字看IEnumerable和Collection的区别
- 让“链式调用(方法链)”更加自然一点
- ASP.NET应用下基于SessionState的“状态编程框架”解决方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux Lab v0.5 正式发布,功能强大,用法简单
- Kafka核心API——AdminClient API
- PyQt5 技术篇-调用颜色对话框(QColorDialog)获取颜色,调色板的调用。
- Kafka的安装与配置
- PyQt5 技术篇-如何彻底删除控件?布局移除控件方法。
- PyQt5 技术篇-设置滚动条拉动位置,scrollArea滚动条位置设置方法。
- CentOS8更换yum源后出现同步仓库缓存失败的问题
- log4j配置方式
- 基于MHA搭建MySQL Replication集群高可用架构
- PyQt5 技巧篇-解决相对路径无法加载图片问题,styleSheet通过"相对"路径加载图片,python获取当前运行文件的绝对路径。
- 基于MMM搭建MySQL Replication集群高可用架构
- Python 技术篇-按任意格式灵活获取日期、时间、年月日、时分秒。日期格式化。
- 当删库时如何避免跑路
- Python 句法错误:"SyntaxError: invalid character in identifier",原因及解决方法
- Python3 多线程问题:ModuleNotFoundError: No module named 'thread',原因及解决办法。