HTML редактор/editor (Wysiwyg) для WebKit 1С (CMS, B2B), альтернатива TinyMCE и стандартному ФорматированныйДокумент

28.12.20

Интеграция - WEB-интеграция

Suneditor - отличная замена HTML редактору TinyMCE (бесплатному), в публикации с открытым кодом подключим его в 1С с WebKit, скачать HTMLeditor обработку можно бесплатно.

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

Наименование Файл Версия Размер
HTML редактор/editor (Wysiwyg) для WebKit 1С (CMS, B2B), альтернатива TinyMCE и стандартному ФорматированныйДокумент.
.epf 631,79Kb
439
.epf 631,79Kb 439 Скачать бесплатно

Разрабатывая CMS системы на базе 1С (подсистема EDIbot) нам понадобилось предоставить пользователю возможность самостоятельного оформления HTML контента, в частности оформления описаний акций распродаж и специальных предложений для B2B-портала с одновременным просмотром результата редактирования. При оформлении акции пользователю требовались таблицы (чего нет в стандартном форматированном документе), оформление текста, возможность создания своих плагинов, локальная работа HTML редактора - поэтому в качестве Wysiwyg редактора HTML выбрали Suneditor (http://suneditor.com, поддерживает в том числе режимы - Inline, Ballon, Ballon-always).  

(здесь я рассматривал работу стандартного объекта ФорматированныйДокумент - Выгрузка HTML описаний с картинками (Base64) товаров на сайт/интернет-магазин/B2B, разберем регулярное выражение получения тега body, ПолучитьHTML, ФорматированныйДокумент)

 

Вот как это выглядит - пользователь может указать шаблон оформления страницы (например, цвет фона), шаблон страницы, а также описать саму акцию используя необходимые элементы оформления (таблицы, шрифты, цвета, и т.п.)

 

Теперь разберем, как такое Вам сделать у себя, используя 1С платформу с WebKit (начиная с 8.3.14 релиза).

Пример будем делать в тестовой обработке, вот скрин-шот:

(слева и справа у нас визуальный HTML редактор, редактировать можно в любой стороне - изменения будут отображены в противоположной стороне)

 

Подготовим index.html - HTML editor на базе Suneditor

Итак, сначала мы подключаем JS HTML редактора:

  <link href="suneditor/dist/css/suneditor.min.css" rel="stylesheet">
  <script src="suneditor/dist/suneditor.min.js"></script>
  <script src="suneditor/lang/ru.js"></script>

 

Далее, чтобы в WebKit отслеживать события визуального редактора, мы разместим в HTML невидимую кнопку и будем ее нажимать при событии onChange:

<button id="onChange" style="display: none"></button>

 

Событие onChange на кнопку мы повесим при инициализации нашего HTML editor в JS wrapper1C, также выполним настройку доступных нам кнопок, языковую поддержку:

function Init() {

    const editor = SUNEDITOR.create(
      document.getElementById('editorHTML'),
      {
        fullPage: true,
        buttonList: [
          ['undo', 'redo'],
          ['font', 'fontSize', 'formatBlock'],
          ['paragraphStyle', 'blockquote'],
          ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
          ['fontColor', 'hiliteColor', 'textStyle'],
          ['removeFormat'],
          ['outdent', 'indent'],
          ['align', 'horizontalRule', 'list', 'lineHeight'],
          ['table', 'link', 'image', 'video', 'audio'],
          ['fullScreen', 'showBlocks', 'codeView'],
          ['print']
        ],
        lang: SUNEDITOR_LANG['ru']
      }
    )

   editor.onChange = function(contents, core) {onChange.click()};

   return editor
}

 

Добавим в index.html блок с нашим "editorHTML":

<textarea id="editorHTML" style="width: 100%; height: 100%;">Hi</textarea>

 

В итоге наш index.html будет выглядеть следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML editor</title>
  <link href="suneditor/dist/css/suneditor.min.css" rel="stylesheet">
  <script src="suneditor/dist/suneditor.min.js"></script>
  <script src="suneditor/lang/ru.js"></script>
  <script src="suneditor/dist/wrapper1c.js"></script>
</head>
<body>
  <textarea id="editorHTML" style="width: 100%; height: 100%;">Hi</textarea>
  <button id="onChange" style="display: none"></button>
</body>
</html>

 

Следующий шаг - это автоматически разворачивать HTML компонент - index.html и все его JS в общую папку или некую временную. Поэтому запакуем это в архив zip и разместим в макете обработки. Кстати, альтернативным вариантом является разворачивание и настройка IIS сервера и открытие HTML редактора по его адресу. 

 

Теперь сделаем все на стороне 1С, для начала установим компонент (HTML formatter):

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	
	ОписаниеHTML 		= УстановитьHTMLEditor();
	ОписаниеHTMLКлон 	= УстановитьHTMLEditor();
	
КонецПроцедуры

 

&НаСервере
Функция УстановитьHTMLEditor() экспорт
	
	РабочийКаталог = КаталогПрограммы(); //тут пишем  общую папку
	
	КаталогКомпоненты = "EDIbotHTMLEditor";
	
	КаталогНаДиске = Новый Файл(РабочийКаталог+КаталогКомпоненты);
	Если НЕ КаталогНаДиске.Существует() Тогда
				 
		Чтение = Новый ЧтениеДанных(РеквизитФормыВЗначение("Объект").ПолучитьМакет("EDIbotHTMLEditor"));
		
		Файл = Новый ЧтениеZipФайла(Чтение.ИсходныйПоток());
		
		Файл.ИзвлечьВсе(РабочийКаталог+КаталогКомпоненты);
		
	КонецЕсли;

	Возврат РабочийКаталог+КаталогКомпоненты+"\index.html";
КонецФункции

 

Дальше, после формирования документа сделаем инициализацию HTML editor, установим фокус на один из них и откроем оба на полный экран:

&НаКлиенте
Перем editorHTML, editorHTMLClone, ПрограмнноеИзменение;

&НаКлиенте
Процедура ОписаниеHTMLДокументСформирован(Элемент)
	
	editorHTML = Элементы.ОписаниеHTML.Документ.defaultView.Init();
		
	editorHTML.core.commandHandler(, "fullScreen");

	editorHTML.core.focus();
	
КонецПроцедуры

&НаКлиенте
Процедура ОписаниеHTMLКлонДокументСформирован(Элемент)
	
	editorHTMLClone = Элементы.ОписаниеHTMLКлон.Документ.defaultView.Init();
	
	editorHTMLClone.core.commandHandler(, "fullScreen");

КонецПроцедуры

 

Давайте дальше обработаем изменение в HTML редакторе - получим текст (HTML, контент) и установим его в HTML редакторе клоне:

&НаКлиенте
Процедура ОписаниеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
	
	Если НЕ ПолучитьЗначениеКоллекции(ДанныеСобытия, "Button.id")="onChange" Тогда
		Возврат;
	КонецЕсли;	
	
	Если ПрограмнноеИзменение=Истина Тогда
		
		ПрограмнноеИзменение = Ложь;
		
		Возврат;
	КонецЕсли;	
	
	ПрограмнноеИзменение = Истина;
	editorHTMLClone.setContents(editorHTML.getContents());
		
КонецПроцедуры


&НаКлиенте
Процедура ОписаниеHTMLКлонПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
	
	Если НЕ ПолучитьЗначениеКоллекции(ДанныеСобытия, "Button.id")="onChange" Тогда
		Возврат;
	КонецЕсли;	
	
	Если ПрограмнноеИзменение=Истина Тогда
		
		ПрограмнноеИзменение = Ложь;
		
		Возврат;
	КонецЕсли;	
	
	ПрограмнноеИзменение = Истина;
	editorHTML.setContents(editorHTMLClone.getContents());
		
КонецПроцедуры

Обратите, внимание, что я использовал модифицированную функцию ПолучитьЗначениеКоллекции, которую разбирал в публикации Чтение вложенных свойств Структур Структуры, Соответствий, свойства через точку, разбор JSON (внес изменения в публикацию).

Собственно и всё )  Редактируем HTML слева - отображается справа, редактируем справа - отображается HTML слева, удобно и простой редактор. 

 

