Прошло некоторое время с тех пор, как этот вопрос был задан, но, поскольку я сейчас делаю то же самое, я подумал, что поделюсь своими открытиями и решениями по этому поводу. :)
Я расширяю 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;
}
напишите собственный плагин, который вводит новые теги и помещает его в каталог плагинов. Я позвонил своему 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",
});
Теперь редактор выглядит так:
и источник, как в вашем примере:
person
keenthinker
schedule
05.03.2014
