Chèn trình soạn thảo bài viết WYSIWYG MCE trong wordpress.

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Chèn trình soạn thảo bài viết WYSIWYG MCE trong wordpress.

WordPress sử dụng thư viện TinyMCE làm trình soạn thảo editor. Bạn có thể chèn wordpress editor theo hai cách dùng php hoặc javascript. Bài viết này mình
Trong bài hướng dẫn, mình sẽ tạo submenu tên “my editor” chứa trong menu Apprearance tại cửa số wordpress admin.

Chèn thư viện mce sử dụng php wordpress

Đầu tiên bạn chèn các file scripts và style cần có cho editor.

 //Loading the necessary editor scripts and styles wp_enqueue_script(array('jquery', 'editor', 'thickbox', 'media-upload')); wp_enqueue_style('thickbox'); //Loading TinyMCE files in admin panel add_action("admin_head","myplugin_load_tiny_mce"); function myplugin_load_tiny_mce() { wp_tiny_mce( false ); // true gives you a stripped down version of the editor }  

Hiển thị WYSIWYG editor, sử dụng hàm wp_editor với cú pháp:

   

Trong đó:

  • $content : Nội hiển thị trong WYSIWYG editor.
  • $editor_id : tính chất id cho thẻ textarea và TinyMCE. Lưu ý: id chỉ được chữ thường (lowercase). Không sử dụng gạch dưới hoặc gạch ngang có thể khiến cho MCE editor không hiển thị chính xác.
  • $settings : Tham số cài đặt khác cho editor để hiển thị các thành thêm như chèn ảnh…

$settings :

 $settings=array( "wpautop"=>true //sử dụng tính năng thêm đoạn paragraphs. "media_buttons"=>true //có hiển thị nút media insert/upload. "textarea_name"=>$editor_id //thuộc tính name của thẻ textarea được sinh ra bởi editor có vai trò lấy nội dung khi form được submit. Mặc định name bằng tính chất id $editor_id. "textarea_rows"=>10 //số lượng dòng được hiển thị trong textarea. ... );  

Tham khảo thêm: http://codex.wordpress.org/Function_Reference/wp_editor
Ví dụ đơn giản để hiển thị editor trống.

 $content = ''; $editor_id = 'mycustomeditor'; wp_editor( $content, $editor_id );  

Chèn editor với nội dung của một bài viết.

 $post_id = 51; $post = get_post( $post_id, OBJECT, 'edit' ); $content = $post->post_content; $editor_id = 'editpost'; wp_editor( $content, $editor_id );  

Hoặc cũng có thể tinh chỉnh editor nâng cao, thêm hoặc loại bớt một số thành phần định hình văn bản như bold, italic…

 wp_editor( '', 'editor-textarea_name' => 'text_editor_name', 'media_buttons' => false ) ); wp_editor( '', 'content-textarea_name' => 'content', 'media_buttons' => false, 'tinymce' => array( 'theme_advanced_buttons1' => 'formatselect,forecolor,|,bold,italic,underline,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,spellchecker,wp_fullscreen,wp_adv' ) ) );  

Ví dụ sau đây mình tạo menu “my editor” nằm dưới “Appearance”. Copy đoạn code sau vào functions.php

 // create custom plugin settings menu add_action('admin_menu', 'create_menu1'); function create_menu1(){ //Loading the necessary editor scripts and styles wp_enqueue_script(array('jquery', 'editor', 'thickbox', 'media-upload')); wp_enqueue_style('thickbox'); add_submenu_page( 'themes.php', 'my editor', 'my editor', 'administrator', 'theme-slug', 'display_mce_editor'); } //Loading TinyMCE files add_action("admin_head","myplugin_load_tiny_mce"); function myplugin_load_tiny_mce() { wp_tiny_mce( true ); // true gives you a stripped down version of the editor } function display_mce_editor(){ wp_editor( '', 'editor-textarea_name' => 'editor1', 'media_buttons' => true ,'editor_css'=>'') ); }  

Kết quả:
tinyMCE editor wordpress - hoangweb.com
Bạn có thể dùng chung cấu hình thiết lập của mce editor mỗi khi bạn muốn chèn editor vào trang ví dụ: loại bỏ phần tử nào, nút nào bỏ nút nào lấy… Cấu hình tinyMCE trước khi load:

 function myformatTinyMCE($in) { $in['remove_linebreaks']=false; $in['gecko_spellcheck']=false; $in['keep_styles']=true; $in['accessibility_focus']=true; $in['tabfocus_elements']='major-publishing-actions'; $in['media_strict']=false; $in['paste_remove_styles']=false; $in['paste_remove_spans']=false; $in['paste_strip_class_attributes']='none'; $in['paste_text_use_dialog']=true; $in['wpeditimage_disable_captions']=true; $in['pluginlinepopups,tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen'; $in['content_css']=get_template_directory_uri() . "/editor-style.css"; $in['wpautop']=true; $in['apply_source_formatting']=false; $in['theme_advanced_buttons1']='formatselect,forecolor,|,bold,italic,underline,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,wp_fullscreen,wp_adv'; $in['theme_advanced_buttons2']='pastetext,pasteword,removeformat,|,charmap,|,outdent,indent,|,undo,redo'; $in['theme_advanced_buttons3']=''; $in['theme_advanced_buttons4']=''; return $in; } add_filter('tiny_mce_before_init', 'myformatTinyMCE' );  

Chèn tinyMCE editor với javascript

   

Xem chi tiết tư liệu tại: http://www.tinymce.com/wiki.php

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dấu kênh chia sẻ kiến thức WordPress của TopVn trên Twitter và Facebook

Bài viết Chèn trình soạn thảo bài viết WYSIWYG MCE trong wordpress. được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang