网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

教你如何配置百度编辑器ueditor

关注我吧
 2013/11/23 16:09:39 阅读次数:9656

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码。

是一功能强大的编辑器。有很多功能值得赞场的!大家可以去 下载 编辑器。

教你如何配置百度编辑器ueditor

完全版:

1、加载

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>

2、创建容器  有3种创建方法,但是官方推荐的是第2种script标签:

1):

<div id="editor" style="width:800px;"></div>

2):

<div style="width:800px;margin:20px auto 40px;">
<script type="text/plain" id="editor" style="width:100%;height:500px;"></script>
</div>

3):

<textarea name="后台取值的key" id="editor">这里写你的初始化内容</textarea>

3、载入编辑器

var editor = new baidu.editor.ui.Editor();
editor.render('editor');  //editor为编辑器容器的id

或者:

var ue = UE.getEditor('editor',{
        toolbars:[    ['insertimage','attachment','pasteplain','FontSize','link','unlink']
         ],
          wordCount:true, //开启字数统计
          elementPathEnabled : false,//是否启用元素路径,默认是显示
          maximumWords:10000,       //允许的最大字符数
          initialContent:'欢迎使用ueditor!',    //初始化编辑器的内容,也可以通过textarea/script给值,看官网例子
          autoClearinitialContent:true, //是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为真,那么编辑器一上来就会触发导致初始化的内容看不到了
          pasteplain:true,  //是否默认为纯文本粘贴。false为不使用纯文本粘贴,true为使用纯文本粘贴
     });

迷你版:

1、加载

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

2、创建容器

<div style="width:800px;margin:20px auto 40px;">
<script type="text/plain" id="editor" style="width:100%;height:500px;"></script>
</div>

3、载入编辑器

<script type="text/javascript" charset="utf-8">
        var um = UM.getEditor('editor');
</script>

基本使用方法就介绍到这!(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

0
无觅相关文章插件,快速提升流量
阅读全文内容关闭