美文网首页
KindEditor使用总结

KindEditor使用总结

作者: wustmz | 来源:发表于2018-09-26 11:15 被阅读0次

    前端部分

    • 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攻击?

    相关文章

      网友评论

          本文标题:KindEditor使用总结

          本文链接:https://www.haomeiwen.com/subject/owjdoftx.html