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

31.08.20

Разработка - Инструментарий разработчика

Простой и удобный html редактор без сторонних библиотек.

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

Наименование Файл Версия Размер
HTML Editor
.epf 43,76Kb
31
.epf 1.0.0 43,76Kb 31 Скачать

В процессе создания диалогового интерфейса для менеджера сценарного теста (добавляем виртуального помощника) нам понадобилась возможность ввода текста поддерживающие возможности java script, типовые инструменты от 1С не подходят, а сторонние библиотеки очень громоздки (Ранее мы уже приводили пример со сторонними библиотеками Визуальный html редактор на управляемых формах). Нам не требовалось много от функционала и в результате поиска по интернету удалось найти очень удобные возможности сегодняшних браузеров.

Теперь на примере 5 шагов покажем как это сделать без каких-либо крутых навыков и серьезных временных затрат. А функционала и возможностей будет достаточно для 90% обычно решаемых задач.

1. Для того чтобы сделать текст редактируемым требуется вставить в html тег - contenteditable="true" (true - включает, а false - выключает). К примеру, следующий блок будет отлично редактируемым:

<div id="editor" contenteditable="true"><p>Привет мир!</p></div>

Можно вообще сделать редактируемым весь документ глобально - добавьте в тег body. 

2. Для того чтобы добавлять элементы, отменять действия или менять стили необходимо воспользоваться командой  execCommand(сommand, showDefaultUI, аrgument) (где command - это команда из списка, showDefaulUI - показ интерфейса встроенного, argument - дополнительный аргумент.

<script>
...
// сделать текст жирным <strong>
document.execCommand('bold', false, null);
...
// отменить действие 
document.execCommand('undo', false, null);
...
// скопировать
document.execCommand('copy', false, null);
...
// вставить
document.execCommand('paste', false, null);
...
</script>
 
 Таблица поддерживаемых команд  

 

3. Взаимодействие от 1С к html (этого функционала обычно достаточно). Выполняем несколькими вариациями

 а) сначала размещаем в html коде страницы редактора скрипт

<script type="text/javascript">
function send_command(sCmd, sValue)
{
   try 
   { 
     document.execCommand(sCmd, false, sValue); 
   }catch(Exp)
   {
   }
}
</script>

 б) в коде модуля формы размещаем код следующего содержания

&НаКлиенте
Процедура ВыполнитьКомандуОтменыДействия(Команда)
    // получаем ссылку на HtmlView
	htmlView = ПолучитьСсылкуНаHtmlView();
    // вызываем java script с передачей параметров
	htmlView.send_command("undo","");
КонецПроцедуры


&НаКлиенте
Функция ПолучитьСсылкуНаHtmlView()
	
	Перем htmlView;
	
	htmlView = неопределено;
	Если Элементы.ПолеHTML.Документ.parentWindow=Неопределено Тогда
		htmlView = Элементы.ПолеHTML.Документ.defaultView;
	Иначе
		htmlView = Элементы.ПолеHTML.Документ.parentWindow;
	КонецЕсли;
	Возврат htmlView;

КонецФункции

 4. Взаимодействие от html к 1С организуем через хитрый код, который я подсмотрел где-то на просторах текущего ресурса. Допустим, мы хотим получить информацию о блоке окружающем текущую позицию курсора.

а) Размещаем где-то в коде следующие скрипты:

<script>
   var interactionVariable = null;
</script>
<script>
function foo()
{
   //...
   interactionVariable = "данные";
   interactionButton.click();	
}
</script>

б) Скрытую кнопку на странице, которую будем кликать программно

<button id="interactionButton" style="display: none">Кнопка взаимодействия</button>

в) В коде формы добавляем обработчик события нажатия "ПриНажатии" для поля HTML и обрабатываем данные

&НаКлиенте
Процедура HTML_полеПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
	НажатыйЭлемент = ДанныеСобытия.Element;
	Если НажатыйЭлемент.id = "interactionButton" Тогда	
		htmlView = ПолучитьViewHTML("HtmlEditor");
		Сообщить(htmlView.interactionVariable);
        // обрабатываем данные ...
	Конецесли;
КонецПроцедуры

Функционал тестировался на версиях 8.3.14, 8.3.15 и 8.3.16, думаю, будет корректно работать на всех версиях с поддержкой нового движка WebKit. Возможно и с более старыми версиями - не проверял.

HTML WYSIWYG editor

См. также

SALE! 20%

Infostart Toolkit: Инструменты разработчика 1С 8.3 на управляемых формах

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

