【简介】 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
|
收藏
淘帖
踩
