首页 > 代码库 > Ueditor开发经验

Ueditor开发经验

2024-10-22 08:09:02   214人阅读

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

先前就一直使用Ueditor，觉得功能挺多的，而且还给出了详细的文档，供二次开发。
但Ueditor已经出新的版本（和先前版本很不相同），网上很多的教程还都是旧的。使得在开发时，老被误导。
引用Ueditor
    引入js文件
    <script type="text/javascript" charset="utf-8" src="http://www.mamicode.com/ueditor.config.js"></script>            //配置文件
    <script type="text/javascript" charset="utf-8" src="http://www.mamicode.com/ueditor.all.js"> </script>                //需要进行二次开发，请使用该文件。
    <script type="text/javascript" charset="utf-8" src="http://www.mamicode.com/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>");
    }
    };
    上面的例子将选中区域文字加粗

Ueditor开发经验


联系
我们