Thành viên codeHay
Lv2
142
điểm

Câu hỏi
36

Trả lời
7

Chia sẻ code hay để học hỏi
  • Lv2 on 25/11/2016 CSS.

    Show hide Animation css

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    .container {
    background-color: rgba(0,0,0,0);
    -webkit-background-clip: text;
    /* uncomment following line to see the trick in actions */
    /* -webkit-text-fill-color: transparent; */
    transition: background-color .8s;
    }
    .container:hover {
    background-color: rgba(0,0,0,0.18);
    }
    .container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    }
    .container::-webkit-scrollbar-track {
    display: none;
    }
    .container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: inherit;
    }
    }
    

    • 529
    • 1
    • 0
  • Lv2 on 30/07/2016 Plugin.

    Em test đâu thấy hiện tượng này nhỉ? Để em xem lại xem sao

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

    Cùng chức năng như http://demo.designwall.com/dw-tinymce-imgur-upload mà tiết kiệm được tận 17$. Thanks tác giả

    • 8176
    • 11
    • 2
  • Lv2 on 18/07/2016 Ajax jQuery.

    Plugin hay quá. Bao giờ thì có phần 2 vậy?

    • 1514
    • 1
    • 4
  • Lv2 on 16/07/2016 Plugin.

    5 – Thêm Nút Chế độ toàn màn hình

    WordPress có một thời gian cung cấp một chế độ toàn màn hình khi tạo bài viết hoặc các trang, cho phép bạn tập trung hoàn toàn vào văn bản (trong một số biên tập viên chế độ này được gọi là “Thiền chế độ” hoặc đơn giản là “Distraction miễn phí Viết”). Nếu bạn hoặc người dùng quan tâm trong việc sử dụng các tùy chọn toàn màn hình, nó có giá trị học tập như thế nào để thêm các nút riêng của bạn để chế độ này của trình biên tập để nâng cao hoặc đơn giản hóa các kinh nghiệm viết. Tuy nhiên, chúng ta phải nhấn mạnh rằng việc thêm nút để các biên tập đầy đủ màn hình khá khác nhau để thêm các nút để trình biên tập TinyMCE chuẩn.

    Hãy bắt đầu với các khuôn khổ cơ bản của plugin:

    add_action('admin_head', 'wordup_add_fullscreen_button');
    add_action('admin_enqueue_scripts', 'wordup_add_css');
    function wordup_add_fullscreen_button() {
    global $typenow;
    // sprawdzamy czy user ma uprawnienia do edycji postów/podstron
    if ( !current_user_can('edit_posts') && !current_user_can('edit_pages') )
    return;
    // weryfikujemy typ wpisu
    if( ! in_array( $typenow, array( 'post', 'page' ) ) )
    return;
    // sprawdzamy czy user ma włączony edytor WYSIWYG
    if ( get_user_option('rich_editing') == 'true') {
    add_filter( 'wp_fullscreen_buttons', 'wordup_add_button_to_fullscreen_editor' );
    }
    }
    function wordup_add_button_to_fullscreen_editor( $buttons ){
    return $buttons;
    }
    function wordup_add_css() {
    wp_enqueue_style('wordup-tinymce', plugins_url('/style.css', __FILE__));
    }
    

    Trong thực tế, các mã trên là rất giống với mã mà chúng tôi sử dụng khi tạo plugin tiêu chuẩn cho TinyMCE. Sự khác biệt chính là các dòng sau:
    add_filter( 'wp_fullscreen_buttons', 'wordup_add_button_to_fullscreen_editor' );
    

    Đó là trách nhiệm cho việc thêm nút chúng ta – như bạn có thể thấy chúng tôi đã sử dụng wp toàn màn hình nút lọc thay vì tiêu chuẩn một: mce_buttons .
    Sự khác biệt lớn không trở nên đáng chú ý cho đến khi chúng tôi bắt đầu xác định nút – chúng ta thêm nút của chúng tôi bằng cách tạo ra một mảng kết hợp:
    function wordup_add_button_to_fullscreen_editor( $buttons ){
    $buttons['IKONA'] = array(
    'title' => 'NAZWA',
    'onclick' => "AKCJA",
    'both' => false
    );
    return $buttons;
    }
    

    Như chúng ta có thể thấy các định nghĩa trên của nút bao gồm tên biểu tượng của nó, đó cũng là tên của các nút và nhận dạng của nó trong danh sách các nút toàn màn hình trong trình soạn thảo. các danh hiệu field defines the hint which will be displayed when the cursor hovers on our button. In the onclick field we define the JavaScript code which will be run after the button is clicked – due to this we won’t use an external JS file; instead, we will define the button’s behavior just once, in the array. The last field, both, is a flag that determines whether our button will be visible in both editor modes – either both the visual and text mode, or just visually.

    Hãy bắt đầu với phiên bản cơ bản của nút chỉ làm việc trong chế độ trực quan của biên tập viên:

    function wordup_add_button_to_fullscreen_editor( $buttons ){
    $buttons['icon dashicons-wordpress'] = array(
    'title' => 'WordPress button',
    'onclick' => "tinyMCE.activeEditor.insertContent('Hello World!');",
    'both' => false
    );
    return $buttons;
    }
    

    Chúng tôi đã viết các mã trên mang trong tâm trí thực tế rằng mã Plugin cơ sở của tôi bao gồm một hướng dẫn để có được các biểu tượng từ Dashicons; đó là lý do tại sao tôi đặt tên plugin của tôi biểu tượng dashicons-wordpress . Chúng tôi đạt được quyền truy cập vào các biên tập viên với một tinyMCE.activeEditor đối tượng, đó là một bí danh cho tinyMCE.editors [0] đối tượng. Sau khi tải plugin soạn thảo màn hình đầy đủ của chúng tôi trông như sau:

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


    Nhưng nếu chúng ta muốn nút của chúng tôi để xuất hiện trong chế độ văn bản của trình biên tập toàn màn hình? Có vẻ như ban đầu mà bạn chỉ muốn cần phải thay thế cả hai lá cờ với sự thật :
    function wordup_add_button_to_fullscreen_editor( $buttons ){
    $buttons['icon dashicons-wordpress'] = array(
    'title' => 'WordPress button',
    'onclick' => "tinyMCE.activeEditor.insertContent('Hello World!');",
    'both' => true
    );
    return $buttons;
    }
    

    Nhưng sau khi thực hiện thay đổi này, nút của chúng tôi thực sự xuất hiện trong tab thứ hai và không hoạt động khi chúng ta nhấp vào nó. Điều này là do thực tế là các văn bản chế độ không sử dụng các trình biên tập TinyMCE, vì vậy nó đòi hỏi tay thêm mã JavaScript để xử lý các hành động trên nhấp chuột. Các mã đúng của trình biên tập văn bản thay vì phải thực hiện như sau:
    function wordup_add_button_to_fullscreen_editor( $buttons ){
    $buttons['icon dashicons-wordpress'] = array(
    'title' => 'WordPress button',
    'onclick' => "if(tinyMCE.activeEditor) {
    tinyMCE.activeEditor.insertContent('Hello World!');
    } else {
    var cursor = jQuery('#content').prop('selectionStart');
    if(!cursor) cursor = 0;
    var content = jQuery('#content').val();
    var textBefore = content.substring(0, cursor );
    var textAfter = content.substring( cursor, content.length );
    jQuery('#content').val( textBefore + 'Hello World!' + textAfter );
    }",
    'both' => true
    );
    return $buttons;
    }
    

    Trước hết, chúng ta kiểm tra xem tinyMCE.activeEditor đối tượng tồn tại – sau khi chuyển sang một trình soạn thảo văn bản, đối tượng này là trống đó cho phép chúng ta dễ dàng biết các chế độ soạn thảo toàn màn hình được kích hoạt. Sau đó, chúng tôi sử dụng JavaScript API cho phép chúng tôi để đọc các vị trí con trỏ trong textarea lĩnh vực, mà trong trường hợp của một trình soạn thảo toàn màn hình có nội dung ID. Dựa vào vị trí của con trỏ, bây giờ chúng ta có thể phân chia các nội dung của một trường văn bản để hai dây – trước và sau khi con trỏ. Sau đó, chúng ta chèn văn bản của chúng tôi giữa họ và các văn bản kết quả được đặt trở lại vào trong hộp.

    • 879
    • 5
    • 2
  • Lv2 on 15/07/2016 Plugin.

    1 – Chúng tôi chỉ đơn giản là thêm một mặt hàng khác trong plugin_array $ bảng kết hợp và thay đổi cách đặt tên hơi – bây giờ mỗi nút có một tên chung kết thúc với số của nút – họ sẽ giúp chúng ta phân biệt các nút của chúng tôi với nhau. Tên của các kịch bản có thể được bất cứ điều gì bạn muốn.

    Bây giờ, chúng tôi đã thêm các plugin của chúng tôi và bây giờ chúng tôi là trái với việc thêm nút của chúng tôi vào danh sách các nút trong TinyMCE sử dụng mce_buttons lọc:

     function gk_register_my_tc2_button($buttons) { array_push($buttons, "gk_tc_button1"); array_push($buttons, "gk_tc_button2"); return $buttons; } 

    Như bạn có thể thấy ở trên, chúng tôi một lần nữa sử dụng các tên mà chúng ta đã quen thuộc với.Chúng tôi có thể lặp lại lược đồ này nhiều lần chúng ta muốn, mặc dù chúng ta phải nhớ không để lạm dụng nó như là một số plugin mỗi thêm một vài nút có hiệu quả có thể thùng rác trình soạn thảo. Nếu có thể, chúng tôi chỉ cần tạo ra một lượng nhỏ của các nút cho các mục đích của chúng tôi, mang trong tâm trí cùng một lúc mà chúng ta không phải là tác giả Plugin chỉ đó sẽ được sử dụng chức năng này.

    Kịch bản đầu tiên ( custom-icon-button.js ), so với trước đó, đã thay đổi một chút – chúng tôi đã đổi tên thành gk_tc_button1 :

     (function() { tinymce.PluginManager.add('gk_tc_button1', function( editor, url ) { editor.addButton( 'gk_tc_button1', { title: 'My test button I', icon: 'icon gk-own-icon', onclick: function() { editor.insertContent('Hello World I'); } }); }); })(); 

    Kịch bản thứ hai (second-button.js ) cũng có một cái tên mới:
     function() { tinymce.PluginManager.add('gk_tc_button2', function( editor, url ) { editor.addButton( 'gk_tc_button2', { title: 'My test button II', icon: 'icon dashicons-wordpress', onclick: function() { editor.insertContent('Hello World II'); } }); }); })(); 

    Hai nút sẽ xuất hiện trong trình soạn thảo:

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

    Khi không có chỗ cho các nút bấm

    Buttons đã được bổ sung gần đây xuất hiện trên thanh nút có thể nhìn thấy đầu tiên. Tuy nhiên, đôi khi không có nhiều không gian đó để làm việc với – may mắn thay, chúng tôi có thể thêm các nút của chúng tôi đến hàng thứ hai; tất cả chúng ta cần phải làm là thay đổi tên bộ lọc từ mce_buttons đểmce_buttons_2 như sau

     add_filter('mce_buttons_2', 'gk_register_my_tc2_button'); 

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


    Hơn nữa, chúng tôi thậm chí có thể tạo ra một hàng nút, mà không tồn tại trong một cài đặt WordPress sạch. Chỉ cần sử dụng mce_buttons_3 lọc:
     add_filter('mce_buttons_3', 'gk_register_my_tc2_button'); 

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

    • 879
    • 5
    • 2
  • Lv2 on 15/07/2016 Plugin.

    Thêm popup sau khi nhấn

    Cho đến nay, chúng tôi đã được hạn chế mình để chèn các giá trị văn bản cụ thể cho các biên tập viên, nhưng điều này sẽ không phải luôn luôn là một giải pháp đầy đủ. Hãy làm một cái gì đó mà sẽ cho phép người sử dụng để xác định một số các văn bản bổ sung – hãy sử dụng các popup xuất hiện khi bạn nhấn vào nút:

    onclick: function() {
    editor.windowManager.open( {
    title: 'Insert h3 tag',
    body: [{
    type: 'textbox',
    name: 'title',
    label: 'Your title'
    }],
    onsubmit: function( e ) {
    editor.insertContent( '<h3>' + e.data.title + '</h3>');
    }
    });
    }
    

    Đoạn mã trên sẽ gây ra một popup để hiển thị với một chỉ dẫn để chèn nội dung của chỉ số h3:

    RE: Thêm custom button vào TinyMCE editor wordpress

    Như chúng ta có thể thấy các onsubmit kết quả tài sản trong văn bản được thêm vào trình biên tập sau khi thay đổi được thực hiện bởi người sử dụng đều được chấp nhận.

    Tăng cường Popup

    Chúng tôi chắc chắn có thể tạo popup tăng cường hơn:

    RE: Thêm custom button vào TinyMCE editor wordpress


    Popup trên sử dụng hai lĩnh vực của textbox loại và một trong những listbox loại:
    onclick: function() {
    editor.windowManager.open( {
    title: 'Insert header tag',
    body: [{
    type: 'textbox',
    name: 'title',
    label: 'Your title'
    },
    {
    type: 'textbox',
    name: 'id',
    label: 'Header anchor'
    },
    {
    type: 'listbox',
    name: 'level',
    label: 'Header level',
    'values': [
    {text: '<h3>', value: '3'},
    {text: '<h4>', value: '4'},
    {text: '<h5>', value: '5'},
    {text: '<h6>', value: '6'}
    ]
    }],
    onsubmit: function( e ) {
    editor.insertContent( '<h' + e.data.level + ' id="' + e.data.id + '">' + e.data.title + '</h' + e.data.level + '>');
    }
    });
    }
    

    Các mã từ các ví dụ sau đây cũng có thể được tìm thấy trên Github .

    • 1415
    • 1
    • 0