Надеюсь, моя публикация была Вам полезна и сэкономит Ваше время, ссылка на все публикации SizovE.

Подписывайтесь на мой канал (наверху), будет много интересного бесплатного контента :)

См. также

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме. Без существенных изменений типовой конфигурации. Проверено с брендами: Интеграция 1С и GEELY Интеграция 1С и HAVAL Интеграция 1С и KIA Интеграция 1С и FORD Интеграция 1С и LADA ГАРАНТИЯ 100% ВНЕДРЕНИЯ!

36000 руб.

03.08.2020    15655    9    17    

9

Модуль для обмена "1С:Предприятие 8. УАТ. ПРОФ" с FortMonitor

WEB-интеграция 8.3.8 Конфигурации 1cv8 Автомобили, автосервисы Беларусь Украина Россия Казахстан Управленческий учет Платные (руб)

Расширение предназначено для конфигурации "1С:Предприятие 8. Управление Автотранспортом. ПРОФ". Функционал модуля: 1. Заполнение регистров сведений по подсистеме "Мониторинг", а именно: события по мониторингу, координаты по мониторингу, пробег и расход по мониторингу, текущее местоположение ТС по мониторингу 2. Заполнение путевого листа: пробег по мониторингу, время выезда/заезда, табличная часть ГСМ, места стоянок по геозонам. 3. Отчеты по данным загруженным в регистры сведений. 4. Предусмотрена автоматическая загрузка данных в фоновом режиме (условия работы данной загрузке читайте в описании товара) Модуль работает без включенной константы по настройкам мониторинга. Модуль формы предоставляется с открытым кодом, общий модуль защищен. Любой заинтересованный пользователь, имеет возможность скачать демо-версию расширения.

