首页 > 代码库 > 使用百度富文本编辑器
使用百度富文本编辑器
插件下载地址:http://ueditor.baidu.com/website/download.html
具体引用:
把下载的文件完全的额引入到你的项目中,然后编辑页面内容:
<!--加载编辑器的容器-->
<script id="container" style="height: 700px" type="text/plain">
初始化内容
</script>
<!--配置文件-->
<script type="text/javascript" src="http://www.mamicode.com/UEditor/utf8-net/ueditor.config.js" charset="utf-8"></script>
<!--编辑器源码文件-->
<script type="text/javascript" src="http://www.mamicode.com/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;
}
使用百度富文本编辑器