wangEditor的使用

2024-04-02 08:49:34

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')
        ],

码农公寓

创建编辑器

基本操作和配置

wangEditor上传图片

图片上传至服务器

相关文章