PmPen

----专注于Lamp技术
  管理

百度UEditor的使用

Posted on 2011-09-19 21:58  PmPen  阅读(5326)  评论(5编辑  收藏  举报

  百度WEB前端设计部推出一款开源的编辑器UEditor   http://ueditor.baidu.com/index.html ,这款编辑器相当强大,它提供了百度地图,google地图和视频等一些非常强大的功能 ,毕竟是国内大企业肯定是要关注的。

  在ueditor1.1.5版本的使用很简单

  1、包含头文件

    <link href="../themes/default/ueditor.css" rel="stylesheet" type="text/css" /> 

    <script src="../editor_config.js" type="text/javascript"></script> 

    <script src="../editor_ui_all.js" type="text/javascript"></script>

    将入口的js文件和css文件包含进来

  2、html代码

    <form action="add.php"  method="POST" >

    <textarea id="editor"  ></textarea> <!--内容输入框 注意id的命名-->

<script language="javascript" type="text/javascript">  <!-- UEditor --> 

  var editor = new baidu.editor.ui.Editor(); <!--new一个对象,通过对象创建编辑器-->

  editor.render("editor");<!--出入参数editor为textarea中的id值,并生成编辑器-->

</script>

<input type="submit" name="sub"/>

      </form>

  3、服务器接收数据

    我的form表单中提交到add.php文件中,在add.php中通过$_POST接收编辑器传入的数据(asp、jsp也是一样的,只是提交到服务器的文件不一样)。

    UEditor对编辑器编辑的内容有一个默认的名editorValue,所以可以通过$_POST['editorValue']接受出过来的数据。

  以上就完成了对UEditor的配置

    4、其他问题

      1、如果你需要设置UEditor的一些参数的话,只要在HTML代码中的js片段断码加以修改

      <script language="javascript" type="text/javascript"> 

var option = {

   initialContent: '在编辑器中默认显示的内容',  //初始化编辑器的内容

   minFrameHeight: 200,          //设置高度

   textarea: 'content'               //设置提交时编辑器内容的名字,之前我们用的名字是默认的editorValue

};

   var editor = new baidu.editor.ui.Editor(option);   //将设置初始化(之前的配置采用的是默认的,所以没有传参数)

editor.render("editor");

</script>

      2、如果你的UEditor都弄好了,但是发现百度地图、google地图、视屏、表情都无法正常显示,问题可能是你的UEditor文件没有放在你的跟目录下,

        但调用的文件是在根目录下(只要你调用UEditor的文件和UEditor文件没有放在同一级文件夹下面)。这是因为UEditor是根据相对路径来确定

        调用自身的其他文件的,如果改成绝对路劲就可以解决这个问题了。

        解决:

        在UEditor(不一定是这个名称,看你命名是哪个就是哪个)文件夹下,有个配置文件editor_config.js,在里面可以更改配置信息。

        更改"UEDITOR_HOME_URL"这个值,改为UEditor这个文件夹得在服务器下的绝对路径

        例如:

        UEDITOR_HOME_URL:'http://localhost/QingBlog/pm-static/UEditor/', //这里你可以配置成ueditor目录在您网站的绝对路径

        OK  啦!