您现在的位置是：首页 >其他 >vue3 集成kindeditor研究网站首页其他

vue3 集成kindeditor研究

独孤刺客 2024-06-26 14:24:01
简介vue3 集成kindeditor研究

        kindeditor虽然老，但是稳定，最大的好外是word贴进去不变形，后端部分有安全隐患，我给去掉了，只保留了前端，集成jquery添加了跨域ajax上传功能。

        用iframe引用实属无奈，因为尝试了好多次用ts封装都没有成功，网络上的插件在vue3+vite+ts环境下都不能正常工作，所以拐了这么个弯，以后研究好了再发资源。

        资源下载链接：https://download.csdn.net/download/dugucike/87823978。

效果图：

研究内容如下：

下载：

关于 - KindEditor - 在线HTML编辑器

安装：

去官网下载后放工程文件夹下，/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;">

        &lt;strong&gt;HTML内容&lt;/strong&gt;

        </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，修改图标及样式：

图标文件：publickindeditor hemesdefaultdefault.png,在这个图片上加图标，大小16*16

样式文件：publickindeditor hemesdefaultdefault.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); //文件标题文本框

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