wangeditor是个轻量级web富文本编辑器,而且对我个人而言wangeditor的界面相比ueditor好看简洁一些
创建编辑器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>写博客</title>
@include('user.init')
{{--导入js包--}}
<script src="{{asset('wangEditor-3.1.1/release/wangEditor.js')}}"></script>
<link rel="stylesheet" href="{{asset('wangEditor-3.1.1/release/wangEditor.css')}}">
</head>
<body>
<div class="editor">
<div id="toolbar" class="toolbar">
</div>
<div id="text" class="text">
</div>
</div>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#toolbar', '#text'); // 两个参数也可以传入 elem 对象,class 选择器
//#toolbar菜单栏 #text文本编辑区域
editor.create();//创建
</script>
</body>
</html>
基本操作和配置
内容的获取
用html和text的方式读取编辑器的内容
插入链接的验证
editor.customConfig.linkCheck = function (text, link) {
console.log(text); // 插入的文字
console.log(link); // 插入的链接
/*
校验代码
*/
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串,即校验失败的提示信息
};
插入网络图片的校验
editor.customConfig.linkImgCheck = function (src) {
console.log(src) // 图片的链接
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串,即校验失败的提示信息
}
插入网络图片的回调
editor.customConfig.linkImgCallback = function (url) {
console.log(url) // url 即插入图片的地址
}
富文本编辑器的其他事件
//用户点击富文本区域会触发onfocus函数执行。
editor.customConfig.onfocus = function () {
};
//函数之后,如果当前有手动获取焦点的富文本并且鼠标点击富文本以外的区域,则会触发onblur函数执行。
editor.customConfig.onblur = function (html) {
// html 即编辑器中的内容
};
//配置onchange函数之后,用户操作(鼠标点击、键盘打字等)导致的内容变化之后,会自动触发onchange函数执行。
editor.customConfig.onchange = function (html) {
};
富文本编辑器内容改变延时设置
editor.customConfig.onchangeTimeout = 200; // 单位 ms
//设置编辑器在改变后的几秒触发onchange事件
//应用场景:用户在改变内容之后的一段时间内未进行操作,将当前编辑器中的内容保存为草稿
//到本地或者服务器,一定程度防止用户正在编辑的内容丢失
以上提一下比较常用的事件设置,在文档中都有说明,还有更多配置信息请移步博文开始的文档进行查阅
wangEditor上传图片
默认情况下编辑器不会有"上传图片"的tab,在配置上传图片的信息后会自动显示。(切记不要同时使用)
//使用base64保存图片
// editor.customConfig.uploadImgShowBase64 = true;
//上传至服务器
editor.customConfig.uploadImgServer = "{{url('upload')}}";//图片上传的服务端接口
如果你只想要上传图片的tab不要网络图片这个选项时,你可以进行一下配置进行关闭
// 隐藏"网络图片"tab
editor.customConfig.showLinkImg = false
图片上传至服务器
自定义 fileName,以便后台通过name获取到file ( 相当于input 中的name在后台的作用 )
editor.customConfig.uploadFileName = 'source'
限制一次最多上传几张图片 (当然如果设置多张涉及多图上传操作,自行百度【因为我自己偷懒只弄了单图上传】)
editor.customConfig.uploadImgMaxLength = 1;
自定义上传参数 (可以夹带有需求的参数,比如laravel的csrf保护机制要设置token才能保证正确上传)
editor.customConfig.uploadImgParams = {
// 如果版本 <=v3.1.0 ,属性值会自动进行 encode ,此处无需 encode
// 如果版本 >=v3.1.1 ,属性值不会自动 encode ,如有需要自己手动 encode
//由于laravel csrf保护机制,设置_token令牌
_token: "{{ csrf_token() }}",
};
监听函数
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function (xhr, editor, result) {
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url = result.url
insertImg(url)
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
}
laravel图片上传接口
public function uploadImg(Request $request)
{
if($request->isMethod('POST')){
//var_dump($_FILES);
$file = $request->file('source');
//文件是否上传成功
$rel = [];
if($file->isValid()){
//原文件名
$originlName = $file->getClientOriginalName();
//扩展名
$ext = $file->getClientOriginalExtension();
//MimeType
$type = $file->getClientMimeType();
//临时绝对路径
$realPath = $file->getRealPath();
$filename = date('Y-m-d-H-i-s').'-'.uniqid().'.'.$ext;
$bool = Storage::disk('upload')->put($filename,file_get_contents($realPath));
$Path = asset('img/public')."/".$filename;
$rel = [
"error"=>0,
"url"=>$Path
];
}
//
return json_encode($rel);
}
return view('form');
}
config/filesystem.php配置信息
'upload' => [
'driver' => 'local',
'root' => public_path('img/public')
],
来源:https://blog.csdn.net/qq_37562908/article/details/100887545