Ueditor使用教程（入门级）

UEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富.文本框，类似Ueditro的有ckeditor。今天总结了个人在项目中使用Ueditor的一个步骤,其实很简单。大家只要按照以下步骤就可以完成。

1：配置UEDITOR_HOME_URL路径并且导入包
      

 <script type="text/javascript" charset="utf-8">window.UEDITOR_HOME_URL = "<%=path%>/plugins/ueditor/";</script>
        <script type="text/javascript" charset="utf-8" src="plugins/ueditor/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="plugins/ueditor/ueditor.all.js"></script>

2：在html添加

 <script id="editor"  type="text/plain" style="width:90%;height:220px;">
 </script>

3：实例化uedotor

var editor = UE.getEditor('editor');//初始化

如果想初始化设置Ueditor的值可以这样写

editor.ready(function(){
            editor.setContent(“这是初始化内容”);
 });

一般的话在实际开发中，可能面临着从数据库取出值来，这个时候从数据库取出来的值如果有image之类的就只能取出一小部分，可以添加一个textarea标签把数据存储在里面，再复制给初始化数据

<textarea rows="3" cols="3" id="textarea_id" style="display:none;">${pd.CONTENT}（后台取出来的值）</textarea>

注意：textarea中空格会被写入，这个要注意。

var v=$("#textarea_id").val();
        editor.ready(function(){
           if(v!=''){
            editor.setContent(v);
           }
        });

这样就可以实现简单的文本编辑了，如果想了解文件上传的，下篇文章会讲到。

如果您有兴趣，欢迎加入it成长之路学习交流群：728603969，群主会不定时的分享学习材料哦