KindEditor使用总结

前端部分

• 1.引入相应的库

<script src="${request.contextPath}/statics/plugins/kindeditor/kindeditor-all-min.js"></script>
<script src="${request.contextPath}/statics/plugins/kindeditor/lang/zh-CN.js"></script>
<link rel="stylesheet" href="${request.contextPath}/statics/plugins/kindeditor/themes/default/default.css">

• 2.创建编辑器

let editor;
// 关闭过滤模式，保留所有标签
KindEditor.options.filterMode = false;
KindEditor.ready(function (K) {
    editor = K.create('#editor', {
        width: '700px',
        height: '500px',
        items: ["images"], //自定义插件
        uploadJson: baseURL + 'sys/article/fileUpload', //上传
        dir: "image",
        fileManagerJson: baseURL + 'sys/article/fileManager', //上传图片管理
        allowFileManager: true,
        afterChange: function () { //编辑器内容发生变化后，将编辑器的内容设置到原来的textarea控件里
            this.sync();
            console.log(`改变内容：${vm.article.articleContent}`)
        },
        afterBlur: function () { //编辑器聚焦后，将编辑器的内容设置到原来的textarea控件里
            this.sync();
            console.log(`失去焦点：${vm.article.articleContent}`)
        }
    });
});

• 3.保存时将iframe中的数据同步到原来的textarea组件中去

saveOrUpdate:()=>{
    editor.sync();
}

• 4.获取每条信息时将数据库中的数据写入到编辑框中

getInfo: (articleId) => {
    $.get(baseURL + "sys/article/info/" + articleId, function (r) {
        vm.article = r.article;
        //将数据库的内容显示到编辑框
        editor.html(vm.article.articleContent);
    });
}

后台部分

• 5.富文本上传组件
  
  后台代码
• 6.WebConfig(本地路径和虚拟路径之间建立映射)

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**").addResourceLocations("file:D:/attached/");
    }
}

问题总结

• 问题1：elemnt.style覆盖了原本的css样式
  
  解决方法：提高css样式的应用优先权

width: 700px !important;

• 问题2：富文本如何避免xss攻击？