Набор инструментов программиста и специалиста 1С для всех конфигураций на управляемых формах. В состав входят инструменты: Консоль запросов, Консоль СКД, Консоль кода, Редактор объекта, Анализ прав доступа, Метаданные, Поиск ссылок, Сравнение объектов, Все функции, Подписки на события и др. Редактор запросов и кода с раскраской и контекстной подсказкой. Доработанный конструктор запросов тонкого клиента. Продукт хорошо оптимизирован и обладает самым широким функционалом среди всех инструментов, представленных на рынке.

10000 8000 руб.

02.09.2020    122318    673    389    

716

SALE! 25%

Infostart PrintWizard

Пакетная печать Печатные формы Инструментарий разработчика Платформа 1С v8.3 Запросы 1С:Зарплата и кадры бюджетного учреждения 1С:Конвертация данных 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 Платные (руб)

Инструмент, позволяющий абсолютно по-новому взглянуть на процесс разработки печатных форм. Благодаря конструктору можно значительно снизить затраты времени на разработку печатных форм, повысить качество и "прозрачность" разработки, а также навести порядок в многообразии корпоративных печатных форм.

18000 15300 руб.

06.10.2023    7331    22    6    

39

SALE! 20%

Infostart УДиФ: Управление данными и формами

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

Расширение позволяет без изменения кода конфигурации выполнять проверки при вводе данных, скрывать от пользователя недоступные ему данные, выполнять код в обработчиках. Не изменяет данные конфигурации, легко устанавливается практически на любую конфигурацию на управляемых формах.

10000 8000 руб.

10.11.2023    3603    11    1    

34

SALE! 30%

PowerTools

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

Универсальный инструмент программиста для администрирования конфигураций. Сборник наиболее часто используемых обработок под единым интерфейсом.

3600 2520 руб.

14.01.2013    177789    1074    0    

849

Многопоточность. Универсальный «Менеджер потоков» 2.1

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

Восстановление партий или взаиморасчетов, расчет зарплаты, пакетное формирование документов или отчетов - теперь все это стало доступнее. * Есть желание повысить скорость работы медленных алгоритмов! Но... * Нет времени думать о реализации многопоточности? * о запуске и остановке потоков? * о поддержании потоков в рабочем состоянии? * о передаче данных в потоки и как получить ответ из потока? * об организации последовательности? Тогда ЭТО - то что надо!!!

5000 руб.

07.02.2018    99368    239    97    

296

[ЕХТ] Фреймворк для Расширений 1С

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

"Фреймворк для Расширений 1С" это универсальное и многофункциональное решение, упрощающее разработку и поддержку создаваемых Расширений. Поставляется в виде комплекта из нескольких Расширений с открытым исходным кодом. Работает в любых Конфигурациях в режиме Управляемого приложения с режимом совместимости 8.3.12 и выше без необходимости внесения изменений в Конфигурацию.

3000 руб.

27.08.2019    18132    6    8    

40

1С HTML Шаблоны / HTML Templates

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

Быстрая и удобная обработка для работы с шаблонами HTML. Позволяет легко и быстро формировать код HTML.

2040 руб.

27.12.2017    28117    3    10    

15

Выполнение произвольного кода или запроса с параметрами через Web-сервис (замена COM-подключений)

Инструментарий разработчика Обмен между базами 1C Платформа 1С v8.3 Платные (руб)

В процессе работы в 1С часто возникает потребность получить данные из другой базы.  Обычно это делается через COM-соединение, и время выполнения запроса при этом оставляет желать лучшего. В данной публикации представлено универсальное решение, позволяющее практически моментально выполнить произвольный код или запрос с параметрами в другой информационной базе через Web-сервис.

2400 руб.

24.09.2019    23606    15    15    

32
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. Kaval88 172 31.08.20 11:32 Сейчас в теме
Круто! Пригодится.
ivanov660; +1 Ответить
2. rusmil 262 31.08.20 21:30 Сейчас в теме
4. Взаимодействие от html к 1С организуем через хитрый код, который я подсмотрел где-то на просторах текущего ресурса. Допустим, мы хотим получить информацию о блоке окружающем текущую позицию курсора.
Что-то не совсем понятно, описано про 4 пункт... непонятно в какой момент выполниться функция foo и как об этом узнает 1С. Можете пояснить?
3. ivanov660 4332 31.08.20 23:44 Сейчас в теме
(2) Добавил недостающий последний пункт, теперь должно быть понятно. (т.е. нажимается кнопка, которая вызывает событие при нажатии и мы в этот момент проверяем данные нашей переменной)
4. rwn_driver 8 07.09.20 14:46 Сейчас в теме
Добрый день.
Это не ошибка: "htmlView = ПолучитьViewHTML("HtmlEditor");"?
М.б. имелась ввиду функция "ПолучитьСсылкуНаHtmlView()", причем без параметров?
5. ivanov660 4332 07.09.20 16:23 Сейчас в теме
(4) Это ссылка на defaultView
&НаКлиенте
Функция ПолучитьHTMLView()
	
	htmlView = неопределено;
	Если Элементы.HTML_поле.Документ.parentWindow=Неопределено Тогда
		htmlView = Элементы.HTML_поле.Документ.defaultView;
	Иначе
		htmlView = Элементы.HTML_поле.Документ.parentWindow;
	КонецЕсли;
	Возврат htmlView;

