Каталог решений - Интеграция TinyMCE в 1С

На Инфостарте представлено довольно большое количество редакторов на основе 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».