zoukankan      html  css  js  c++  java
  • 最新版富文本编辑器UEditor操作教程

             最近项目中使用到了富文本编辑器,选择的是百度的UEditor。所以对其进行了研究,发现最近发布了新版本,与以往的用法有的改变。一下对UEditotr 的是用做一下详细的介绍。

             首先是UEditotr的下载,下载地址:http://ueditor.baidu.com/website/download.html


    在这个页面有很多下载选项,为了简单起见,可以更具开发的环境进行下载。我用的是JSP,所以下载的是

    以下的使用说明也都是以JSP的作为介绍,其他的大同小异。

             下载完成之后解压出来。

    下边开始介绍使用方法:

    一.导入:

        将解压好的文件导入工程,我用的是MyEclipse,直接粘贴到工程中的WebRoot下如图:

        工程中的js文件报错是由于开发工具的问题,不用处理。

    二.包的导入:

        在导入的文件中的jsp->lib下有需要导入的包

    将这些包拷贝到WEB-INF的lib下

    导入后有的包不能自动添加,需要手动添加一下。

    三.简单例子:

        在jsp的head中添加:

    <script type="text/javascript"charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.config.js"></script>

        <script type="text/javascript" charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.all.js"> </script>

     

    body中添加

        <scriptid="editor" name="editor" type="text/plain"     style="1024px;height:500px;"></script>

       <script type="text/javascript">

     

        //实例化编辑器

        //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下   引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例

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

       </script>

    注意在head中的引用是否正确,一切完成后启动程序,就能看到效果。

     

    四.修改展现的样式:

        如果你不需要这么多的功能选项,可以修改ueditor.config.js

     这是规定页面展现的地方,不要的删除即可。我只需要上传图片和表格,所有修改后如图:

     

    五.修改图片上传地址:

        这个地方,之前的版本是在ueditor.config.js修改的,但新版本中是在config.json中修改:

    这里有很详细的中文注解。修改imagePathFormat即可修改上传图片的地址,其他上传功能修改相似。

    六.上传到云盘或别的网站:

        之前的上传是上传到程序所在的服务器上,这样迟早是会沾满资源的,所以要放到云盘或别的地方。

        指定上传路劲:UE.Editor.prototype._bkGetActionUrl= UE.Editor.prototype.getActionUrl;

    UE.Editor.prototype.getActionUrl= function(action) {

        if (action == 'uploadimage' || action == 'uploadscrawl' || action== 'uploadimage') {

              return "<c:url value='/savePic'/>";

        } else if (action == 'uploadvideo') {

            return 'http://a.b.com/video.php';

        } else {

            return this._bkGetActionUrl.call(this, action);

        }

    };

    这样在上传图片的时候就会去找/savePic路劲,实现你指定的上传。在后台写好上传功能即可。需注意的是上传时,信息放在Request Payload中,后台接收数据时,需注意(接收方法请上网查找,此处不做介绍);图片保存后,需向前台回传信息:

          JSONObject result = new JSONObject(); 

          result.put("state", "SUCCESS");

    //    result.put("title", "1431917830166036926.png");

    //    result.put("original","QQu56feu724720150511105213.png");

    //    result.put("type", ".png");

          result.put("url", request().getContextPath()+"/pledge/download?filePath="+filePath);

    //    result.put("size", "8941");

         

          this.renderJSON(result.toString());

    七.表单提交:

       简单的form表单提交即可。将接收的信息保存。

    八.页面展示:

       从数据库提取信息,展示即可:

    <script id="editor"name="editor" type="text/plain" style="1024px;height:500px;">    <c:out value="${editor}"/>  </script>

    九.页面操作:

       页面有时需要一些操作,比如禁止编辑,提取信息等:

       varue = UE.getEditor('editor');

       ue.ready(function() {

       ue.setDisabled('fullscreen');

       });//禁止编辑

    可查看文档:http://fex.baidu.com/ueditor/#api-common

  • 相关阅读:
    操作数据库系统(OLTP)和联机分析处理系统(OLAP)的区别
    BI笔记-SSAS部署的几种方式及部署后的SSAS刷新
    概念-数据仓库与元数据
    零基础学Python 3之环境准备
    OFBiz进阶之HelloWorld(五)创建新实体
    OFBIZ bug_create-component ERROR
    OFBIZ bug_ControlServlet.java:233:ERROR
    OFBiz进阶之HelloWorld(三)CRUD操作
    OFBiz进阶之HelloWorld(二)创建热部署模块
    OFBIZ bug_ControlServlet.java:239:ERROR
  • 原文地址:https://www.cnblogs.com/dengding/p/5939444.html
Copyright © 2011-2022 走看看