22656 руб.

25.05.2021    12809    30    8    

10

Интеграция 1С — Битрикс24. Обмен задачами

Сайты и интернет-магазины Интеграция WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 Управленческий учет Платные (руб)

Интеграция 1С и Битрикс24. Разработка имеет двухстороннюю синхронизацию 1С и Битрикс24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (8.3.18.1289). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021    17419    6    15    

13

[Расширение] БОР-Навигатор.Культура

Зарплата Бюджетный учет WEB-интеграция Обмен с ГосИС Платформа 1С v8.3 Сложные периодические расчеты 1С:Зарплата и кадры государственного учреждения 3 Государственные, бюджетные структуры Россия Бюджетный учет Платные (руб)

Расширение конфигурации, включающее в себя объекты, необходимые для подготовки и сдачи отчета "Штатная численность" системы "БОР-Навигатор.Культура" в программе "1С:Зарплата и кадры государственного учреждения", редакция 3.1.

8400 руб.

01.02.2019    25686    9    0    

7

Интеграция с сервисом vetmanager

WEB-интеграция Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Внешняя обработка разрабатывалась для загрузки документов из Ветменеджер в 1С: Бухгалтерия 3.0

12000 руб.

02.02.2021    16253    41    49    

22
Отзывы
8. Andry.Boris 59 03.01.21 00:26 Сейчас в теме
День добрый!
(добавлю)

Заметил, что обработка работает если выполнить запуск от администратора.
Особенность запуска просьба указывать в статье.

Вопрос к 35 строке: >> РабочийКаталог = КаталогПрограммы(); //тут пишем общую папку
Может можно использовать временную папку при открытии и тогда не нужны права администратора.
Заменить на РабочийКаталог = КаталогВременныхФайлов(); - работает без прав администратора.

Спасибо, статья очень интересная.
Остальные комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. tormozit 7133 01.01.21 22:10 Сейчас в теме
Видеоролик очень размыт. Тяжело разглядывать детали. Хотелось бы нормальное качество.
2. SizovE 262 02.01.21 09:20 Сейчас в теме
(1) У Вас видимо по умолчанию включено низкое качество, вот как переключить
Прикрепленные файлы:
3. tormozit 7133 02.01.21 09:42 Сейчас в теме
(2) Я смотрел в 720p - это макс. качество для этого ролика. Думаю просто ролик снят с бОльшим разрешением. В итоге он был сжат по размеру картинки при заливке и потому появилось размытие. Каков оригинальный размер картинки в ролике?
4. SizovE 262 02.01.21 13:12 Сейчас в теме
(3) Вот я сделал скрин с видео, у Вас такое качество?
Прикрепленные файлы:
5. tormozit 7133 02.01.21 13:39 Сейчас в теме
6. SizovE 262 02.01.21 13:55 Сейчас в теме
(5) ) тогда да, это то качество, которое снималось, бесплатной штукой, а чего не видно? каких именно деталей?
7. Andry.Boris 59 02.01.21 23:52 Сейчас в теме
День добрый! Попробовал обработку, вышла ошибка при запуске (скриншот приложил).
Прикрепленные файлы:
8. Andry.Boris 59 03.01.21 00:26 Сейчас в теме
День добрый!
(добавлю)

