百度UEditor编辑器上手体验

原先一个项目使用的是kindEidtor编辑器,客户反馈有问题,要求修改,因此查阅资料后,决定改用百度UEditor编辑器.

因为要提交到后台更新到数据库,所以前端使用隐藏的textArea保存临时数据,提交到后台处理.

UEditor版本号:1.4.3,后台语言:.Net,UEditor要与站点字符集charset匹配.

UEditor与.Net相关的代码主要在图中红框处:

其中大部分文件不用修改,只需要修改config.json文件即可,config.json包含了上传的各类文件的基本配置,比如上传类型,上传大小限制,格式限制,保存路径,保存文件名等,使用到项目中,主要修改以下两项:imageUrlPrefix(访问路径前缀)和imagePathFormat(上传保存路径),为避免引起误解,我一般设置imageUrlPrefix为空,imagePathFormat为从站点根目录开始的路径,这样读写均使用imagePathFormat,其他文件一般不用动,如下:

    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{yyyy}{mm}{dd}{hh}{ii}{ss}_{rand:3}", /* 上传保存路径

同时修改UEditor后台路径映射的代码，代码文件UploadHandler.cs第66行，确保后台文件保存位置正确和前台文件下载位置正确以及前后台路径正确对应，如下

        var savePath = PathFormatter.Format(uploadFileName, UploadConfig.PathFormat);//取得配置的从根目录开始绝对路径
        var appPhysicalPath = System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath;
        var appVirtualPath = System.Web.Hosting.HostingEnvironment.ApplicationVirtualPath;
        var localPath = appPhysicalPath + Server.MapPath(savePath).Replace(Server.MapPath("/"), "");//服务器文件保存路径
        savePath = appVirtualPath.TrimEnd('/') + savePath;//前台页面显示路径
        //var localPath = Server.MapPath(savePath);

另外文件大小还与webconfig中的maxRequestLength有关系,有需要的时候也要配置.

以上配置好后,就可以在页面引用UEditor编辑器了.

1、应用所需js文件

    <script type="text/javascript" charset="gbk" src="UEditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="gbk" src="UEditor/ueditor.all.js"> </script>
    <script type="text/javascript" charset="gbk" src="UEditor/ueditor.parse.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="gbk" src="UEditor/lang/zh-cn/zh-cn.js"></script>

2、定义编辑器，其中editor是编辑器，textarea为前端提交到后台时保持编辑器数据的控件。

   <script id="editor" type="text/plain" style="width: 668px; height: 500px;"></script>
   <textarea id="content1" cols="100" rows="8" style="display: none; width: 700px; height: 200px; visibility: hidden;" runat="server"></textarea>

3、实例化编辑器并在页面加载完成后从textarea赋值，UEditor编辑器的工具栏可以自定义需要的按钮，可以通过实例化的时候自定义，自定义配置项如下页面所示：http://fex.baidu.com/ueditor/#start-toolbar。

<script type="text/javascript">
        //实例化编辑器，使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor', {
            scaleEnabled: true//设置不自动调整高度
            , toolbars: [
                 //['fullscreen', 'source', 'undo', 'redo', 'bold']
                [
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'pasteplain', '|', 'forecolor', 'backcolor', 'selectall', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
             'indent', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', 'horizontal', '|',
            'link', 'unlink', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
            'simpleupload', 'insertimage','attachment', 'searchreplace', 'drafts'
                ]
            ]
        });
        

        ue.ready(function () {//编辑器初始化完成再赋值  
            
            ue.setContent(document.getElementById('content1').value);  //赋值给UEditor 
        });

        uParse('#content', {
            rootPath: 'UEditor'
        });


  </script>

toolbars: [
    [
        'anchor', //锚点
        'undo', //撤销
        'redo', //重做
        'bold', //加粗
        'indent', //首行缩进
        'snapscreen', //截图
        'italic', //斜体
        'underline', //下划线
        'strikethrough', //删除线
        'subscript', //下标
        'fontborder', //字符边框
        'superscript', //上标
        'formatmatch', //格式刷
        'source', //源代码
        'blockquote', //引用
        'pasteplain', //纯文本粘贴模式
        'selectall', //全选
        'print', //打印
        'preview', //预览
        'horizontal', //分隔线
        'removeformat', //清除格式
        'time', //时间
        'date', //日期
        'unlink', //取消链接
        'insertrow', //前插入行
        'insertcol', //前插入列
        'mergeright', //右合并单元格
        'mergedown', //下合并单元格
        'deleterow', //删除行
        'deletecol', //删除列
        'splittorows', //拆分成行
        'splittocols', //拆分成列
        'splittocells', //完全拆分单元格
        'deletecaption', //删除表格标题
        'inserttitle', //插入标题
        'mergecells', //合并多个单元格
        'deletetable', //删除表格
        'cleardoc', //清空文档
        'insertparagraphbeforetable', //"表格前插入行"
        'insertcode', //代码语言
        'fontfamily', //字体
        'fontsize', //字号
        'paragraph', //段落格式
        'simpleupload', //单图上传
        'insertimage', //多图上传
        'edittable', //表格属性
        'edittd', //单元格属性
        'link', //超链接
        'emotion', //表情
        'spechars', //特殊字符
        'searchreplace', //查询替换
        'map', //Baidu地图
        'gmap', //Google地图
        'insertvideo', //视频
        'help', //帮助
        'justifyleft', //居左对齐
        'justifyright', //居右对齐
        'justifycenter', //居中对齐
        'justifyjustify', //两端对齐
        'forecolor', //字体颜色
        'backcolor', //背景色
        'insertorderedlist', //有序列表
        'insertunorderedlist', //无序列表
        'fullscreen', //全屏
        'directionalityltr', //从左向右输入
        'directionalityrtl', //从右向左输入
        'rowspacingtop', //段前距
        'rowspacingbottom', //段后距
        'pagebreak', //分页
        'insertframe', //插入Iframe
        'imagenone', //默认
        'imageleft', //左浮动
        'imageright', //右浮动
        'attachment', //附件
        'imagecenter', //居中
        'wordimage', //图片转存
        'lineheight', //行间距
        'edittip ', //编辑提示
        'customstyle', //自定义标题
        'autotypeset', //自动排版
        'webapp', //百度应用
        'touppercase', //字母大写
        'tolowercase', //字母小写
        'background', //背景
        'template', //模板
        'scrawl', //涂鸦
        'music', //音乐
        'inserttable', //插入表格
        'drafts', // 从草稿箱加载
        'charts', // 图表
    ]
]

4，按以上部署后，页面就可以使用UEditor编辑内容了，其它资料可以从官网查询。

5，另外，百度UEditor编辑器的后台代码结构写的还是挺清晰明白的，不错，可以学习下。