Total Pageviews

Thursday, 20 December 2012

Ueditor镶嵌在WordPress的教程

首先说说什么是Ueditor
         
        简单的说Ueditor是百度开发的一款功能十分强大的编辑器;
  
    
        详细的解释百度百科飞机http://baike.baidu.com/view/6100006.htm
  
    
        Ueditor在线演示:http://ueditor.baidu.com/website/onlinedemo.html
  
   


             二、
  
    
        也许他的安装是非常的简单的,但是我各种尝试也没正常使用(BAE环境)遇到各种BUG、例如 无法安装、无法卸载、出现2个编辑器的问题、无法上传图片等问题真是头大。
  
  


             三、
  
    
        问题的来源说完了说说我是如何解决的
  
    
        经过翻阅大量资料后更新UEditor1.2.1 ,安装到 wordpress 3.3.2一文启导了我。
  
    
        首先下载插件下载地址
  
  
        Archive.zip
    
    
        解压出wordpress-ueditor.zip 部署到D:\svn\goblog\4\wp-content\plugins\
  
    
        wordpress-ueditor是插件目录
  
    
        以下几点如果看不懂的话其实没关系(因为我也看不懂..)
  
    
        不过插件装好了以后的确是不能用的.
  
    
        只需要执行文件夹附带的 edit-form-advanced.php 替换至 D:\svn\goblog\4\wp-admin 目录自行判断
  
    
        由于编辑器的特殊性,本插件的安装使用需要注意以下事项:
1、插件安装好之后,还需要修改edit-form-advanced.php文件中关于编辑器容器的模板代码。
2、插件目录下的ue3.3.1-edit-form-advanced.php中是已经修改好的对应文件,适用于wp3.3.1版本。ue3.3.2-edit-form-advanced.php适用于wp3.3.2版本
3、如需修改编辑器的各种行为,可直接修改插件主文件main.php下方实例化对象时传入的参数即可,参数名称请参考editor_config.js文件。
4、此版本暂不支持自动保存功能。关闭默认的自动保存及自动草稿方法可参考网上资料,此处不再详述。
5、不需要使用编辑器时,直接停用即可还原成系统默认的编辑器。
6、本插件适用的wordpress版本:3.3.1+
    
  


             四、
 
    
        安装完成,体验下到底有多强大吧。
-------------------------------------------------------------------

在wordpress中使用百度富文本编辑器UEditor


 百度的富文本编辑器UEditor感觉很好,功能很强大。说实话,我最喜欢的一个功能就是代码高亮,这样就再也不用使用 SyntaxHighlighter那些指令来进行代码高亮了(不过UEditor好像也是使用的SyntaxHighlighter的JS),直接插入 代码就可以实现所见即所得的高亮代码。所以把它wordpress的默认编辑器换成UEditor还是挺不错的。
        首先点击这里进入UEditor下载页面,在这里可以下载完整版或定制具体功能,很方便很个性。我这里直接下载的完整版,将所有文件解压到“baidu”目录。在“baidu”目录同目录创建一个“index.php”文件,内容如下:
   1:  <head>
   2:  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   3:  <title>百度UEditor实例</title>
   4:  <script type="text/javascript" src="/editor_config.js"></script>
   5:  <script type="text/javascript" src="/editor_all.js"></script>
   6:  <link rel="stylesheet" href="/themes/default/ueditor.css"/>
   7:  </head>
   8:  <body>
   9:  <div id="myEditor"></div>
  10:  <script type="text/javascript">
  11:      var editor = new baidu.editor.ui.Editor();
  12:      editor.render("myEditor");
  13:  </script>
  14:  </body>
        然后在浏览器中打开这个文件就可以看到编辑器了。

上面是UEditor通用方法,可以再任何网站中使用,详细使用方法可以参考UEditor官方网站
要想将wordpress中的默认文本编辑器换成UEditor,需要下载一个插件,点击这里到官方下载插件。 将插件安装启用,然后将插件目录下的“ue3.3.2-edit-form-advanced.php”重命名为“edit-form- advanced.php”并替换“wp-admin”目录下的同名文件(注意备份)。wordpress默认编辑器就变成百度的富文本编辑器 UEditor了。

如需修改编辑器的各种行为,可直接修改插件主文件main.php下方实例化对象时传入的参数即可,参数名称请参考editor_config.js文件。不需要使用编辑器时,直接停用即可还原成系统默认的编辑器.