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

См. также

Альтернативный способ добавления элементов и реквизитов на формы Промо

Работа с интерфейсом v8 ERP2 УТ11 Россия Абонемент ($m)

Предлагаю альтернативный вариант добавления динамически создаваемых элементов и реквизитов на форму.

1 стартмани

09.09.2019    10927    12    bmk74    3    

Открыть форму внутри другой формы - наконец-то возможно!

Работа с интерфейсом v8::УФ Абонемент ($m)

Я давно мечтал о возможности открытия форм 1С внутри других форм, мне время от времени попадаются задачи, где это бы пригодилось. И вот в версии 8.3.16 наконец-то это можно реализовать! Конечно, это не совсем то, что я ожидал, но получилось все равно интересно. Давайте посмотрим.

1 стартмани

15.04.2020    11587    8    CyberCerber    52    

Делаем из СКД Excel (ну, почти)

Работа с интерфейсом v8 Абонемент ($m)

Несложный в использовании способ внедрить в обычный отчет СКД возможность редактировать значения ресурсов отчета (а-ля Excel) и получать отредактированные значения для дальнейшей обработки.

1 стартмани

26.01.2020    8509    11    herfis    16    

Помощник работы с идентификаторами объектов

Прочие инструменты разработчика Поиск данных v8 1cv8.cf Абонемент ($m)

Инструмент для расширенного анализа идентификаторов объектов.

2 стартмани

24.01.2020    8526    30    YPermitin    29    

Менеджер открытых форм Промо

Работа с интерфейсом v8::УФ 1cv8.cf Абонемент ($m)

Обработка получает информацию об открытых формах и позволяет ими манипулировать.

1 стартмани

13.04.2017    21067    37    SeiOkami    19    

Индикация прогресса выполнения фонового задания на управляемой форме внешней обработки

БСП (Библиотека стандартных подсистем) Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

Внешняя обработка с фоновым выполнением и индикацией процесса для любой конфигурации на основе БСП >= 2.3 без изменения конфигурации и встраивания обработки в "Дополнительные отчеты и обработки".

1 стартмани

27.12.2019    9526    13    1sig    14    

Декомпиляция условного оформления

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Обработка автоматически генерирует полный код создания условного оформления формы любой сложности. Достаточно настроить для формы в конфигураторе условное оформление, а затем выбрать данную форму в обработке. В результате будет сгенерирован программный код создания условного оформления.

1 стартмани

23.12.2019    7159    33    XilDen    4    

FormEditor - поставляемый модуль программного создания элементов форм

Практика программирования Прочие инструменты разработчика v8 Абонемент ($m)

Упрощенное добавление реквизитов формы, добавление их на форму (в том числе и таблиц), также добавление групп, команд формы и кнопок к ним.

1 стартмани

20.12.2019    5448    13    coolo1    10    

Расширенная настройка динамического списка УФ Промо

Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

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

1 стартмани

31.05.2017    31734    149    tormozit    23    

Многоуровневые списки выбора с оформлением элементов

Практика программирования Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

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

1 стартмани

17.12.2019    7870    2    azhilichev    5    

[Взрыв шаблона!] Новый способ программной настройки условного оформления

Работа с интерфейсом v8::УФ 1cv8.cf Абонемент ($m)

Условное оформление форм и списков это великолепная возможность их настройки по заданным условиям. Но существенным недостатком является трудоемкость написания и сопровождения программного кода. В публикации предлагается новый способ программной настройки условного оформления.

1 стартмани

01.12.2019    10870    38    mszsuz    12    

Удобный выбор из таблицы/дерева в УФ

Практика программирования Работа с интерфейсом Разработка v8 v8::УФ 1cv8.cf Абонемент ($m)

Выбор из таблицы значений или дерева значений в выпадающем списке рядом с полем ввода - УФ, быстро и просто!

1 стартмани

12.08.2019    12758    7    Yashazz    18    

[Механизм интерфейса] Свой флажок (чекбокс)

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Создадим свой флажок для интерфейса, используем простой универсальный алгоритм.

1 стартмани

09.08.2019    15180    18    rpgshnik    43    

Отбор на управляемой форме из списка значений

Практика программирования Работа с интерфейсом Разработка v8 v8::УФ 1cv8.cf Абонемент ($m)

Пример простого удобного отбора любых данных ссылочного типа на управляемой форме. Работа обработки проверена на релизе: 1С:Предприятие 8.3.13.1513.

1 стартмани

09.08.2019    16788    19    nagaitseff    6    

Программное добавление элементов на управляемую форму

Работа с интерфейсом v8::УФ 1cv8.cf Россия Абонемент ($m)

Пример добавления Команд, Полей ввода, Групп, Страниц, Реквизитов, Обработчиков событий.

1 стартмани

13.02.2019    34179    24    spec8s    20    

Открывашка ячеек таблиц Промо

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Глобальное сочетание клавиш для открытия объекта по ссылке из текущей ячейки любой таблицы в большинстве управляемых форм

1 стартмани

27.10.2018    16576    12    tormozit    31    

Рисуем и распознаем нарисованное при помощи нейросети

Практика программирования Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

Используем нейронную сеть для распознавания нарисованных объектов.

1 стартмани

03.10.2018    14067    44    DO_WHILE_LOOP    28    

Рисуем диаграммы в metadata.js