Заметил, что обработка работает если выполнить запуск от администратора.
Особенность запуска просьба указывать в статье.

Вопрос к 35 строке: >> РабочийКаталог = КаталогПрограммы(); //тут пишем общую папку
Может можно использовать временную папку при открытии и тогда не нужны права администратора.
Заменить на РабочийКаталог = КаталогВременныхФайлов(); - работает без прав администратора.

Спасибо, статья очень интересная.
9. SizovE 262 03.01.21 09:43 Сейчас в теме
(8) День добрый!

Благодарю)

Действительно, нужно только из под админа. Статью боюсь править, слетит бесплатность обработки, после праздников добавлю Ваше замечание.
10. milanse 38 12.01.21 09:40 Сейчас в теме
А как же вставить картинку из буфера ?
11. SizovE 262 12.01.21 10:17 Сейчас в теме
12. milanse 38 12.01.21 12:50 Сейчас в теме
(11) Да, сорян, вставка работает, немного был подправлен формат буфера, чтобы 1С 8.3.15 работала )
13. SizovE 262 12.01.21 13:23 Сейчас в теме
14. Serdgio 195 19.02.21 15:11 Сейчас в теме
Для использования в режиме веб и мобильного клиента подходит только вариант:
"...настройка IIS сервера и открытие HTML редактора по его адресу. ..."?
15. SizovE 262 19.02.21 22:21 Сейчас в теме
(14) Думаю он будет оптимальным.
16. Serdgio 195 20.02.21 00:06 Сейчас в теме
(15) я имею в виду, что без публикации на веб-сервера в этих режимах никак, верно?
17. SizovE 262 20.02.21 18:57 Сейчас в теме
(16) В теории должно быть можно - все запихнуть в один HTML, но нужно пробовать.
18. simon_simon 1 23.02.21 13:52 Сейчас в теме
Здравствуйте! Запустил вашу обработку в веб клиенте . Все , в принципе , работает, за исключением того, что при открытии выскакивает ошибка:

{ExternalDataProcessor.EDIbotHTMLEditor.Form.Форма.Form(9)}: editorHTML.core.commandHandler(, "fullScreen");
, reason:
Cannot read property 'firstElementChild' of undefined

В тонком клиенте ее нет.

И еще небольшой вопрос: имеет ли смысл скачивать версию SunEditor новее?
19. SizovE 262 24.02.21 10:35 Сейчас в теме
(18) Подскажите, как Вы запускаете, какой релиз. Я запускал в толстом клиенте (управляемое приложение), в тонком клиенте -все ок, релиз 16.

И еще небольшой вопрос: имеет ли смысл скачивать версию SunEditor новее?
Если Вам важны, те изменения, которые автор отразил в новых версиях, то конечно ) вот описание - https://github.com/JiHong88/SunEditor/releases

Мы чуть позже обновим, думаю, где-то в конце марта, начало апреля - есть там парочку нужных вещей.
20. simon_simon 1 01.03.21 17:43 Сейчас в теме
Ошибка возникала при работе в веб клиенте :
платформа 1C:Enterprise 8.3 (8.3.17.1823)
На тонком клиенте эта ошибка не возникает.

На вебе решили ее путем заключения строки
"editorHTML.core.commandHandler(, "fullScreen");"
В попытку исключение. При этом изменение размеров поля редактора работало при изменении размеров общего окна


По поводу новой версии, скачали последнюю , все работает при тех же инициирующих скриптах wrapper1c и index
21. simon_simon 1 01.03.21 17:52 Сейчас в теме
обратили внимание на следующую особенность работы редактора . При вставке контента через кнопку "Источник" (см .прикрепленный файл)
результат в редакторе был довольно сильно искажен. Не сталкивались ли с подобной особенностью и если да , то как решали?
Прикрепленные файлы:
22. simon_simon 1 01.03.21 18:48 Сейчас в теме
(21)
опытным путем установили, что при выполнении editorHTML.setContents(.........) отображение того что передали в виде размеченого текста также искажается.
23. SizovE 262 01.03.21 21:28 Сейчас в теме
(21) Это стандартно, HTML редактор форматирует под себя Ваш текст, под свою разметку.
24. simon_simon 1 27.05.21 11:51 Сейчас в теме
Коллеги, может быть сталкивались. Возникла следующая необходимость:
Необходимо вводить стили по умолчанию, которые подставлялись бы в Санэдитор при создании нового контента.