КонецФункции
Показать


или более универсально, если несколько полей html

&НаКлиенте
Функция ПолучитьHTMLView(ИмяПоля)
	
	htmlView = неопределено;
	Если Элементы[ИмяПоля].Документ.parentWindow=Неопределено Тогда
		htmlView = Элементы[ИмяПоля].Документ.defaultView;
	Иначе
		htmlView = Элементы[ИмяПоля].Документ.parentWindow;
	КонецЕсли;
	Возврат htmlView;

КонецФункции
Показать
6. Pawlick 10 19.09.20 19:00 Сейчас в теме
Если функционал не поддерживает таблицы, то это мало чем отличается от Форматированного документа.
А на webkit прекрасно запускаются GoogleDoc, что в совокупности с GoogleRestApi дает практически неограниченные вощможности...
7. ivanov660 4332 20.09.20 12:35 Сейчас в теме
(6)Вы видимо не особо внимательно читали статью(
Функционал довольно существенно отличается от форматированного документа, попробуйте провести действительное сравнение, а не эфемерное.
Данный пример имеет свое демонстрационное назначение и минимальный набор по функционалу, также не требует подключения к интернету, а работа с таблицей добавляется в "две строчки кода".
Вы можете даже сравнить данную обработку с Microsoft Office 365 и вынести вердикт о недостаточной функциональности.
11. maxim_1c 340 01.12.20 14:16 Сейчас в теме
(7)
а работа с таблицей добавляется в "две строчки кода".

Добрый день, не могли бы уточнить как добавить создание и редактирование таблиц html?
12. ivanov660 4332 01.12.20 17:34 Сейчас в теме
(11)
1. Используем команду: insertHTML с текстом вставки таблицы в формате html.
  tableHTML="<table border='1' style='border-color:black;'><tr><td> edit cell ... </td><td> edit cell ... </td></tr></table>";
  FormatDoc("insertHTML",tableHTML);

2. Редактирование должно включаться командой - enableInlineTableEditing
8. Pawlick 10 20.09.20 20:26 Сейчас в теме
Просто не совсем понятно о чем статья... Если про текстовый редактор на html, то указанные Вами возможности - это безусловно интересно, но их маловато для того, что бы назвать это текстовым редактором.
Если про виртуально помощьника - то в статье об этом ни слова...
Т.е я хочу сказать, что если Вам нужен текстовый редактор, то зачем Вам html+js?
А если жонглирование буквами с помощью js то зачем Вам текстовый редактор? )
9. ivanov660 4332 21.09.20 09:31 Сейчас в теме
(8) Статья про еще одну возможность редактирования HTML, и решили поделиться демо примером. Коллеги спрашивали про такую возможность, вот с ними и делюсь.
Делать полноценный редактор у меня таких задач нет. Кому понадобиться, то тот сможет легко развить данный пример.
Мы же ее используем для своих задач. Одна из них - будем использовать как интерфейс для взаимодействия с виртуальным помощником, т.к. все возможности, которые дает 1С неудобны для подобных целей.
10. Pawlick 10 21.09.20 13:22 Сейчас в теме
В любом случае в статье описан полезный , и интересный пример.
ivanov660; +1 Ответить
13. rom-x 152 09.01.23 17:21 Сейчас в теме
Элементы.ПолеHTMLДокумента.Документ.execCommand('paste', false, null); - У меня paste не отрабатывает в веб клиенте, в тонком все работает.

Я так понимаю у Вас также не отрабатывает в вебе?
14. ivanov660 4332 10.01.23 17:07 Сейчас в теме
(13)Для того чтобы эта команда работала в браузере Chrome требуется установить разрешение clipboardRead.
Как пишут в документации это можно сделать в файле манифеста manifest.json, добавив:

{
"permissions": ["clipboardRead", "clipboardWrite"]
}
Оставьте свое сообщение