在Vue项目使用kindEditor富文本编译器

第一步

npm install 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 '../utils/kindeditor-all.js?v=1'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 () {// lineheight  行距自定了，可全局搜索   ‘自定义行距’ 在/utils/kindeditor-all.js文件裏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)}},created(){},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>

如果需要自定义行距下拉菜单可以直接修改kindeditor-all.js这个。
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/625908.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

cesium加载高层级离线影像地图瓦片（天地图、19级Arcgis）

cesium加载高层级离线影像地图瓦片（天地图、19级Arcgis）

实际加载效果如图&#xff1a; 1、下载离线地图瓦片方式&#xff08;多种任选其一&#xff0c;个人倾向于Qgis工具&#xff09;&#xff1a; 方式1、采用第三方下载工具如&#xff1a;91卫图、水经注、全能电子地图下载器、bigemap等等。&#xff08;这些有的下载层级不够&…
阅读更多...
stable diffusion--小白学习步骤

stable diffusion--小白学习步骤

1.看一下Unet网络的讲解_哔哩哔哩_bilibili&#xff0c;了解Unet网络 2.看一下【生成式AI】Diffusion Model 原理剖析 (1/4)_哔哩哔哩_bilibili&#xff0c;起码要看前3/6个视频 3.看一下超详细的扩散模型&#xff08;Diffusion Models&#xff09;原理代码 - 知乎 (zhihu.co…
阅读更多...
SSH KEY 添加

SSH KEY 添加

mac&#xff1a; Add SSH KEY公钥 1、 先cd进.ssh文件夹&#xff0c;查看电脑中是否存在之前添加的公钥文件(id_rsa.pub、id_rsa)&#xff0c;要是存在&#xff0c;就先删除: jingchengxindeMacBook-Pro:~ jingchengxin$ cd .ssh jingchengxindeMacBook-Pro:.ssh jingchen…
阅读更多...
Java switch使用

Java switch使用

Java switch使用 涉及关键字&#xff1a; switch&#xff1a; 表达式 变量类型可以是&#xff1a; byte、short、int 或者 char。从 Java SE 7 开始&#xff0c;switch 支持字符串 String 类型&#xff0c; case&#xff1a; 分支语句&#xff0c;需要指定当前分支的常量或者字…
阅读更多...
7.C++：多态

7.C++：多态

一、 virtual关键字 //1.可以修饰原函数&#xff0c;为了完成虚函数的重写&#xff0c;满足多态的条件之一&#xff1b; //2.可以在菱形继承中&#xff0c;完成虚继承&#xff0c;解决数据冗余和二义性&#xff1b; 两个地方使用同一关键字&#xff0c;但二者间没有一点关联 二…
阅读更多...
Hadoop大数据处理技术-安装配置篇

Hadoop大数据处理技术-安装配置篇

2024/4/16 ​Hadoop学习前的准备 1&#xff09;首先安装虚拟机 VMWare 虚拟机&#xff1a;因为它不是一个硬件 而是用软件做出来的 模拟真机 所以叫做虚拟机 但实际上它里面也可以安装Linux和Windows 实际它的实现 虚拟机中想要实现某个操作时 将需求发给Windows 调用Windo…
阅读更多...
2024-中药网络药理学-教程(全网最牛逼)

2024-中药网络药理学-教程(全网最牛逼)

中药网络药理学-教程(全网最牛逼) 请您下载资源绑定，就可以看到了，具体的内容了 1. 首先uniprot官网下载数据 1.1. 数据下载 地址：https://www.uniprot.org/ ![外链图片 ge-20240410212513022.png&pos…
阅读更多...
Java实现优先级队列(堆)

Java实现优先级队列(堆)

前言 在学习完二叉树的相关知识后&#xff0c;我们对数据结构有了更多的认识&#xff0c;本文将介绍到优先级队列(堆&#xff09; 1.优先级队列 1.1概念 前面介绍过队列&#xff0c;队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能…
阅读更多...
开源无需root！一款功能强悍的手机电脑同屏工具，14K star拿捏了【文末带项目源码】

开源无需root！一款功能强悍的手机电脑同屏工具，14K star拿捏了【文末带项目源码】

现在使用最常用的设备就是手机和电脑了&#xff0c;经常会需要将手机屏幕镜像到电脑&#xff0c;或者是用电脑来操控手机等。 今天给大家安利一款功能强悍好用的工具 - QtScrcpy。 简介 QtScrcpy 是一个强大的安卓手机实时投屏到电脑的开源项目&#xff0c;可以将你的安卓手机…
阅读更多...
PHP-extract变量覆盖

PHP-extract变量覆盖

[题目信息]&#xff1a; 题目名称题目难度PHP-extract变量覆盖1 [题目考点]&#xff1a; 变量覆盖指的是用我们自定义的参数值替换程序原有的变量值&#xff0c;一般变量覆盖漏洞需要结合程序的其它功能来实现完整的攻击。 经常导致变量覆盖漏洞场景有&#xff1a;$$&#x…
阅读更多...
✌粤嵌—2024/3/29—合并两个有序数组 + 赎金信✌

✌粤嵌—2024/3/29—合并两个有序数组 + 赎金信✌

1. 合并两个有序数组 代码实现&#xff1a; 方法一&#xff1a;将数组num2中的元素添加到数组num1的末尾&#xff0c;再排序 void merge(int *nums1, int nums1Size, int m, int *nums2, int nums2Size, int n) {for (int i 0; i < n; i) {nums1[m] nums2[i];}// 冒泡排序…
阅读更多...
Navicat 干货 | 了解 PostgreSQL 规则

Navicat 干货 | 了解 PostgreSQL 规则

PostgreSQL 是一个强大的开源关系型数据库管理系统&#xff0c;为增强数据管理和操作提供了丰富的功能。这些功能中包含了规则&#xff0c;这是一种用于控制数据库内部查询和命令处理方式的机制。本文将探讨 PostgreSQL 规则的工作原理&#xff0c;以及它们与触发器的区别&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023