Инструментарий разработчика Работа с интерфейсом v8 v8::СКД 1cv8.cf Абонемент ($m)

Не одной же литературой заниматься?

1 стартмани

20.09.2018    16422    3    1c-intelligence    77    

Визуализация событий на временной шкале средствами "Поле HTML документа"

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Интересный способ наглядно отобразить события на временной шкале. Например, может быть применен для красивого вывода документов по клиенту. Тестировалось на платформе 8.3.12.1469

1 стартмани

31.07.2018    23230    138    Plotks2017    27    

Лучший подарок для бухгалтера - счёты 8.2 (со звуком) Промо

Работа с интерфейсом v8 1cv8.cf Россия Абонемент ($m)

(Толстый клиент) Подарите бухгалтеру счеты, и он(а) Вас никогда не забудет.

1 стартмани

13.05.2011    39798    24    Tatitutu    45    

Продвинутое рисование в табличном документе (стрелок и не только)

Практика программирования Работа с интерфейсом v8 Абонемент ($m)

Вспоминаем геометрию и основы компьютерной графики. Матрицы и аффинные преобразования на плоскости.

1 стартмани

24.07.2018    15235    18    WalterMort    29    

Работа с данными выбора

Практика программирования Работа с интерфейсом v8 Россия Абонемент ($m)

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

1 стартмани

17.07.2018    45146    17    kalyaka    16    

Иерархическая диаграмма

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Концепция диаграммы по иерархической структуре данных, например по номенклатуре (продажи или остатки на складах).

2 стартмани

17.06.2018    13232    16    DrAku1a    6    

Рисуем стрелки в табличном документе

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Рисуем стрелки средствами 1С .

1 стартмани

01.06.2018    15017    9    pm74    9    

Программная работа с графическими схемами. Готовое решение

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

Работоспособное, проверенное на практике, простое и удобное программное управление графическими схемами.

1 стартмани

18.02.2018    18170    20    Yashazz    13    

Тестирование интерфейса в обычном приложении 8.2 при помощи SikuliX

Инструментарий разработчика Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Как же не хватает клиента тестирования на платформе 8.2. Не кликнешь на кнопку, не выберешь из списка, не проверишь видит ли надпись пользователь. Воспользуемся внешним инструментом SikuliX, который позволит нам протестировать функционал форм. Данный инструмент легко встраивается в линию сборки и может "дружить" с уже известным многим Open-source продуктами.

1 стартмани

03.01.2018    28929    5    kraynev-navi    41    

Интерактивный интерфейс Промо

Рабочее место Работа с интерфейсом v8 1cv8.cf Россия Абонемент ($m)

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

1 стартмани

29.10.2011    17767    2    Vin_Tik    9    

Программное формирование форматированной строки в стиле html+inline CSS

Работа с интерфейсом Инструментарий разработчика v8 1cv8.cf Абонемент ($m)

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

1 стартмани

18.11.2017    30973    33    bonv    10    

Программное создание элементов графической схемы (через XSLT)

Практика программирования Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

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

1 стартмани

20.07.2017    20613    62    lazarenko    18    

Управляемые формы. Итоги в динамических списках

Универсальные обработки Работа с интерфейсом v8::УФ 1cv8.cf Россия Абонемент ($m)

Многие задаются вопросами расчета итогов динамических списков в управляемых формах. Здесь мы не будем претендовать на академичность, оставим споры, что мол это не нужно, что это все равно что считать бородатых мужиков на движущемся эскалаторе, что это дополнительная нагрузка. Все это понимают, Кто не понимает - поймет на практике. Поэтому основываемся на... "снегопад, снегопад, если женщина просит..." или "..а мня плевать - мне очень хочется.." Я попытался решить практические проблемы при расчете и выводе итогов. В приложении примеры расчета итогов в иерархическом справочнике и журнале документов.

1 стартмани

15.12.2016    36552    12    argut    13    

Простой редактор плана помещения JavaScript

Практика программирования Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

На ресурсе сейчас очень много решений, которые позволяют редактировать карты, используя географические схемы. Так же много решений, которые позволяют редактировать объекты онлайн веб-карт. Мне же нужно было простое решение, для того чтобы расставить квадратные объекты на плане, показать их пользователю. Ну и распечатать, опять же. Я решил написать простенький редактор на JavaScript с использованием библиотеки Raphael.

1 стартмани

23.11.2016    20443    94    igel9780    22    

Настройка начальной страницы (Рабочего стола)

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

Альтернатива стандартной настройке начальной страницы. В типовой доступны лишь те формы, что явно "разрешены" разработчиком в режиме конфигуратора. Эта обработка позволяет собрать "Рабочий стол" из любых подходящих форм в пользовательском режиме. Без программирования. БСП не используется. Не расширение. Универсальна, т.е. подойдет для любой конфигурации (в т.ч. самописной).

2 стартмани

19.10.2016    36644    215    Erne100    24    

Цветовые схемы для конфигуратора 1С (Популярные цветовые схемы для C# - теперь и для 1С) (Теперь 8.2 - 8.3) Промо

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Тёмные цветовые схемы кода. То, что было доступно всем передовым средствам разработки, теперь доступно и на 1С. 13.12.17 UPD: Теперь работает с платформой 8.3

3 стартмани

07.10.2013    34326    83    Chernov_Dmitriy    82