前端学习

转载：http://www.ycysky.com/20140416/6725.html

之前一直看了一下怎么把wordpress 的后台原始的编辑器改成百度的uedior~终于找到篇好的文章。

新建一个文件夹new-ueditor，用于存放新插件的相关文件。

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

从 ueditor1_3_6-utf8-php.zip 中提取 ueditor1_3_6-utf8-php文件夹 到 new-ueditor 下，并改名为 ueditor

从 wp-ueditor.zip 中提取 main.php 到 new-ueditor 下 ，并改名为 ueditor.php

从 wp-ueditor.zip 中提取 ueditor.class.php 到 new-ueditor\ueditor 下 

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

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

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

修改文件：

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

 打开 new-ueditor\ueditor.php 文件，找到以下代码并修改。

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

修改为

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

打开 new-ueditor\ueditor\ueditor.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-admin\edit-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-ueditor\ueditor\ueditor.config.js  

找到

//,topOffset:30

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

,topOffset:30

保存。

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

 

在实际部署中，为了得到更好的性能，UEditor 插件应该加载 ueditor.all.min.js 而不是 ueditor.all.js 。前者是后者的优化版本。具体修改如下：

在 ueditor.class.php 文件中找到

echo '<script type="text/javascript" src="'.$url.'ueditor.all.js"></script>';

并修改为

echo '<script type="text/javascript" src="'.$url.'ueditor.all.min.js"></script>';

UEditor移植到WordPress 3.9.2