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
440
.epf 631,79Kb 440 Скачать бесплатно

Разрабатывая 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 разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020    15745    10    17    

11

Интеграция 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    17548    6    15    

13

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

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

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

12000 руб.

02.02.2021    16358    42    49    

23

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

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

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

8400 руб.

01.02.2019    25737    9    0    

7

Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС

Обмен с ГосИС WEB-интеграция Платформа 1С v8.3 Управляемые формы 1С:Комплексная автоматизация 1.х 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия государственного учреждения 1С:Документооборот 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Платные (руб)

Обработка является альтернативой механизму, разработанному фирмой 1С и заполняющему реквизиты контрагента по ИНН или наименованию. Не требуется действующей подписки ИТС. Вызывается как внешняя дополнительная обработка, т.е. используется, непосредственно, из карточки контрагента. Заполнение по ИНН или наименованию реквизитов контрагента по данным сайта ФНС (egrul.nalog.ru) для БП 2.0, БП 3.0, БГУ 1.0, БГУ 2.0, УТ 10.3, УТ 11.x, КА 1.1, КА 2.x, УПП 1.x, ERP 2.x, УНФ 1.5, УНФ 1.6, УНФ 3.0, ДО 2.1

2400 руб.

28.04.2016    88579    160    215    

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

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

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

Спасибо, статья очень интересная.
Остальные комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. tormozit 7136 01.01.21 22:10 Сейчас в теме
Видеоролик очень размыт. Тяжело разглядывать детали. Хотелось бы нормальное качество.
2. SizovE 262 02.01.21 09:20 Сейчас в теме
(1) У Вас видимо по умолчанию включено низкое качество, вот как переключить
Прикрепленные файлы:
3. tormozit 7136 02.01.21 09:42 Сейчас в теме
(2) Я смотрел в 720p - это макс. качество для этого ролика. Думаю просто ролик снят с бОльшим разрешением. В итоге он был сжат по размеру картинки при заливке и потому появилось размытие. Каков оригинальный размер картинки в ролике?
4. SizovE 262 02.01.21 13:12 Сейчас в теме
(3) Вот я сделал скрин с видео, у Вас такое качество?
Прикрепленные файлы:
5. tormozit 7136 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 1305 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, как его добавить?
Оставьте свое сообщение