Такое можно прописать в настройках Санэдитор.

На странице http://suneditor.com/sample/html/options.html есть помощник для создания файлов настроки редактора.

Там есть пункт - defaultStyle, думаю это то, что нам надо прописать.

Для себя хочу установить значение - "line-height: 1.15; font-family: Verdana; font-size: 12px;"


"defaultStyle": "line-height: 1.15; font-family: Verdana; font-size: 12px;"

Собственно вопрос в следующем, как эту настройку осуществить в нашем случае, применимом к файлу "index.html"
25. vint1978 08.06.21 20:01 Сейчас в теме
Коллеги. День добрый, а не подскажите в данном функционале предусмотрена возможность изменения стиля таблиц? В частности изменения толщины и цвета границ таблиц?
26. andrey_besp 07.07.22 07:16 Сейчас в теме
Пытаюсь победить проблему. Данный редактор удаляет выравнивания текста. Пробовал запустить скрипт в браузере, и данная проблема проявила себя и там. В свежей версии SUNEDITOR данной проблемы нет. Попытаюсь обновить версию библиотеке.
editorHTML = Элементы.ОписаниеHTML.Документ.defaultView.Init(); 

Возвращает неопределённо. Кто подскажет, что я делаю не так?
27. andrey_besp 07.07.22 10:01 Сейчас в теме
(26) Разобрался в чем проблема. В WebKit 1С:Предприятие 8.3 (8.3.19.1467) что-то с поддержкой API ResizeObserver. Текст ошибки: «undefined is not a constructor (evaluating 'new a.ResizeObserver((function(e){d.__callResizeFunction(-1,e[0])}))')»
28. user1722686 23.02.23 10:37 Сейчас в теме
Добрый день.
Такая же ошибка editorHTML = Элементы.ОписаниеHTML.Документ.defaultView.Init() возвращает Неопределено.

Suneditor нужно куда то установить или копировать папку чтобы Обработка работала?.

Платформа 1С:Предприятие 8.3 (8.3.22.1704)
Прикрепленные файлы:
29. GeterX 1301 16.11.23 18:34 Сейчас в теме
(28) нужно поправить немного код:
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	
	//ОписаниеHTML 		= УстановитьHTMLEditor();
	//ОписаниеHTMLКлон 	= УстановитьHTMLEditor();
	
КонецПроцедуры  

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	
	РабочийКаталог = КаталогВременныхФайлов();
	
	ОписаниеHTML 		= УстановитьHTMLEditor(РабочийКаталог);
	ОписаниеHTMLКлон 	= УстановитьHTMLEditor(РабочийКаталог);

КонецПроцедуры

&НаКлиенте
Функция УстановитьHTMLEditor(РабочийКаталог) экспорт
	
	//РабочийКаталог = КаталогПрограммы(); //тут пишем  общую папку
	//РабочийКаталог = КаталогВременныхФайлов();
	
	КаталогКомпоненты = "EDIbotHTMLEditor";
	
	КаталогНаДиске = Новый Файл(РабочийКаталог+КаталогКомпоненты);
	Если НЕ КаталогНаДиске.Существует() Тогда
		
		Макет = ПолучитьМакетНаСервере();
		
		Чтение = Новый ЧтениеДанных(Макет);
		
		Файл = Новый ЧтениеZipФайла(Чтение.ИсходныйПоток());
		
		Файл.ИзвлечьВсе(РабочийКаталог+КаталогКомпоненты);
		
	КонецЕсли;

	Возврат РабочийКаталог+КаталогКомпоненты+"\index.html"; 
	
КонецФункции   

&НаСервере
Функция ПолучитьМакетНаСервере()
	Возврат РеквизитФормыВЗначение("Объект").ПолучитьМакет("EDIbotHTMLEditor");	
КонецФункции

Показать
30. DERL 05.01.24 13:41 Сейчас в теме
в шрифтах нет популярного шрифта Times New Roman, как его добавить?
Оставьте свое сообщение