最近写项目需要一手富文本编辑器,在网上找了很多,感觉这还不错。
菜单不适应浏览器宽度
按照文档把编辑器部署成功后,发现编辑器的菜单不适应浏览器的宽度。
/*网上搜了一手资料后 发现 wangeditor 的布局是flex的 需要改一手 css 样式*/
.w-e-toolbar{
flex-wrap:wrap;
}
如上就可以实现编辑器菜单适应浏览器了。
wangeditor 上传图片
var E = window.wangEditor;
var editor = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象,class 选择器 , 这个是将菜单与编辑分开 ,可以看文档
editor.customConfig.pasteIgnoreImg = true; //开启文件上传服务器
editor.customConfig.customUploadImg = function (files, insert) {
var data = new FormData();
data.append("file", files[0]);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' } //laravle Token验证
});
$.ajax({
type: "POST",
url: "{{route('UploadImg')}}", //laravel 文件上传的流程见上一篇文章
data: data,
dataType: 'json',
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
insert(data.path);// insert 是获取图片 url 后,插入到编辑器的方法
}
})
};
editor.create();