java富文本编辑器wangEditor-3.1.1的使用流程

最新推荐文章于 2022-06-02 10:50:02 发布

飞奔的屎壳郎

最新推荐文章于 2022-06-02 10:50:02 发布

阅读量845

点赞数

分类专栏：太原历练文章标签：富文本 wangEditor

本文链接：https://blog.csdn.net/qq_35349982/article/details/103288508

版权

太原历练专栏收录该内容

38 篇文章 0 订阅

订阅专栏

wangEditor-3.1.1官方: http://www.wangeditor.com/
使用文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
特别简单：只需要引入js就可以了(wangEditor.min.js)官网有
这个是界面，一般功能是够用了
上传图片的返回连接：https://blog.csdn.net/qq_35349982/article/details/103288618
在这里插入图片描述
前台Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上传页面</title>
    <link href="${base}/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="${base}/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

    <div id="div1" class="toolbar">
    </div>
    <div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
        <p></p>
    </div>
    <button id="btn1">获取html</button>
    <button id="btn2">获取text</button>
    
<script src="${base}/js/jquery-3.3.1.min.js"></script>
<script src="${base}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${base}/js/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor1 = new E('#div1', '#div2')  // 两个参数也可以传入 elem 对象，class 选择器

    // 将图片大小限制为 2M
    editor1.customConfig.uploadImgMaxSize = 2 * 1024 * 1024
    // 限制一次最多上传 3 张图片
    editor1.customConfig.uploadImgMaxLength = 1
    // 将 timeout 时间改为 3s
    editor1.customConfig.uploadImgTimeout = 3000
    editor1.customConfig.uploadFileName = 'file'; //设置文件上传的参数名称
    // 配置服务器端地址
    editor1.customConfig.uploadImgServer = '/uploadImg'

    editor1.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
            console.log(xhr)
            console.log(editor)
            console.log(files)
            //如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            // var url = result.url
            // insert(imgUrl)
        },
        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.data[0]
            insertImg(url)

            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    }

    // // 自定义菜单配置
    // editor1.customConfig.menus = [
    //     'head',  // 标题
    //     'bold',  // 粗体
    //     'fontSize',  // 字号
    //     'fontName',  // 字体
    //     'strikeThrough',  // 删除线
    //     'foreColor',  // 文字颜色
    //     'backColor',  // 背景颜色
    //     'link',  // 插入链接
    //     'list',  // 列表
    //     'justify',  // 对齐方式
    //     'emoticon',  // 表情
    //     'image',  // 插入图片
    //     'table',  // 表格
    //     'video',  // 插入视频
    // ],

    editor1.create()

    document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        alert(editor1.txt.html())
    }, false)
    
    document.getElementById('btn2').addEventListener('click', function () {
        // 读取 text
        alert(editor1.txt.text())
    }, false)



</script>
</body>
</html>

飞奔的屎壳郎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java富文本编辑器wangEditor-3.1.1的使用流程

wangEditor-3.1.1官方: http://www.wangeditor.com/使用文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599特别简单：只需要引入js就可以了(wangEditor.min.js)官网有这个是界面，一般功能是够用了前台Html<!DOCTYPE html><html&g...
复制链接

扫一扫