gifts2017

Визуальный html редактор на управляемых формах

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

Мы рассмотрим некоторые особенности и возможности подключения сторонних визуальных html редакторов на javascript - TinyMCE, CK Editor.
С помощью приложенной обработки Вы сможете попробовать в действии полноценный и удобный визуальный html редактор, а при желании перенести подобный функционал к себе.

На текущий момент самыми популярными и "живыми" html визуальными редакторами являются TinyMCE и CK Editor - они обладают широкой функциональностью и наличием большого количества плагинов. Скачать текущие сборки этих редакторов можно с официальных сайтов.

Что может предложить платформа 1С? В платформе 1С есть встроенный редактор - форматированный документ. На наш скромный взгляд, использование типового встроенного редактора обладает рядом ограничений и не позволяет довольно комфортно проводить визуальное редактирования документа. 

Где использовать данный функционал? Одна из основных сфер использования html редакторов в конфигурациях, работающих с почтовыми сообщениями, - различные help desk, CRM и др.

Краткое описание возможностей примера: 

  • пример выполнен в форме внешней обработки на управляемых формах;
  • добавлен переключатель между двумя типами редакторов;
  • для демонстрации минимальных возможностей взаимодействия добавлены две команды: для получения и установки кода html;
  • реализовано разделение кода между тонким и веб клиентом. 

Особенности и советы.

1. Как узнать количество картинок и получить массив картинок на html странице? Используйте объект document и свойство images. Массив ссылок на картинки находится в document.images[], количество ссылок на картинки можно получить из document.images.length.

2. Некоторые команды для CK Editor на JS:

вставить контент: CKEDITOR.instances.editor1.setData(str);  // не забываем удалить в строке str переносы строк

получить контент: CKEDITOR.instances.editor1.getData();

получить выделенный текст: CKEDITOR.instances.editor1.getSelection().getSelectedText();

3. Некоторые команды для TinyMCE:

вставить контент: tinyMCE.activeEditor.setContent('str'); // не забываем удалить в строке str переносы строк

получить контентtinyMCE.activeEditor.getContent();

вставить картинку (или другой тег в html документ)

var ed = tinyMCE.get('editor1');        // get editor instance
var newNode = ed.getDoc().createElement ( "img" );// create img node
newNode.src = "путь";                           // add src attribute
newNode.alt="это картинка";
newNode.width="100";
newNode.height="100";
ed.execCommand('mceInsertContent', false, newNode.outerHTML);

4. Для использования в веб клиенте библиотеки этих редакторов необходимо разместить вручную в каталоге веб сервера, настроить разрешение на доступ к этим директориям. Для выгрузки необходимых файлов в обработке реализована команда "выгрузить библиотеки для веб".

5. Как в веб клиенте (браузере) выполнить JS?

  • для ie: Элементы.ПолеHTMLДокумента.Документ.parentWindow.eval(JS);
  • для других: Элементы.ПолеHTMLДокумента.Документ.defaultView.eval(JS);

Скачать файлы

Наименование Файл Версия Размер
визуальный html редактор 97
.epf 1,75Mb
30.09.15
97
.epf 29.09.15 1,75Mb Скачать

См. также

Подписаться Добавить вознаграждение

Комментарии

1. vadim vadim (fvadim) 07.10.15 10:03
В первом предложении должно быть 'javascript'
jscript != javascript
2. ivanov660 ivanov660 (ivanov660) 07.10.15 10:33
(1) fvadim, спс, поправил опечатку
3. Denis Rezinkov (Denchik1388) 13.11.15 11:57
CKEDITOR не работает у меня через citrix
4. Denis Rezinkov (Denchik1388) 13.11.15 11:59
И спасибо за 5й пункт, я не знал, пришлось пользоваться так ЭлементыФормы.Браузер.Navigate("javascript: " + JS_Код)
5. ivanov660 ivanov660 (ivanov660) 14.11.15 18:53
(3) Denchik1388, принципиальной разницы в интеграции этих редакторов нет. Однако, стоит обратить на версии браузеров (про совместимость можно узнать на официальных ресурсах) с очень древними будут очевидно проблемы.
Если же используете web-клиента для 1С, то тут естественно есть определенные особенности как в работе приложения, так и с доступом к библиотекам.
Для написания сообщения необходимо авторизоваться
Прикрепить файл
Дополнительные параметры ответа