文章介绍了如何在Vue3+Vite+TS项目中使用KindEditor作为HTML编辑器，尽管遇到兼容性问题，作者通过iframe解决了这个问题，并添加了跨域Ajax上传功能。还分享了编辑器的配置和使用方法，包括添加jQuery支持、自定义插件以及如何与Vue组件交互。
kindeditor虽然老，但是稳定，最大的好外是word贴进去不变形，后端部分有安全隐患，我给去掉了，只保留了前端，集成jquery添加了跨域ajax上传功能。
用iframe引用实属无奈，因为尝试了好多次用ts封装都没有成功，网络上的插件在vue3+vite+ts环境下都不能正常工作，所以拐了这么个弯，以后研究好了再发资源。
资源下载链接：https://download.csdn.net/download/dugucike/87823978。
效果图：
研究内容如下：
下载：
安装：
去官网下载后放工程文件夹下，/public/kindeditor
编辑器主页：
/public/kindeditor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea id="editor_id" name="content" style="width:100%;height:300px;">
<strong>HTML内容</strong>
</textarea>
</body>
</html>
//引用jQuery
<script charset="utf-8" src="/kindeditor/lib/jquery-3.6.4.min.js"></script>
<script charset="utf-8" src="/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
//域名
domainJson: 'http://localhost:5169',
//后端上传接口
uploadJson: 'http://localhost:5169/api/V1/FileOperator/UploadSingleFile',
//大文件上传接口
bigFileUploadJson: 'http://localhost:5169/api/V1/BigFileUploader/FileUploader',
}
);
});
//取编辑器
function getEditor() {
return window.editor;
}
</script>
引用：
<template>
<iframe ref="refEditorFrame" width="100%" height="600" src="/kindeditor.html" frameborder="0"></iframe>
</template>
*.vue取值赋值：
/components/KindEditorTest.vue
<template>
<button @click="showIframeDoc">取内容</button>
<button @click="setIframeDoc">设置内容</button>
<iframe ref="refEditorFrame" width="100%" height="600" src="/kindeditor.html" frameborder="0"></iframe>
<div id="bodyContainer" ref="contentShower" style="display: none;"></div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const refEditorFrame = ref()
const contentShower = ref<HTMLElement>();
//引用编辑器
function getEditor() {
return refEditorFrame.value.contentWindow.getEditor();
}
//取编辑器内容
const showIframeDoc = () => {
let editor = getEditor();
console.info("refEditorFrame:", editor.html());
}
//设置编辑器内容
const setIframeDoc = () => {
let editor = getEditor();
editor.html("<b>内容设置</b>");
}
</script>
经验总结：
1，编辑器添加标签白名单：否则在切换源码模式和设计模式时会被清理掉
video: ['src', 'type', 'width', 'height', 'autostart', 'loop', 'controls', 'preload', 'muted'],
2，修改图标及样式：
图标文件：\public\kindeditor\themes\default\default.png,在这个图片上加图标，大小16*16
样式文件：\public\kindeditor\themes\default\default.css
.ke-icon-wpsword {
background-position: 0px -1248px;
width: 16px;
height: 16px;
}
*wpsword部分需要和命令同名
3，新增插件：
*3.1。可以在kindeditor-all.js 里面KE.plugin开头的部分的工一个类似的界面，复制并改名，然后从里面，改内容，比较快，这样就制作了一个插件，比较叫hello，全部为小写字母组合*
例如：
KE.plugin['hello'] = {
click : function(id) {
alert("您好");
}
};
3.2，定义鼠标经过按钮文字
KE.lang['hello'] = "您好";
3.3，定义样式，样式定义如上面的default.css,按照官网给的样例不能正常显示。
3.4，添加按钮：
KE.show({
id : 'content1',
items : ['hello']
});
5，集成jQuery.js：
5.1将jQuery.js放到/public/kindeditor/lib目录下
5.2在/public/kindeditor.html里面引用
<script charset="utf-8" src="/kindeditor/lib/jquery-3.6.4.min.js"></script>
5.3 jquery文件上传样例：
uploadbutton.fileBox.change(function (e) {
dialog.showLoading(self.lang('ajaxLoading'));
//调用ajax上传
var fd = new FormData()
fd.append('avatar', e.target.files[0])
$.ajax({
method: 'POST',
url: uploadJson,
data: fd,
crossDomain: true,
processData: false,
contentType: false,
success: function (res) {
urlBox.val(domainJson + res.messageInfoExt);
titleBox.val(e.target.files[0].name);
dialog.hideLoading();
},
error: function () {
dialog.hideLoading();
}
});
});
6，关于编辑器的一点儿小研究：
1，启动和关闭loading
dialog.showLoading(self.lang('ajaxLoading'));
dialog.hideLoading();
2,执行命令后关闭窗口：
self.exec('insertimage', url, title, width, height, 0, align).hideDialog().focus();
3,self指编辑器
4， K.undef(self.formatUploadUrl, true), 取初始化时配置变量formatUploadUrl值
5,弹出自定义内容：
alert(self.lang('pleaseSelectFile'));
6,取控件：
var urlBox = K('[name="url"]', div), //文件路径文本框
titleBox = K('[name="title"]', div); //文件标题文本框
扫一扫
1013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
