IE 2016

Интеграция TinyMCE в 1С

Опубликовал Алексей Федоров (afedorov) в раздел Обмен - Интеграция с WEB

На Инфостарте представлено довольно большое количество редакторов на основе TinyMCE, но все они ограничиваются выводом редактора в поле HTML-документа в 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».

См. также

Лучшие комментарии

9. Поручик 30.10.2012 13:59
Другой способ вставить HTML в TinyMCE программно. Воспользоваться методом setContent() объекта tinyMCE.activeEditor.

	Если ВвестиСтроку(HTMLКонтент, "Введите строку", , Истина) Тогда

		//Перед передачей строки методу setContent экранируем одинарные и двойные кавычки во избежание ошибки.
		ЭкранированнаяСтрока = СтрЗаменить(СтрЗаменить(СтрЗаменить(HTMLКонтент, """", "\"""), "'", "\'"), Символы.ПС, "\n");
		Элементы.ПолеHTMLДокумента.Документ.parentWindow.eval("tinyMCE.activeEditor.setContent('" + 	ЭкранированнаяСтрока + "');");

	КонецЕсли; 
...Показать Скрыть
Ответили: (14)
+ 1 [ Boudybuilder; ]
# Ответить
16. Shkalar 10.08.2014 21:26
(15) Boudybuilder, (13) DefaultUsers, IE блокирует скрипты на локальных файлах, поэтому нужно либо страницу с веб сервера запускать, либо попробуйте добавить в начало страницы
<!do ctype html>
<!-- saved from url=(0014)about:internet -->




msdn.microsoft.com

P.S. doctype в одно слово, т.к. редактор сам переформатировал с пробелом
Ответили: (16)
+ 1 [ ivanov660; ]
# Ответить

Комментарии

1. Андрей Данилюк (DanilaDru) 07.02.2011 15:46
Спасибо, прикольные фишки озвучены. В рамках одного проекта начинал тоже с TinyMCE, а потом переполз на форматированный документ в 8.2.
# Ответить
2. Сергей Ожерельев (Поручик) 07.02.2011 22:15
Слухи ходят, глюкавый этот ваш форматированный документ в 8.2. Как впрочем и вся эта ваша 8.2.
# Ответить
3. Андрей Данилюк (DanilaDru) 07.02.2011 22:58
Спасибо. Для нужд проекта было достаточно.
# Ответить
4. Алексей Федоров (afedorov) 07.02.2011 23:17
TinyMCE тоже не сахар и может глючить. Редактирование этой статьи (редактирование на Инфостарте тоже в TinyMCE) вообще было кошмарным кошмаром.
# Ответить
5. Денис Яковлев (iceflash) 09.02.2011 13:15
"Всё такое "глючное", корявое, и поделочное"=)))))
Шлавное - что бы руки прямые были и голова ясная=)
# Ответить
6. Serg (spacedragon) 27.09.2011 19:02
А существует ли возможность с помощью такого подхода оформлять НТМЛ документ например с CSS и JS вставками? Конкретная ситуация требуется выполнять рассылки е-мейлов с "датчиком" перехода на конкретный сайт, чтобы понимать кто действительно заинтересован в нашей продукции, а кто нет?
Ответили: (7)
# Ответить
7. Андрей Данилюк (DanilaDru) 27.09.2011 20:45
(6)Может для рассылок такого рода стоит посмотреть в сторону MailChimp ? Сервис потом статистику дает по отосланной почте. Заодно и почта в спам не так часто попадает (по личным наблюдениям). На вскидку про использование можете посмотреть тут: http://danila.org.ua/?s=mailchimp
# Ответить
8. pvase (pvase) 24.09.2012 13:38
Спасибо большое. Нашел непонятный глюк. При вставке текста методом:
JScript = "tinyMCE.activeEditor.execCommand('mceInsertContent',false,'" + СокрЛП(Комент) + "');";
				Браузер.Объект.Document.parentWindow.ExecScript(JScript,"JavaScript");

Если текст является списком:

  • 1</LI>
  • 2
    </LI>

Выдает ошибка выполнения сценария в index.html.
Скачал с сайта последний TinyMCE 3.5.7 - не помогает.
Ответили: (10)
# Ответить
9. Сергей Ожерельев (Поручик) 30.10.2012 13:59
Другой способ вставить HTML в TinyMCE программно. Воспользоваться методом setContent() объекта tinyMCE.activeEditor.

	Если ВвестиСтроку(HTMLКонтент, "Введите строку", , Истина) Тогда

		//Перед передачей строки методу setContent экранируем одинарные и двойные кавычки во избежание ошибки.
		ЭкранированнаяСтрока = СтрЗаменить(СтрЗаменить(СтрЗаменить(HTMLКонтент, """", "\"""), "'", "\'"), Символы.ПС, "\n");
		Элементы.ПолеHTMLДокумента.Документ.parentWindow.eval("tinyMCE.activeEditor.setContent('" + 	ЭкранированнаяСтрока + "');");

	КонецЕсли; 
...Показать Скрыть
Ответили: (14)
+ 1 [ Boudybuilder; ]
# Ответить
10. Сергей Ожерельев (Поручик) 30.10.2012 14:13
(8) Смотрите предыдущий пост. Перед вставкой текста кавычки надо заэкранировать, а символы перевода строки перевести в unix-представление.
# Ответить
11. Илья Зиновьев (GanjaGod) 11.01.2013 01:38
как быть если tinyMCE используется как класс BODY, mceContentBody?
# Ответить
12. Максим Курило (MaxiMkaUA) 28.02.2013 13:29
Для большей уверенности Экранирование написать можно еще так

ЭкранированнаяСтрока = СтрЗаменить(СтрЗаменить(СтрЗаменить(СтрЗаменить(HTMLКонтент, """", "\"""), "'", "\'"), Символы.ПС, "\n"), Символы.ВК, "\n");

...Показать Скрыть
# Ответить
13. Name Fam (DefaultUsers) 23.07.2013 11:14
Народ, помогите решить проблему с интеграцией TinyMCE. Еще давным давно внедрил TinyMCE 3 версии в 1С:УТ, теперь решил обновиться до TinyMCE 4. Быстро накидал внешнюю обработку для отладки запуска, и ничего не работает! Уже сломал голову. На форме есть кнопка "Ааа", при нажатии должна открыться хтмл страница с загрузкой TinyMCE, но по каким-то причинам этого не происходит, хотя если открывать эту же страницу в браузере (IE, Chrome) всё работает отлично.
Эксплорер.Перейти(КаталогВременныхФайлов() + "TinyMCE\temp.html");
Ответили: (16)

Прикрепленные файлы:

TinyMCE.epf
# Ответить
14. Виталий Фантич (Boudybuilder) 23.07.2014 23:21
(9) Поручик, супер! Этот способ получше!
# Ответить
15. Виталий Фантич (Boudybuilder) 24.07.2014 02:13
Я тут столкнулся с проблемой. TinyMCE не хочет отображаться на управляемых формах на веб или на тонкомклиенте на другом компьютере в сети. Работает только на тонком клиенте на локальном компе. Вот как реализован ее вывод в полеHTMLдокумента на управляемой форме.

ВремФайл = ЭтаФорма.КаталогДанных + "temp.html";
    Т.Записать(ВремФайл, КодировкаТекста.ANSI);
    Эксплорер = ВремФайл;


А текст этого самого ВремФайл вот такой:

<HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" content="no-cache">
<script type="text/javascript" src="tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<!-- TinyMCE -->
<script type="text/javascript">
  tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
    entity_encoding : "raw",

    // Theme options
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,

    // Example content CSS (should be your site CSS)
    content_css : "[CSS]",

    // Drop lists for link/image/media/template dialogs
    template_external_list_url : "lists/template_list.js",
    external_link_list_url : "lists/link_list.js",
    external_image_list_url : "lists/image_list.js",
    media_external_list_url : "lists/media_list.js",

    // Replace values for the template plugin
    template_replace_values : {
      username : "Some User",
      staffid : "991234"
    }
  });
</script>
<!-- /TinyMCE -->
</HEAD><BODY>
<form method="" action="" onsubmit="return false;">
<textarea id="elm1" name="elm1" style="width: 100%;height:100%">

</textarea>
<script type="text/javascript">tinyMCE.init({ ... });</script></BODY></HTML>
...Показать Скрыть


В таком варианте работает только на локальной машине на ТонкомКлиенте. Как реализовать чтобы скрипты подхатывались и на веб или на другой машине на ТК в сети?
Ответили: (16)
# Ответить
16. Shkalar Shkalar (Shkalar) 10.08.2014 21:26
(15) Boudybuilder, (13) DefaultUsers, IE блокирует скрипты на локальных файлах, поэтому нужно либо страницу с веб сервера запускать, либо попробуйте добавить в начало страницы
<!do ctype html>
<!-- saved from url=(0014)about:internet -->




msdn.microsoft.com

P.S. doctype в одно слово, т.к. редактор сам переформатировал с пробелом
Ответили: (16)
+ 1 [ ivanov660; ]
# Ответить
Внимание! За постинг в данном форуме $m не начисляются.
Внимание! Для написания сообщения необходимо авторизоваться
Текст сообщения*
Прикрепить файл