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

Публикация № 1268943

Разработка - Работа с интерфейсом

HTML WYSIWYG editor

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

В процессе создания диалогового интерфейса для менеджера сценарного теста (добавляем виртуального помощника) нам понадобилась возможность ввода текста поддерживающие возможности 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 Editor

.epf 43,76Kb
30.08.20
7
.epf 1.0.0 43,76Kb 7 Скачать

Специальные предложения

Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. Kaval88 118 31.08.20 11:32 Сейчас в теме
Круто! Пригодится.
ivanov660; +1 Ответить
2. rusmil 216 31.08.20 21:30 Сейчас в теме
4. Взаимодействие от html к 1С организуем через хитрый код, который я подсмотрел где-то на просторах текущего ресурса. Допустим, мы хотим получить информацию о блоке окружающем текущую позицию курсора.
Что-то не совсем понятно, описано про 4 пункт... непонятно в какой момент выполниться функция foo и как об этом узнает 1С. Можете пояснить?
3. ivanov660 2237 31.08.20 23:44 Сейчас в теме
(2) Добавил недостающий последний пункт, теперь должно быть понятно. (т.е. нажимается кнопка, которая вызывает событие при нажатии и мы в этот момент проверяем данные нашей переменной)
4. rwn_driver 8 07.09.20 14:46 Сейчас в теме
Добрый день.
Это не ошибка: "htmlView = ПолучитьViewHTML("HtmlEditor");"?
М.б. имелась ввиду функция "ПолучитьСсылкуНаHtmlView()", причем без параметров?
5. ivanov660 2237 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 2237 20.09.20 12:35 Сейчас в теме
(6)Вы видимо не особо внимательно читали статью(
Функционал довольно существенно отличается от форматированного документа, попробуйте провести действительное сравнение, а не эфемерное.
Данный пример имеет свое демонстрационное назначение и минимальный набор по функционалу, также не требует подключения к интернету, а работа с таблицей добавляется в "две строчки кода".
Вы можете даже сравнить данную обработку с Microsoft Office 365 и вынести вердикт о недостаточной функциональности.
8. Pawlick 10 20.09.20 20:26 Сейчас в теме
Просто не совсем понятно о чем статья... Если про текстовый редактор на html, то указанные Вами возможности - это безусловно интересно, но их маловато для того, что бы назвать это текстовым редактором.
Если про виртуально помощьника - то в статье об этом ни слова...
Т.е я хочу сказать, что если Вам нужен текстовый редактор, то зачем Вам html+js?
А если жонглирование буквами с помощью js то зачем Вам текстовый редактор? )
9. ivanov660 2237 21.09.20 09:31 Сейчас в теме
(8) Статья про еще одну возможность редактирования HTML, и решили поделиться демо примером. Коллеги спрашивали про такую возможность, вот с ними и делюсь.
Делать полноценный редактор у меня таких задач нет. Кому понадобиться, то тот сможет легко развить данный пример.
Мы же ее используем для своих задач. Одна из них - будем использовать как интерфейс для взаимодействия с виртуальным помощником, т.к. все возможности, которые дает 1С неудобны для подобных целей.
10. Pawlick 10 21.09.20 13:22 Сейчас в теме
В любом случае в статье описан полезный , и интересный пример.
ivanov660; +1 Ответить
Оставьте свое сообщение

См. также

daСклонение: склонение ФИО, должностей, чисел, прилагательных, существительных на языке 1С + ТестЦентр Промо

Универсальные функции v8 1cv8.cf Абонемент ($m)

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

1 стартмани

14.02.2015    103354    98    daMaster    90    

Сравнение реального дохода со средним доходом из API.HH.RU

Зарплата Управленческие v8 v8::СПР ЗУП3.x УУ Абонемент ($m)

Внешняя обработка на управляемой форме для 1С:Предприятие 8.3 по интеграции с HH.RU используя HH REST API. Ключевые функции: получение списка вакансий по должностям (Ключ для работы не нужен); расчет среднего дохода; Тестирование проводилось на платформе 1С:Предприятие 8.3 (8.3.13.1513) Зарплата и управление персоналом, редакция 3.1 (3.1.11.68) совместно с API.HH.RU.

1 стартмани

11.11.2019    4126    5    solaru    2    

Конфигурация для рекламного агентства

Управление услугами и сервисом Управление взаимоотношениями с клиентами (СRM) Производство готовой продукции (работ, услуг) Управление взаимоотношениями с клиентами (СRM) Производство готовой продукции (работ, услуг) v8 Реклама, PR и маркетинг УУ Абонемент ($m)

Данная конфигурация выполнена для решения тестового задания: Цель задания: 1) Понять, на каком из клиентов сколько мы заработали;  2) Понять, по какому виду СМИ сколько мы заработали;  3) Проследить по каждой услуге: у кого за сколько купили и кому за сколько продали, с возможностью перейти в соответствующий документ. Реализовано с помощью: 1. Справочники - контрагенты, номенклатура 2. Документы - Поступление услуг, реализация услуг 3. Отчеты - отчет по контрагентам, номенклатуре и движений.

1 стартмани

21.05.2019    4933    0    solaru    0    

Загрузка номенклатуры в УТ 10.3 из Excel файла с генерацией штрихкодов

Загрузка и выгрузка в Excel Обработка справочников Оптовая торговля Розничная торговля Учет ТМЦ Оптовая торговля Розничная торговля Учет ТМЦ v8 УТ10 Россия Абонемент ($m)

Обработка позволяет генерировать новые номенклатурные позиции на основе данных из файла Excel с последующей генерацией штрихкодов (ШК). Может быть полезна при больших поступлениях товаров на склад, где ручное создание и присваивание штрихкода  (ШК) может занимать много времени.

1 стартмани

24.03.2017    8015    7    solaru    0    

Под капотом управляемых форм

Практика программирования v8 1cv8.cf Бесплатно (free)

Управляемые формы уже давно и плотно вошли в жизнь 1С-разработчика. Однако, судя по недавним публикациям на Инфостарте, многие до сих пор мало знакомы с ними. Предлагаю разобраться с тем, что же это такое.

26.08.2013    267934    Evil Beaver    271    

[NotaBene] Универсальный отчет по таблице значений

Практика программирования v7.7 1cv7.md Россия Абонемент ($m)

1C v.7.7 Готовое решение. Не требует настройки. Не требует допрограммирования. Данная обработка решает часто встречающуюся задачу вывода в "красивом" виде таблицы значений (полученной, например, из запроса). Поддерживается произвольное группирование данных, отключение/включение группировок, в т.ч и создание "шахматок" (типа "продажи понедельно"). Обработка может использоваться как и в отладочных целях (для нормального просмотра ТЗ), так и в составе вполне рабочих отчетов. По крайней мере, я неоднократно клиентам данную обработку ставил вместо того, чтобы каждый раз писать замороченные выводы данных. И клиенты довольны, и мне - проще...

2 стартмани

07.05.2007    29183    3    CheBurator    63