前端部分
<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">
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();
}
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;
网友评论