添加按鈕，通過jQuery觸發html代碼片段到tinyMCE編輯器

我正在爲應用程序中的Tinymce編輯器工具欄添加一個按鈕，該按鈕將粘貼在編輯器中爲內容定製的內容表的html代碼。添加按鈕，通過jQuery觸發html代碼片段到tinyMCE編輯器

例如，對於在編輯器中找到的每個h級別標記（h1-h3），我想插入一段html（包含目錄*的div）以及粘貼<！ - nextpage- - >註釋標記逼到表的內容HTML片段之前的源標記。

有人能想出如何與TinyMCE的API，以一個按鈕添加到觸發本地jQuery的功能與編輯的內容進行交互編輯交互的實例教程？

我的HTML片段將是：

<!--nextpage--> 
<div class="toc"> 
    <h3>Table of Contents</h3> 
    <ul> 
     <li><a href="http://mysite.com/article-slug/">Introduction</a></li> 
     <li><a href="http://mysite.com/article-slug/2">First h1-h3 heading</a></li> 
     <li><a href="http://mysite.com/article-slug/3">Next h1-h3 heading</a></li> 
    </ul> 
</div>

但內容將被動態地此頁的jQuery基於網頁的網址和H1-H3元素的數量具體產生，從而使TOC是基於頁面結構爲用戶動態生成的。

來源

2012-12-23 RegEdit

一旦你發送頁面browser..wordpress變得irrelavant ..瀏覽器不知道WordPress的存在。您需要使用tinyMCE API將內容附加到編輯器。你使用它的編輯器API方法 – charlietfl

我將修改的問題，以避免混亂後，您可以操作使用jQuery編輯器的現有內容。 – RegEdit

您可以在'tinyMCE'編輯器中添加一個按鈕，也可以通過該按鈕插入新文本或短代碼，但我對您的問題感到困惑。 –

只是想給大家介紹如何在WordPress tinyMCE編輯器中添加一個按鈕，使用該按鈕內容插入編輯器的想法。在這個答案的底部，我提供了我的插件的鏈接，您可以直接下載它並查看源代碼。

以下代碼是直接從我的WordPress插件之一中直接複製的，我使用自定義button將該shortcode添加到了編輯器中。這段代碼去functions.php

add_action('init', 'my_js_fiddle_init'); 
function my_js_fiddle_init() { 
    if (! current_user_can('edit_posts') && ! current_user_can('edit_pages')) { 
     return; 
    } 
    if (get_user_option('rich_editing') == 'true') { 
     // call the add_plugin function to register the plugin(js) for tinyMCE 
     add_filter('mce_external_plugins', 'add_plugin'); 
     // call the function register_button to add a new button in the editor 
     add_filter('mce_buttons', 'register_button'); 
    } 
} 

function register_button($buttons) { 
    array_push($buttons, "|", "wpjsfiddle"); 
    return $buttons; 
} 

function add_plugin($plugin_array) { 
    //$plugin_array['wpjsfiddle'] = plugins_url('js/wp_js_fiddle.js', __FILE__); 
    $plugin_array['wpjsfiddle'] ="tinyMCE_plugin_file"; 
    return $plugin_array; 
}

這是你tinyMCE插件，創建一個js文件，並把代碼這個文件中，比如你可以將其命名tinyMCE_plugin_file.js，我在add_plugin函數中使用這個名字

(function() { 
    tinymce.create('tinymce.plugins.wpjsfiddle', { 
     init : function(ed, url) { 
      ed.addButton('wpjsfiddle', { 
       title : 'Insert Js Fiddle', 
       image : url+'/images/jsfiddle-icon.png', 
       onclick : function() { 
       var contentToInsert='this line will be inserted'; // change this 
       ed.execCommand('mceInsertContent', false, contentToInsert); 
      } 
      }); 
     }, 
     createControl : function(n, cm) { 
     return null; 
     }, 
     getInfo : function() { 
     return { 
      longname : "Wp Js Fiddle", 
      author : 'Sheikh Heera', 
      authorurl : 'http://heera.it', 
      version : "1.0" 
     }; 
     } 
    }); 
    tinymce.PluginManager.add('wpjsfiddle', tinymce.plugins.wpjsfiddle); 
})();

另外你也可以從WordPress插件目錄download my plugin並且可以查看源代碼。希望它有一點幫助。

來源

2012-12-23 16:48:30

+1謝謝謝謝！ – RegEdit

@RegEdit，歡迎您:-) –

添加按鈕，通過jQuery觸發html代碼片段到tinyMCE編輯器

回答

相關問題