• 百度UEditor使用详解


     

    百度UEditor使用详解(作者:老卢 www.laoluit.com)
    相关视频教程下载:
    www.laoluit.com

    当我们还在使用FCKeditor时候,百度已经悄悄开发出了一套比它更强大的文本编辑器ueditor,专为中国人打造,请看--------:
    web文本编辑器被广泛的使用在论坛,留言系统,微博等网站,凡是用户能发布文字的网站,几乎到会使用到文本编辑器,老卢今天给大家介绍一款中国人自己开放的开源文本编辑器,全球最大中文搜索引擎--百度推出的UEditor。Ueditor是由百度web前端研发部开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和使用代码.详细可参见网站:
     
    http://ueditor.baidu.com/index.html 。最新版1.1.7,可以在JSP,PHP,ASP等网站使用。

    好,现在跟老卢来看看如何使用:以JSP网站为例
    1下载ueditor
     访问这个网址:
    http://ueditor.baidu.com/index.html,找到下载
     然后下载ueditor1.1.7.zip或者其他的版本
    2 解压后我们会看到6个文件夹和3个js文件以及一个更新日志文本
     其中:
      官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:

      _examples:编辑器完整版的示例页面
      _demos:编辑器的各种使用案例
      dialogs:弹出对话框对应的资源和JS文件
      themes:样式图片和样式文件
      server:涉及到服务器端操作的PHP、JSP等文件
      third-party:第三方插件
      editor_all.js:_src目录下所有文件的打包文件
      editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用
    editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录

    3 在你的web工程或网站根目录下,新建一个名称叫ueditor文件夹。复制所有这些文件夹和js到这个文件夹
    到此准备工作完成
    4 在JSP页面包含所需要的JS和css

     <script type="text/javascript" charset="utf-8" src="ueditor/editor_config.js"></script>
        <script type="text/javascript" charset="utf-8" src="ueditor/editor_all_min.js"></script>
      <link rel="stylesheet" type="text/css" href="ueditor/themes/default/ueditor.css" />

    在此注意:引用的js或css必须正确,否则显示不出来
     我的ueditor文件夹和JSP文件同在根目录,所以写成以上。
    5 修改editor文件夹下边的editor_config.js文件中的第七行。
    把变量URL修改:var URL= "/你的网站名称或web工程名称/ueditor/";
    举例:我的工程名称是laoluit
    那么我修改后是var URL= "/laoluit/ueditor/";
    6 添加编辑器
     <body>
      <form action="dopost.jsp" method="post">
      <script type="text/plain" id="myEditor" class="myEditor">
      </script>
      <input type="submit" value="发帖">
      </form>
     
      <script type="text/javascript">
        var editor = new baidu.editor.ui.Editor();
        editor.render('myEditor');
    </script>
      </body>
    6 在另一个jsp或servlet中接收提交的数据
      <%
        //表单提交到了dopost.jsp,编辑器中编写的内容默认名称是editorValue
        //所以通过request.getParameter("editorValue")可以得到
        //接收到数据后打印到后台,你可以把它保存到数据库中。
        System.out.println(request.getParameter("editorValue"));
     
       %>
    7 补充
     设置编辑器中默认值:
      <script language="javascript" type="text/javascript">

      var op = {
       initialContent: '默认值。。。。。',  //初始化编辑器的内容
       minFrameHeight: 1024          //设置默认高度
       };
      var editor = new baidu.editor.ui.Editor(op);
      editor.render('myEditor');

      </script>

       

     

  • 相关阅读:
    BUAA_OO_2020_Unit3 Summary
    BUAA_OO_2020_Unit2 Summary
    DataFrame的遍历
    ESMM提升CVR的论文summary
    FaceBook 关于提升CTR的论文研究
    OO终章·GRAND BATTLE
    第三单元规格作业博客总结
    OO电梯单元作业总结
    【OO多项式求导作业总结】
    提问回顾与个人总结
  • 原文地址:https://www.cnblogs.com/luleiitlife/p/8545098.html
Copyright © 2020-2023  润新知