标题:使用wangEditor3进行富文本编辑 | 作者: catfish | 时间:2020年01月11日
暂无法显示图片

官方链接:https://www.kancloud.cn/wangfupeng/wangeditor3/332599

快速使用

第一步:下载官方文件:https://github.com/wangfupeng1988/wangEditor/releases

第二步:在该文件目录下创建demo.html文件

第三步:在demo.html文件中写入:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>     <!--相当于textarea里面的value-->
    </div>

    <!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
    <script type="text/javascript" src="release/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
                                         // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>

获取表单里面的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
<div id="div1">
    <p>欢迎使用 wangEditor 编辑器</p>
</div>
<button id="btn1">获取html</button>
<button id="btn2">获取text</button>

<script type="text/javascript" src="release/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.create()

    document.getElementById('btn1').onclick = function()
    {
        alert(editor.txt.html())
    }
    document.getElementById('btn2').onclick = function()
    {
        alert(editor.txt.text())
    }

</script>

</body>
</html>

配置菜单

<div id="div1">
    <p>欢迎使用 wangEditor 富文本编辑器</p>
</div>

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')

    // 自定义菜单配置
    editor.customConfig.menus = [
        'head',
        'bold',
        'italic',
        'underline'
    ]
    editor.create()
</script>

全部配置如下:

[
    'head',    // 标题
    'bold',              // 粗体
    'fontSize',  // 字号
    'fontName',          // 字体
    'italic',   // 斜体
    'underline',         // 下划线
    'strikeThrough',               // 删除线
    'foreColor',     // 文字颜色
    'backColor',                 // 背景颜色
    'link',       // 插入链接
    'list',                   // 列表
    'justify',   // 对齐方式
    'quote',                 // 引用
    'emoticon',  // 表情
    'image',             // 插入图片
    'table',    // 表格
    'video',             // 插入视频
    'code',  // 插入代码
    'undo',              // 撤销
    'redo'  // 重复
]

 

我要评论

没有登录?请先登录后再评论

最新评论

暂无人评论,来抢个沙发吧!