在Vue项目中使用kindEditor编译器

本文主要是介绍在Vue项目中使用kindEditor编译器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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);

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

这篇关于在Vue项目中使用kindEditor编译器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---