Thành viên Coder
Lv2
159
điểm

Câu hỏi
5

Trả lời
4

  • Lv2 on 19/09/2017 Plugin.

    Lâu rồi bên mình cũng chưa có bản cập nhật nào, bạn download source về tự phát triển thêm nhé

    • 8176
    • 11
    • 2
  • Lv2 on 16/07/2016 Plugin.

    4 – Thêm TinyMCE Editor vào Comments Mục

    Nó có thể được rằng bạn muốn hiển thị một trình soạn thảo WYSIWYG thay vì biên tập viên nhận xét chuẩn trong phần ý kiến. May mắn thay, chúng ta có thể đạt được điều này rất dễ dàng chỉ với một thay đổi nhỏ về functions.php tập tin của chủ đề của chúng tôi.

    Để bắt đầu, chúng tôi chỉ cần thêm đoạn mã sau đây:

    function gk_comment_form( $fields ) { ob_start(); wp_editor( '', 'comment', array( 'teeny' => true )); $fields['comment_field'] = ob_get_clean(); return $fields;}add_filter( 'comment_form_defaults', 'gk_comment_form' );

    Như bạn có thể thấy, chúng tôi sử dụng các bình luận hình thức mặc định bộ lọc cũng như các chức năng để bắt đầu ra trong PHP. Kết quả là, chúng tôi có thể thay thế các lĩnh vực tiêu chuẩn với các nội dung của biên tập TinyMCE nhận xét.

    Một điều quan trọng là việc sử dụng TinyMCE của teeny chế độ. Chế độ này cho phép bạn hiển thị một phiên bản đơn giản của trình soạn thảo.

    Tất nhiên, các mã được trình bày ở trên là một cấu hình rất cơ bản, mà sẽ hiển thị trình soạn thảo trong hình thức cơ bản của nó, như hình dưới đây:

    RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


    Như bạn có thể thấy, chúng ta sẽ cần một vài sửa đổi để làm cho giao diện biên tập đoan hơn và chức năng. Hãy bắt đầu với kích thước của các biên tập viên – theo mặc định nó sẽ hiển thị 10 dòng cho khu vực văn bản, chỉnh sửa, như đã thấy trong ảnh chụp màn hình ở trên; đây là quá nhiều đối với hầu hết mọi người. Rất may, chúng ta chỉ cần thay đổi wp_editor chức năng như sau:
    wp_editor( '', 'comment', array('teeny' => true,'textarea_rows' => 5));

    Để giảm số lượng các dòng văn bản 5 sử dụng textarea_rows tùy chọn. Nhờ đó đã thay đổi, biên tập viên trông tốt hơn nhiều:

    RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


    Một vấn đề khác là khả năng cho người dùng để chèn hình ảnh – thường xuyên nhất, chúng tôi sẽ không muốn người dùng của chúng tôi để mất quá nhiều không gian trên máy chủ với nguồn lực bổ sung không cần thiết, vì vậy nó có giá trị vô hiệu hóa các nút để thêm media – để làm được điều này chúng ta có thể sử dụng các media_buttons tùy chọn:
    wp_editor( '', 'comment', array('teeny' => true,'textarea_rows' => 5,'media_buttons' => false));

    biên tập viên của chúng tôi đã bắt đầu trông khá gọn gàng khi mặt hàng này được lấy ra:

    RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


    Có một vấn đề nhỏ về hình ảnh ở đây – một trong những biểu tượng không phù hợp với chiều rộng của khu vực ý kiến – vì vậy bạn sẽ phải vứt bỏ nút ít nhất cần thiết – Cá nhân tôi sẽ loại bỏ các nút có thêm các gạch ngang để các văn bản; để làm được điều này, chúng tôi sẽ sử dụng MCE teeny nút bộ lọc và loại bỏ các nút thứ năm trong danh sách:
    add_filter( 'teeny_mce_buttons', 'gk_comment_form_no_strikethrough');function gk_comment_form_no_strikethrough($buttons) { unset($buttons[4]); return $buttons;}

    Nhờ các sửa đổi trên, biên tập viên của chúng tôi bây giờ trông gọn gàng và ngăn nắp và chiếm không gian tối thiểu:

    RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


    Vẫn còn có thêm một bổ sung – chế độ toàn màn hình, mà theo mặc định trông như thế này:

    RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


    Chúng tôi cũng có thể sử dụng chế độ Distarction Viết miễn phí bằng cách thêm một lựa chọn khác – dfw :
    wp_editor( '', 'comment', array('teeny' => true,'textarea_rows' => 5,'media_buttons' => false,'dfw' => true));

    Mà làm cho chế độ toàn màn hình nhìn và cảm thấy tốt hơn một chút, ít nhất là trong quan điểm của tôi!

    RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


    Nó có một cách rõ ràng để trở về chế độ chỉnh sửa bình thường, không giống như các chế độ toàn màn hình tiêu chuẩn, có thể làm giảm sự nhầm lẫn.

    Cuối cùng, nếu chúng ta muốn giảm kích thước của các biên tập viên hơn nữa chúng ta có thể loại bỏ các tab với sự lựa chọn giữa các chế độ WYSIWYG và văn bản – cho mục đích này, chúng ta có thể sử dụng tùy chọn quicktags :

    wp_editor( '', 'comment', array('teeny' => true,'textarea_rows' => 5,'media_buttons' => false,'dfw' => true,'quicktags' => false));

    Kết quả là phiên bản rút gọn hầu hết các trình soạn thảo WYSIWYG có thể có trong các ý kiến:

    RE: Thêm custom button vào TinyMCE editor wordpress Phần 2

    • 878
    • 5
    • 2
  • Lv2 on 16/07/2016 Plugin.

    3 – Danh sách lựa chọn – Listbox

    Việc thay thế cho menubutton là danh sách lựa chọn – listbox . Yếu tố đặc trưng của các danh sách lựa chọn là các tính năng như: Chiều rộng Cố định và giá trị. Tính năng đầu tiên là chịu trách nhiệm cho việc hạn chế các nội dung hiển thị với độ rộng thích hợp – tính năng thứ hai, mặt khác, bao gồm các yếu tố danh sách. Dưới đây bạn có thể tìm thấy các ví dụ về danh sách lựa chọn thêm danh sách các máy phát điện văn bản nhưlorem ipsum cho biên tập viên:

    (function() {
    tinymce.PluginManager.add('gk_tc_button2', function( editor, url ) {
    editor.addButton( 'gk_tc_button2', {
    title: 'My test button II',
    type: "listbox",
    fixedWidth: true,
    text: 'Lorem ipsum',
    values: [{
    text:'Lorem ipsum',
    value:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dolor lacus, sodales ac massa nec, vulputate tempor libero. In in nunc ut odio ullamcorper venenatis id sed augue. Mauris eget sem aliquam, fermentum metus vitae, dapibus nibh. Ut lobortis egestas congue. In posuere velit vel nisl tincidunt, non mattis augue sagittis. Aenean mattis at enim ac facilisis. Sed dui eros, pretium eget sapien adipiscing, dictum molestie tortor. Aenean consequat accumsan est id vestibulum. Phasellus vulputate tellus ante, ac convallis erat sagittis et. Nulla id risus sed quam vestibulum blandit.',
    onclick: function() {
    editor.insertContent(this.value());
    }},
    {
    text:'Gangsta lorem ipsum',
    value: 'Lorizzle funky fresh dolor yippiyo amizzle, sheezy adipiscing elizzle. Nullam sapien away, funky fresh volutpizzle, bling bling i\'m in the shizzle, gravida vizzle, uhuh ... yih!. Shit shit fo shizzle. Sed erizzle. Own yo\' izzle dolor turpis tempizzle fo shizzle. Maurizzle black fo shizzle mah nizzle fo rizzle, mah home g-dizzle izzle gizzle. Crunk izzle tortizzle. Pellentesque bling bling uhuh ... yih! crackalackin. In hac break it down platea dictumst. Black daahng dawg. Curabitizzle yippiyo things, pretizzle black, mattis go to hizzle, eleifend vitae, nunc. Yo mamma suscipizzle. Integizzle semper velit go to hizzle.',
    onclick: function() {
    editor.insertContent(this.value());
    }},
    {
    text:'Veggie ipsum',
    value: 'Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.',
    onclick: function() {
    editor.insertContent(this.value());
    }}]});
    });
    })();
    

    Như bạn có thể thấy, các nội dung của danh sách các yếu tố này là rất tương tự như danh sách được sử dụng trong một nút menu con.

    Hiệu quả là như sau:

    RE: Thêm custom button vào TinyMCE editor wordpress Phần 2

    • 878
    • 5
    • 2
  • Lv2 on 16/07/2016 Plugin.

    2 – Rõ ràng các câu hỏi ngay lập tức phát sinh; chính xác có bao nhiêu hàng nút là chúng ta có thể tạo ra? Thật không may, mce_buttons_10 không làm việc như chúng tôi có thể tạo ra tối đa là 4 hàng trong TinyMCE trong WordPress. Do đó, bộ lọc cuối cùng là mce_buttons_4 .

    Khi chúng ta đặt các nút trong các hàng khác hơn lần thứ nhất, chúng ta nên nhớ rằng những hàng được ẩn theo mặc định, vì vậy chúng tôi cần nhấp vào nút ‘mở rộng’ để xem các nút khác. Đó là lý do tại sao nó tốt hơn để đặt các nút của bạn trên hàng đầu tiên nếu có thể; để đảm bảo rằng họ vẫn còn trong tầm tay dễ dàng.

    Loại bỏ các nút biên tập viên

    Loại bỏ các nút hiện có là rất dễ dàng – thay vì thêm một yếu tố để bàn, chúng ta chỉ cần loại bỏ nó.

     function gk_remove_tmce_btns($buttons) { unset($buttons[0]); return $buttons; }
    add_filter('mce_buttons', 'gk_remove_tmce_btns'); 

    Các nút được lập chỉ mục trong bảng theo thứ tự giống như họ có thể nhìn thấy trong trình soạn thảo. Do đó, các mã trên sẽ loại bỏ các nút có thêm các hiệu ứng chữ đậm cho văn bản.

    wp_editor () và chế độ “teeny”

    Nó có thể là trường hợp đó, chúng tôi quyết định sử dụng các trình biên tập TinyMCE ở một nơi khác ngoài các ví dụ mục biên tập trong phần ý kiến. Sau đó, biên tập viên TinyMCE thường được viện dẫn trong chế độ đơn giản được gọi là teeny :

     wp_editor( '', 'comment', array( 'teeny' => true, 'quicktags' => false, 'media_buttons' => true )); 

    Chế độ này được đặc trưng bởi cấu trúc đơn giản của các biên tập viên – giới hạn chỉ là một hàng nút.

    Nó gây ra một sự thay đổi trong các bộ lọc mà chúng tôi sử dụng. Thay vì mce_buttons ,mce_buttons_2 , mce_buttons_3mce_buttons_4 lọc chúng tôi chỉ có một; cácteeny_mce_buttons lọc.

    Ngoài ra, chúng ta có thể hạn chế tải plugin trong chế độ này bằng cách sử dụng cácteeny_mce_plugins lọc.

    Vì vậy, nếu chúng ta muốn loại bỏ các nút đầu tiên từ trình soạn thảo, sau đó chúng tôi sử dụng đoạn mã sau:

     function remove_teeny_mce_btns($buttons) { unset($buttons[0]); return $buttons; }
    add_filter('teeny_mce_buttons', 'remove_teeny_mce_btns'); 

    Một số nút trong một – ButtonGroup

    Nó có thể dễ dàng được lập luận rằng chúng tôi đã quá trớn nó một chút bằng cách xác định các kịch bản riêng biệt cho hai nút. Nếu chúng ta muốn, chúng ta có thể tạo hai nút chỉ sử dụng một loại nút – ButtonGroup.

    Đây là loại nút có một mặt hàng đặc trưng, mà kéo bảng bao gồm các đối tượng xác định các nút:

     (function() { tinymce.PluginManager.add('gk_tc_button2', function( editor, url ) { editor.addButton( 'gk_tc_button2', { title: 'My test button II', type: "buttongroup", items: [ { title: 'First button', icon: 'icon dashicons-wordpress', onclick: function() { editor.insertContent('Hello World I'); }}, { title: 'Second button', type: 'menubutton', icon: 'icon dashicons-wordpress-alt', menu: [ { text: "Item I" }, { text: "Item II" }]}]}); }); })(); 

    Như bạn có thể thấy, chúng ta có thể xác định bất kỳ nút bằng cách sử dụng một kịch bản duy nhất. Tuy nhiên, giải pháp này có vấn đề hình ảnh:

    RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


    Trái ngược với sự xuất hiện, tôi đã không đặt các nút nhóm ở hàng thứ tư – đó là ở vị trí này vì các vấn đề kết nối với phong cách. Tôi cố định chúng với mã CSS sau thêm vàostyle.css file:
     .mce-toolbar .mce-container .mce-btn-group { display: inline-block; } 

    Câu trả lời được chấp nhận bởi codeHay. on 18/07/2016Earned 15 points.

    • 878
    • 5
    • 2