Ueditor开发经验

Ueditor是百度开发的一款免费使用的富文本编辑器。

先前就一直使用Ueditor，觉得功能挺多的，而且还给出了详细的文档，供二次开发。

但Ueditor已经出新的版本（和先前版本很不相同），网上很多的教程还都是旧的。使得在开发时，老被误导。

引用Ueditor

    引入js文件

    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>            //配置文件

    <script type="text/javascript" charset="utf-8" src="ueditor.all.js"> </script>                //需要进行二次开发，请使用该文件。

    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>    //中文语言

    html代码

    <textarea id="editor"></textarea>

   实例化编辑器

    <script type="text/javascript">

    var ue = UE.getEditor('editor');

    </script>

    ueditor.config.js文件简单分析

        配置ueditor富文本编辑器所在位置

        在ueditor.config.js文件中，有一个变量URL

        原文为：

        var URL = window.UEDITOR_HOME_URL || getUEBasePath();

        建议修改成Ueditor所在目录，很多时候，是因为这个URL配置的问题，使得Ueditor加载失败。

        配置工具栏(全文搜索以下关键字)

        toolbars:

        删除或修改相应单词位置，就可修改工具栏。

        当然也可以在初始化页面中，自定义工具栏的工具。

        serverUrl:

        服务器统一请求接口路径

        Ueditor有相应的php文件提供文件上传接口，但是对于网站来说，这是不安全的。建议网站开发者，根据这里的配置，自行修改上传接口。

        elementPathEnabled:

        显示元素路径，默认是显示

        将这里的配置打开，改为false，就可以去除富文本编辑器底部的元素路径

 

        一般编辑器是不会出现“文字统计”，但在Ueditor中出现了这个，而且还不能通过配置去除。那么只能通过控制css文件来实现了。直接display:none;              //^_^

        

    Ueditor二次开发

    首先添加按钮

    在ueditor.config.js的toolbars添加工具命名，再添加中文注释

    如：

    toolbars:[['fristdirectory']]，

    labelMap:{ 'fristdirectory':'二次开发'},

    在ueditor.all.js文件中添加触发命令

     var btnCmds = ['fristdirectory'];

    在ueditor.css文件中，以如下格式添加css代码

    .edui-for-fristdirectory .edui-icon{

        background:url("../images/icons.png") -755px -80px no-repeat !important;

        width:60px !important;

        height:20px !important;

    }

    执行命令代码

    baidu.editor.commands['fristdirectory'] = { execCommand : function() {

     //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容

         var range = UE.getEditor('editor').selection.getRange();

         range.select();

         var $text = UE.getEditor('editor').selection.getText();

         UE.getEditor('editor').execCommand('insertHtml', "<b>$text</b>");

    }

    };

    上面的例子将选中区域文字加粗