微小的MCE添加自定義的HTML標籤

我使用微型4.3.3鏌鋣我需要添加一個微小的MCE添加自定義的HTML標籤

<p class="classname"> 
<em class="openImg"></em> 
    Some randome Input text by the user 
<em class="closeImg"></em> 
</p>

我不介意是一個額外的菜單項或在段落下拉菜單。我只是想盡可能減少耗時的工作。

我已經試過這http://alexzag.blogspot.co.uk/2009/12/custom-tags-in-tinymce.html但不知何故這不起作用。

任何人都可以指向我一個很好的教程或告訴我，我怎麼可能是圖標或名稱添加到下拉菜單中自動與正確的類創建p和EM標籤嗎？感謝

來源

2013-03-14 Jonathan Thurft

它已經有一段時間有人問，但我目前正在做完全一樣的，我想我分享我的發現和解決有關此事。 :)

我伸出TinyMCE的在工作中的測試項目，我們的解決方案需要自定義標籤 - 在一些人的用戶應該能夠進入只有一條線，在其他人（如您的EM）很多的文字。

步驟來完成，以達到理想的解決方案：

告訴TinyMCE的編輯器，你的元素是好使用兩個配置關鍵字extended_valid_elements和custom_elements：

tinymce.init({ selector: "textarea#editor", // ... extended_valid_elements : "emstart,emend", custom_elements: "emstart,emend", content_css: "editor.css" });
爲打開和關閉標籤創建兩個圖像。我將其命名爲emstart.png和emend.png的例子。

創建自定義的CSS樣式爲您定製的元素，並把它們放到自定義CSS文件（即在TinyMCE的配置中指定的一個，在我的情況editor.css）：

emstart { background: url(emstart.png) no-repeat; background-position: left -3px top -3px; padding: 10px 10px 5px 10px; background-color:#aabbcc; border:1px dotted #CCCCCC; height:50px; width:100px; }

emend { background: url(emend.png) no-repeat; background-position: left -3px bottom -3px; padding: 5px 10px 10px 10px; background-color:#aabbcc; border:1px dotted #CCCCCC; height:50px; width:100px; }

編寫一個自定義插件，輸入新標籤並將其放入plugins目錄。我打電話給我的customem：

插件代碼：

tinymce.PluginManager.add('customem', function(editor, url) { // Add a button that opens a window editor.addButton('customEmElementButton', { text: 'Custom EM', icon: false, onclick: function() { // Open window editor.windowManager.open({ title: 'Please input text', body: [ {type: 'textbox', name: 'description', label: 'Text'} ], onsubmit: function(e) { // Insert content when the window form is submitted editor.insertContent('<emstart>EM Start</emstart><p>' + e.data.description + '</p><emend>EM End</emend>'); } }); } }); // Adds a menu item to the tools menu editor.addMenuItem('customEmElementMenuItem', { text: 'Custom EM Element', context: 'tools', onclick: function() { editor.insertContent('<emstart>EM Start</emstart><p>Example text!</p><emend>EM End</emend>'); } }); });

的最後一步是將您的自定義插件加載到編輯器（使用插件和工具欄配置選項）和享受結果：

tinymce.init({ selector: "textarea#editor", height: "500px", plugins: [ "code, preview, contextmenu, image, link, searchreplace, customem" ], toolbar: "bold italic | example | code | preview | link | searchreplace | customEmElementButton", contextmenu: "bold italic", extended_valid_elements : "emstart,emend", custom_elements: "emstart,emend", content_css: "editor.css", });

編輯器現在看起來是這樣的：

和源就像你的例子：