黑马程序员技术交流社区

标题: 【广州前端】- 富文本编辑器-UEditor配置及使用 [打印本页]

作者: AMay    时间: 2018-6-25 15:24
标题: 【广州前端】- 富文本编辑器-UEditor配置及使用
查看更多精彩前端资源

【简介】
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。
【引入的文件】
[HTML] 纯文本查看 复制代码
<script type="text/javascript" src="ueditor.config.js"></script>

<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
【基本代码结构】
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <!-- 加载编辑器的容器 -->

    <script id="container" name="content" type="text/plain">

        这里写你的初始化内容

    </script>

    <!-- 配置文件 -->

    <script type="text/javascript" src="./ueditor/ueditor.config.js"></script>

    <!-- 编辑器源码文件 -->

    <script type="text/javascript" src="./ueditor/ueditor.all.js"></script>

    <!-- 实例化编辑器 -->

    <script type="text/javascript">

        var ue = UE.getEditor('container');

    </script>

</body>

</html>
上面的代码效果如下:
【定制工具栏图标】
         UEditor工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求
修改配置项的方法:
1. 方法一:修改ueditor.config.js 里面的 toolbars
2. 方法二:实例化编辑器的时候传入 toolbars 参数
下面以方法2来演示
代码:
[JavaScript] 纯文本查看 复制代码
<script type="text/javascript">

        // 简单列表

        var ue = UE.getEditor('container', {

            toolbars: [

                [

                    'fullscreen', // 全屏

                    'source', //源代码

                    'undo', //撤销

                    'redo', //重做

                    'bold' //加粗

                ]

            ],

            autoHeightEnabled: true, // 编辑器编辑区域多写几行字超出设置高度,出现滚动条

            autoFloatEnabled: true //是否保持toolBar的位置不动

        });

    </script>
效果:
多行列表
配置项里用竖线 '|' 代表分割线
[JavaScript] 纯文本查看 复制代码
<script type="text/javascript">

        // 简单列表

        var ue = UE.getEditor('container', {

            toolbars: [

                [

                    'fullscreen', // 全屏

                    'source', //源代码

                    'undo', //撤销

                    'redo', //重做

                    'bold' //加粗

                ],

                ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']

            ],

            autoHeightEnabled: true, // 编辑器编辑区域多写几行字超出设置高度,出现滚动条

            autoFloatEnabled: true //是否保持toolBar的位置不动

        });

</script>
效果
【完整的按钮列表】
[JavaScript] 纯文本查看 复制代码
toolbars: [

    [

        'anchor', //锚点

        'undo', //撤销

        'redo', //重做

        'bold', //加粗

        'indent', //首行缩进

        'snapscreen', //截图

        'italic', //斜体

        'underline', //下划线

        'strikethrough', //删除线

        'subscript', //下标

        'fontborder', //字符边框

        'superscript', //上标

        'formatmatch', //格式刷

        'source', //源代码

        'blockquote', //引用

        'pasteplain', //纯文本粘贴模式

        'selectall', //全选

        'print', //打印

        'preview', //预览

        'horizontal', //分隔线

        'removeformat', //清除格式

        'time', //时间

        'date', //日期

        'unlink', //取消链接

        'insertrow', //前插入行

        'insertcol', //前插入列

        'mergeright', //右合并单元格

        'mergedown', //下合并单元格

        'deleterow', //删除行

        'deletecol', //删除列

        'splittorows', //拆分成行

        'splittocols', //拆分成列

        'splittocells', //完全拆分单元格

        'deletecaption', //删除表格标题

        'inserttitle', //插入标题

        'mergecells', //合并多个单元格

        'deletetable', //删除表格

        'cleardoc', //清空文档

        'insertparagraphbeforetable', //"表格前插入行"

        'insertcode', //代码语言

        'fontfamily', //字体

        'fontsize', //字号

        'paragraph', //段落格式

        'simpleupload', //单图上传

        'insertimage', //多图上传

        'edittable', //表格属性

        'edittd', //单元格属性

        'link', //超链接

        'emotion', //表情

        'spechars', //特殊字符

        'searchreplace', //查询替换

        'map', //Baidu地图

        'gmap', //Google地图

        'insertvideo', //视频

        'help', //帮助

        'justifyleft', //居左对齐

        'justifyright', //居右对齐

        'justifycenter', //居中对齐

        'justifyjustify', //两端对齐

        'forecolor', //字体颜色

        'backcolor', //背景色

        'insertorderedlist', //有序列表

        'insertunorderedlist', //无序列表

        'fullscreen', //全屏

        'directionalityltr', //从左向右输入

        'directionalityrtl', //从右向左输入

        'rowspacingtop', //段前距

        'rowspacingbottom', //段后距

        'pagebreak', //分页

        'insertframe', //插入Iframe

        'imagenone', //默认

        'imageleft', //左浮动

        'imageright', //右浮动

        'attachment', //附件

        'imagecenter', //居中

        'wordimage', //图片转存

        'lineheight', //行间距

        'edittip ', //编辑提示

        'customstyle', //自定义标题

        'autotypeset', //自动排版

        'webapp', //百度应用

        'touppercase', //字母大写

        'tolowercase', //字母小写

        'background', //背景

        'template', //模板

        'scrawl', //涂鸦

        'music', //音乐

        'inserttable', //插入表格

        'drafts', // 从草稿箱加载

        'charts', // 图表

    ]

]
【设置和读取编辑器的内容】
[JavaScript] 纯文本查看 复制代码
通 getContent 和 setContent 方法可以设置和读取编辑器的内容

var ue = UE.getContent();

//对编辑器的操作最好在编辑器ready之后再做

ue.ready(function() {

    //设置编辑器的内容

    ue.setContent('hello');

    //获取html内容,返回: <p>hello</p>

    var html = ue.getContent();

    //获取纯文本内容,返回: hello

    var txt = ue.getContentTxt();

});
【更多api请查看】
http://ueditor.baidu.com/doc/#UE.ajax






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2