百度UEditor编辑器移植教程For WP4.5


之前查了很多资料,网上的资源也不够新,于是便自己动手做了一个,附近的UE本人做了部分修复

修复图片上传问题,修复图片管理问题,完全可以替换wordpress自带编辑器。兼容最新wordpress4.5

附上原文:点击这里!   

附上附件:文章末尾(里面有使用教程,最新版,拿走用吧!) 

之前一直使用wordpress自带的编辑器,后来感觉功能太简单,不够强大,尤其对于中文写作的国人来说,总有些不顺的地方。

所以不少朋友都会找其他编辑器替代,之后又陆续换了Kindeditor For WordPress,CKEditor for WordPress等,均有各种各样的BUG,最后发现了UEditor,但是官方已经不提供插件下载。偶然看到WordPress集成Ueditor编辑器的介绍,顺手分享过来,需要的朋友就折腾吧。

工具/原料

WordPress4.5

ueditor1_4_3_2-utf8-php

方法/步骤

准备工作:WordPress4.5(假设你已经安装好了)

wp-ueditor.zip 这是旧版的UE插件

ueditor1_4_3_2-utf8-php 最新版的UE,我这里下载的是php版本,其他版本的请自行到http://ueditor.baidu.com进行下载

提取文件:新建一个文件夹new-ueditor,用于存放新插件的相关文件。

还记得上面准备工作里两个压缩包吗,现在就要提取相关文件到new-ueditor中去。

ueditor1_4_3_2-utf8-php 中提取ueditor1_4_3_2-utf8-php文件夹 到 new-ueditor 下,并改名为 ueditor

wp-ueditor.zip 中提取 main.phpnew-ueditor 下 ,并改名为 ueditor.php

从 wp-ueditor.zip 中提取 ueditor.class.phpnew-ueditorueditor 下 

现在所需的文件已经足够了,以后的修改全在 new-ueditor文件夹 下进行。

new-ueditor 文件夹的目录结构如下:

12.jpg

修改文件:既然这些文件是从最新版UE和旧版UE插件中整合而来,那么必然会存在一些文件路径、文件名上的差异,接下来修改这些差异。

打开 new-ueditorueditor.php 文件,找到以下代码并修改。

@include_once( dirname( __FILE__ ) . "/ueditor.class.php" );

修改为

@include_once( dirname( __FILE__ ) . "/ueditor/ueditor.class.php" );

打开 new-ueditorueditorueditor.class.php,找到以下代码并修改。

$url = plugin_dir_url(__FILE__);
echo '<script type="text/javascript" src="'.$url.'ueditor/third-party/SyntaxHighlighter/shCore.js"></script>'; 
echo '<link type="text/css" rel="stylesheet" href=" '.$url.'ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" />'; 
}

修改为

$url = plugin_dir_url(__FILE__);
echo '<script type="text/javascript" src="'.$url.'third-party/SyntaxHighlighter/shCore.js"></script>'; 
echo '<link type="text/css" rel="stylesheet" href=" '.$url.'third-party/SyntaxHighlighter/shCoreDefault.css" />'; 
}

继续找到

function ue_importUEditorResource(){ 
 $url = plugin_dir_url(__FILE__); 
 echo '<script type="text/javascript">window.UEDITOR_HOME_URL="'.$url .'ueditor/";</script>'; 
 echo '<script type="text/javascript" src="'.$url.'ueditor/editor_config.js"></script>'; 
 echo '<script type="text/javascript" src="'.$url.'ueditor/editor_all.js"></script>'; 
 echo '<link type="text/css" rel="stylesheet" href=" '.$url.'ueditor/themes/default/ueditor.css" />'; 
}

修改为

function ue_importUEditorResource(){ 
 $url = plugin_dir_url(__FILE__); 
 echo '<script type="text/javascript">window.UEDITOR_HOME_URL="'.$url .'";</script>'; 
 echo '<script type="text/javascript" src="'.$url.'ueditor.config.js"></script>'; 
 echo '<script type="text/javascript" src="'.$url.'ueditor.all.js"></script>'; 
 echo '<link type="text/css" rel="stylesheet" href=" '.$url.'themes/default/css/ueditor.css" />'; 
}

最后要修改的就是 WordPress 里的一个文件,这个文件是 wp-adminedit-form-advanced.php

利用查找功能查找 do_action( 'edit_form_after_title', $post ) 找到以下代码并进行修改 

