На Инфостарте представлено довольно большое количество редакторов на основе TinyMCE, но все они ограничиваются выводом редактора в поле HTML-документа в 1С. При этом остаются вопросы как взаимодействовать с редактором, получать и вставлять текст, обрабатывать нажатия, т.е. как полноценно интегрировать редактор в 1С. Я постараюсь ответить на некоторые вопросы:
Как вставить текст в TinyMCE при запуске редактора?
В HTML-файле редактора обязательно присутствует элемент textarea, к которому и прикрепляется редактор TinyMCE в виде оболочки. В этот элемент надо вставить свой текст, например:
<textarea id="content" name="content" style="width:100%">тут ваш текст</textarea>
Вставить можно различными способами, например поиском и заменой текста в файле.
Как вставить HTML в TinyMCE программно?
JScript = "tinyMCE.activeEditor.execCommand('mceInsertContent',false,'" + Текст + "');";
ПолеHTMLДокумента.Документ.parentWindow.ExecScript(JScript,"JavaScript");
Как создать ссылку из выделенного текста в TinyMCE?
JScript = "
|text = tinyMCE.activeEditor.selection.getContent(" + Формат + ");
|tinyMCE.activeEditor.selection.setNode(tinyMCE.activeEditor.dom.create('a', {href : '" + ТекстСсылки + "'}, text));";
ПолеHTMLДокумента.Документ.parentWindow.ExecScript(JScript,"JavaScript");
Как получить введенный HTML из редактора TinyMCE?
HTMLКонтент = ПолеHTMLДокумента.Документ.parentWindow.eval("tinyMCE.activeEditor.getContent()");
Как получить выделенную область в TinyMCE?
Чтобы получить выделенный текст выполните команду:
ВыделенныйТекст = ПолеHTMLДокумента.Документ.parentWindow.eval("tinyMCE.activeEditor.selection.getContent()");
Чтобы получить ноду выделенной области выполните команду:
Нода = Редактор.Документ.parentWindow.eval("tinyMCE.activeEditor.selection.getNode()");
Как перехватить нажатие кнопки TinyMCE?
У каждой кнопки и бордюра кнопки есть свой className. Его можно получить при нажатии кнопки в поле HTML-документа. Gjckt после этого можно остановить дальнейшее действие при нажатии на кнопку и выполнить свое, например:
Процедура ПолеHTMLДокументаonmousedown(Элемент, pEvtObj)
className = pEvtObj.srcElement.className;
Если className = "mceIcon mce_link"
Или className = "mceButton mce_link mceButtonEnabled"
Или className = "mceButton mceButtonEnabled mce_link mceButtonActive" Тогда
далее останавливаем либо командой:
pEvtObj.returnValue = false;
либо
pEvtObj.CancelBubble = true;
Ну и некоторые настройки для запуска редактора. Прописываются в HTML-файле редактора:
Как растянуть область ввода редактора на все поле HTML-документа?
tinyMCE.init({
…
plugins: "…, fullscreen, …",
…
oninit: function()
{
tinyMCE.get('content').execCommand('mceFullScreen');
}
});
Как подключить проверку орфографии?
tinyMCE.init({
…
plugins : "…, spellchecker, …",
…
spellchecker_languages : "+Русский=ru,English=en",
spellchecker_rpc_url : "http://speller.yandex.net/services/tinyspell",
spellchecker_word_separator_chars : '\\s!"#$%&()*+,./:;<=>?@[\]^_{|}\xa7\xa9\xab\xae\xb1\xb6\xb7\xb8\xbb\xbc\xbd\xbe\u00bf\xd7\xf7\xa4\u201d\u201c',
…
});
Как убрать панель статуса в TinyMCE?
tinyMCE.init({
…
theme_advanced_statusbar_location : "none",
…
});
Как изменить цвет TinyMCE?
Редактор имеет свой цвет панели и дополнительных окон. Чтобы раскрасить его в цвет формы 1С нужно в файлах редактора:
\tiny_mce\themes\advanced\skins\default\content.css
\tiny_mce\themes\advanced\skins\default\dialog.css
\tiny_mce\themes\advanced\skins\default\ui.css
найти текст « #F0F0EE» и заменить его своим, например «#EAE5D8».
