使用百度富文本编辑器

Posted 2020-09-12 Zbu

插件下载地址：http://ueditor.baidu.com/website/download.html

具体引用：

把下载的文件完全的额引入到你的项目中，然后编辑页面内容：

<!--加载编辑器的容器-->
<script id="container" style="height: 700px" type="text/plain">
           初始化内容
</script>
<!--配置文件-->
<script type="text/javascript" src="../UEditor/utf8-net/ueditor.config.js" charset="utf-8"></script>
<!--编辑器源码文件-->
<script type="text/javascript" src="../UEditor/utf8-net/ueditor.all.min.js" charset="utf-8"></script>
<!--实例化编辑器-->
<script type="text/javascript">

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

//var ue = UE.getEditor(‘container‘, {
// toolbars: [
// [
// ‘undo‘,//撤销
// ‘bold‘,//粗体
// ‘italic‘,//斜体
// ‘underline‘,//下划线
// ‘strikethrough‘,//删除线
// ‘formatmatch‘,//格式刷
// ‘selectall‘,//全选
// ‘print‘,//打印
// ‘link‘,//超链接
// ‘unlink‘,//取消链接
// ‘fontfamily‘,//字体
// ‘fontsize‘,//字号
// ‘simpleupload‘,//单图上传
// ‘insertimage‘,//多图上传
// ‘help‘,//帮助
// ‘justifyleft‘,//居左对齐
// ‘justifyright‘,//居右对齐
// ‘justifycenter‘,//居中对齐
// ‘justifyjustify‘,//两端对齐
// ‘forecolor‘,//字体颜色
// ‘backcolor‘,//背景色
// ‘touppercase‘,//字母大写
// ‘tolowercase‘,//字母小写
// ]
// ],
// initialFrameHeight: 320,
//});

</script>

如此便可以再页面上显示一个富文本编辑器，注释掉的部分是我简化的一个富文本编辑器。

详细内容:http://ueditor.baidu.com/website/onlinedemo.html

 

遇到的一些问题：

1.获取富文本编辑框的内容

var content = UE.getEditor(‘container‘).getPlainTxt();

2.编辑器内容过长不能自动换行

pre {
white-space:pre-wrap;
word-wrap:break-word;
}