do_action( 'edit_form_after_title', $post );
if ( post_type_supports($post_type, 'editor') ) {
?>
<div id="postdivrich" class="postarea edit-form-section">
<?php wp_editor( $post->post_content, 'content', array(
 'dfw' => true,
 'tabfocus_elements' => 'insert-media-button,save-post',
 'editor_height' => 360,
) ); ?>
<table id="post-status-info" cellspacing="0"><tbody><tr>
 <td id="wp-word-count"><?php printf( __( 'Word count: %s' ), '<span class="word-count">0</span>' ); ?></td>
 <td class="autosave-info">
 <span class="autosave-message">&nbsp;</span>
<?php
 if ( 'auto-draft' != $post->post_status ) {
 echo '<span id="last-edit">';
 if ( $last_user = get_userdata( get_post_meta( $post_ID, '_edit_last', true ) ) ) {
 printf(__('Last edited by %1$s on %2$s at %3$s'), esc_html( $last_user->display_name ), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));
 } else {
 printf(__('Last edited on %1$s at %2$s'), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));
 }
 echo '</span>';
 } ?>
 </td>
</tr></tbody></table>
</div>
<?php }

把上面的代码替换为以下代码:

do_action( 'edit_form_after_title', $post );
//========================================== UEditor修改代码开始 ==========================================
if ( post_type_supports($post_type, 'editor') ) {
 $editor_close_flag = get_option("close_default_editor");
 //当UEditor插件停用时引用wordpress原有代码
 if( "true" != $editor_close_flag ){
?>
<div id="postdivrich" class="postarea edit-form-section">
<?php wp_editor( $post->post_content, 'content', array(
 'dfw' => true,
 'tabfocus_elements' => 'insert-media-button,save-post',
 'editor_height' => 360,
) ); ?>
<table id="post-status-info" cellspacing="0"><tbody><tr>
 <td id="wp-word-count"><?php printf( __( 'Word count: %s' ), '<span class="word-count">0</span>' ); ?></td>
 <td class="autosave-info">
 <span class="autosave-message">&nbsp;</span>
<?php
 if ( 'auto-draft' != $post->post_status ) {
 echo '<span id="last-edit">';
 if ( $last_user = get_userdata( get_post_meta( $post_ID, '_edit_last', true ) ) ) {
 printf(__('Last edited by %1$s on %2$s at %3$s'), esc_html( $last_user->display_name ), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));
 } else {
 printf(__('Last edited on %1$s at %2$s'), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));
 }
 echo '</span>';
 } ?>
 </td>
</tr></tbody></table>
</div>
<?php
 } else { //当UEditor启用时使用修改后的代码
 echo '<script type="text/plain" id="postdivrich" class="postarea">';
 echo $post->post_content;
 echo '</script>';
 echo '<span id="last-edit">';
 if ( $last_id = get_post_meta($post_ID, '_edit_last', true) ) {
 $last_user = get_userdata($last_id);
 printf(__('Last edited by %1$s on %2$s at %3$s'), esc_html( $last_user->display_name ), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));
 } else {
 printf(__('Last edited on %1$s at %2$s'), mysql2date(get_option('date_format'), $post->post_modified), mysql2date(get_option('time_format'), $post->post_modified));
 }
 echo '</span>';
 }
}
//=============================== UEditor修改代码结束=======================================

保存修改。

另外发现,在后台写文章时,编辑器的工具栏浮动时会被WordPress顶部遮挡住一部分,这里需要修改编辑器的配置文件。

配置文件是 new-ueditorueditorueditor.config.js  

找到

//,topOffset:30

去掉前面的注释符号,即修改为

,topOffset:30

保存。当然还有很多东西可以去更改,配置文件中有注释

好了,所有文件都修改完毕了。

安装 UEditor 插件:

  现在拷贝 new-ueditor 下的所有文件(即 ueditor.php文件 和 ueditor文件夹)到 WordPress 的插件目录下,即

 wp-content/plugins

清理浏览器缓存,登录WordPress后台启用 UEditor 插件就可以使用强大的UEditor编辑器了。

END

1460737705107360.jpg

可按教程操作(附件文章附带,为爱折腾的朋友准备)

也可直接下载文件

new-ueditor.zip

 文章来自百度经验,本人进行了小部分更新,仅供学习交流

声明:TIL|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA[ZH]协议进行授权

转载:转载请注明原文链接 - 百度UEditor编辑器移植教程For WP4.5


Life is very interesting. In the end, some of your greatest pains become your greatest strengths.