Zbuxu

插件下载地址: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,

//autoHeightEnabled: false,//设置滚动条
//enableAutoSave: false,//不显示默认的“本地保存成功”的提示

//});

</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;
}

分类:

技术点:

相关文章: