• 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>");
        }
        };
        上面的例子将选中区域文字加粗
  • 相关阅读:
    vuex 入门
    Vuex 原理
    java web开发问题集合
    JSP Servlet 路径解析 路径设置
    随笔——学习的一些步骤及注意点(不断更新)
    常用正则表达式大全!(例如:匹配中文、匹配html)
    myeclipse+tomcat 工程名改名的问题 ——————完美解决方案
    web开发的步骤
    Servlet中的GET和POST之间的区别
    html、css、javascript、JSP 、xml学习顺序应该是怎样的呢?
  • 原文地址:https://www.cnblogs.com/xiashuo-he/p/4199939.html
Copyright © 2020-2023  润新知