在Vue项目中使用kindEditor编译器

最新推荐文章于 2025-07-06 12:20:01 发布

skey_wang

最新推荐文章于 2025-07-06 12:20:01 发布

阅读量1.4w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 编译器文章标签： vue kindeditor 编译器

本文链接：https://blog.youkuaiyun.com/skey_wang/article/details/78949314

vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

编译器

1 篇文章

订阅专栏

本文介绍如何在项目中使用KindEditor富文本编辑器，包括配置、按钮功能实现及前后端交互等关键技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

kingEditor官网地址：http://kindeditor.net/demo.php
里面有大量的demo，可根据需求自行选择。
我在项目中选用kindEditor是因为它的体积比较小（2M多）。(Ueditor编译器7M多)
在项目中写入：

html

<textarea id="content2" name="content" style="width:700px;height:350px;visibility:hidden;" onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')">
</textarea>;

js:

function htmlencode(s){
       var div = document.createElement('div');
       div.appendChild(document.createTextNode(s));
       return div.innerHTML;
}
KindEditor.ready(function(K) {
    editor = K.create('#content2', {
           themeType : 'simple',
           afterBlur:function(){
                this.sync();
           }
     });
     //提交按钮
     K('button[name=getHtml]').click(function(e) {
           html_t = editor.html();
           html_k = htmlencode(html_t);
     });
     //清空按钮
     K('button[name=clear]').click(function(e) {
          editor.html('');
          vm_write.cancelSend();
          window.history.go(-1);
     });
});

//在提交编辑器里的内容的时候，需要将html_k转码一下，
html_k = encodeURIComponent(html_k);
axios({
        method:'post',
        url:'/f/api/socialWorkerBridge/add',
        data:{
              type:vm.type,
              title:vm.title,
              content:html_k,
              name:vm.name,
              phone:vm.telphone,
              email:vm.email
          }
     }).then(function(res){
         console.log(res.data);
     }).catch(function (res) {
         console.log(res.data);
     });

在拿到上边所传的html_t的时候，同样需要转码才可以变成我们之前所输入的文字。

vm.content = decodeURIComponent(response.data.content);

以上为个人使用方式，如有错误，望指点。