zoukankan      html  css  js  c++  java
  • 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;
            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>");
        }
        };
        上面的例子将选中区域文字加粗
  • 相关阅读:
    linux 命令——19 find (转)
    linux 命令——18 locate (转)
    linux 命令——17 whereis(转)
    linux 命令——16 which(转)
    linux 命令——15 tail (转)
    linux 命令——14 head (转)
    Java for LeetCode 038 Count and Say
    Java for LeetCode 037 Sudoku Solver
    Java for LeetCode 036 Valid Sudoku
    Java for LeetCode 035 Search Insert Position
  • 原文地址:https://www.cnblogs.com/xiashuo-he/p/4199939.html
Copyright © 2011-2022 走看看