HTML-редактор JODIT

Разработан модуль HTML-редактора JODIT. https://xdsoft.net/jodit/
Отлажен на рабочих процессах в течение 3+ месяцев.
Ключевые преимущества:
1. Разметка HTML работает в ленте сообщений
2. В редакторе отключено кеширование - баги, связанные с кешем не возникают
3. Достаточный набор инструментов редактора для повседневной работы бизнеса любых масштабов
4. Нет багов при копировании ссылок сетевых папок
5. Корректно работает в мобильной версии сайта/ в приложении
6. Всего 2 файла для подключения:

• jodit.min.css - для стилизации
• jodit.min.js - для логики

7. Одновременно корректно могут работать несколько экземпляров редактора
8. Интернет для работы редактора не требуется (актуально для on-premises)

Внешний вид редактора:



Подключение:
1. Создайте модуль HTML-editor

2. Добавьте виджет HtmlEditor в модуль

3. Добавьте файлы jodit.min.css и jodit.min.js во вкладке "файлы" виджета

4. Вставьте код во вкладку "сценарии-клиент" виджета

Спойлер: КОД

Код:

/* Client scripts module */
async function onInit():Promise <void> {
    Context.data.editor_id = "jodit-html-editor-" + getRandomIntString();
    Context.data.editor_block_id = "jodit-html-editor-" + getRandomIntString();
}

function getRandomIntString(max: number = Number.MAX_SAFE_INTEGER, min: number = 0): string {
    min = Math.ceil(min);
    max = Math.floor(max);
    const randomValue = Math.floor(Math.random() * (max - min + 1)) + min;
    return randomValue.toString();
}

function getChangedHtmlText(text: string) {
    Context.data.property = text;
}

5. Добавьте переменные во вкладке "контекст" виджета

6. Вставьте код во вкладке "шаблон" виджета

Спойлер: КОД

Код:

<html>

    <head>
        <meta http-equiv="Cache-control" content="no-cache">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Expires" content="-1">
        <style>
            #<%- Context.data.editor_block_id %> {
                width: 100%;
            }
            #<%- Context.data.editor_block_id %> .elma-form-label{
                word-wrap: break-word;
            }
            .jodit_theme_ivctl {
                background-color: white;
            }
        </style>


    </head>

    <body>

        <div id='<%- Context.data.editor_block_id %>'>
            <div class="elma-form-row ng-untouched ng-pristine ng-valid">
                <div class="elma-form-label">
                    <span class="labelName"><%- Context.data.property_name %></span>
                </div>
                <div class="elma-form-control text-base">
                    <textarea id="<%- Context.data.editor_id %>"></textarea>
                <div>
            </div>
        </div>

        <script defer>

        <%

            let intervalID;
            setTimeout(joditLoadScript, 50);

        function joditLoadScript()
        {
            //Подключение стилей jodit
                let link = document.createElement('link');
                link.type = 'text/css';
                link.rel = 'stylesheet';
                document.head.appendChild(link);
                link.href = UI.widget.filePath + '/jodit.min.css';
     
            let script = document.createElement('script');
            script.src = UI.widget.filePath + '/jodit.min.js';

            script.onload = function () {
                let selectorString = '#' + Context.data.editor_id;
                const editor = Jodit.make(selectorString, {
                zIndex: 0,
                readonly: Context.data.readonly,
                activeButtonsInReadOnly: ['source', 'fullsize', 'print', 'about', 'dots'],
                toolbarButtonSize: 'middle',
                theme: 'default',
                saveModeInCookie: false,
                spellcheck: true,
                editorCssClass: 'jodit_theme_ivctl',
                triggerChangeEvent: true,
                width: '100%',
                minWidth: '800px',
                height: '350px',
                direction: '',
                language: 'auto',
                debugLanguage: false,
                i18n: 'en',
                tabIndex: -1,
                toolbar: true,
                enter: "P",
                defaultMode: Jodit.MODE_WYSIWYG,
                useSplitMode: false,
                colors: {
                    greyscale:  ['#000000', '#434343', '#666666', '#999999', '#B7B7B7', '#CCCCCC', '#D9D9D9', '#EFEFEF', '#F3F3F3', '#FFFFFF'],
                    palette:    ['#980000', '#FF0000', '#FF9900', '#FFFF00', '#00F0F0', '#00FFFF', '#4A86E8', '#0000FF', '#9900FF', '#FF00FF'],
                    full: [
                        '#E6B8AF', '#F4CCCC', '#FCE5CD', '#FFF2CC', '#D9EAD3', '#D0E0E3', '#C9DAF8', '#CFE2F3', '#D9D2E9', '#EAD1DC',
                        '#DD7E6B', '#EA9999', '#F9CB9C', '#FFE599', '#B6D7A8', '#A2C4C9', '#A4C2F4', '#9FC5E8', '#B4A7D6', '#D5A6BD',
                        '#CC4125', '#E06666', '#F6B26B', '#FFD966', '#93C47D', '#76A5AF', '#6D9EEB', '#6FA8DC', '#8E7CC3', '#C27BA0',
                        '#A61C00', '#CC0000', '#E69138', '#F1C232', '#6AA84F', '#45818E', '#3C78D8', '#3D85C6', '#674EA7', '#A64D79',
                        '#85200C', '#990000', '#B45F06', '#BF9000', '#38761D', '#134F5C', '#1155CC', '#0B5394', '#351C75', '#733554',
                        '#5B0F00', '#660000', '#783F04', '#7F6000', '#274E13', '#0C343D', '#1C4587', '#073763', '#20124D', '#4C1130'
                    ]
                },
                colorPickerDefaultTab: 'background',
                imageDefaultWidth: 300,
                removeButtons: [],
                disablePlugins: [],
                extraButtons: [],
                sizeLG: 900,
                sizeMD: 700,
                sizeSM: 400,
                sizeSM: 400,
                buttons: 'bold,italic,underline,strikethrough,eraser,ul,ol,paragraph,hr,link,symbol,undo,redo,fullsize',
                buttonsMD: 'bold,italic,underline,strikethrough,eraser,ul,ol,paragraph,hr,link,symbol,undo,redo,fullsize',
                buttonsSM:  'bold,italic,underline,strikethrough,eraser,ul,ol,paragraph,hr,link,symbol,undo,redo,fullsize',
                buttonsXS: 'bold,italic,underline,strikethrough,eraser,ul,ol,paragraph,hr,link,symbol,undo,redo,fullsize',
                events: {
                    change: function() {
                        Scripts.getChangedHtmlText(editor.getElementValue());
                    },
                    focus: function() {
                        clearInterval(intervalID);
                    },
                    blur: function() {
                        intervalID = setInterval(updateValue, 250, editor);
                    },
                },
                textIcons: false,
            });

            intervalID = setInterval(updateValue, 250, editor);

            };

            document.head.appendChild(script);
        }

        function updateValue(editor) {
            if (Context.data.property != undefined) {
                editor.setEditorValue(String(Context.data.property).replace(/ +/g, ' ').trim());
            }
        }

        %>

        </script>

    </body>

</html>

7. Опубликуйте модуль и HTML редактор станет доступен в виджетах системы
Редактор опубликован в виде исходников, потому что модульная система elma365 на данный момент не поддерживает удаление и если редактор вам не понравится - будет висеть мертвым грузом в системе. А так, обладая исходниками, вы сможете изменять его по своему усмотрению (например, использовать для тестов).

Замечательно выглядит! Но при попытке повторить получил вот такой результат

Тоже не работает. Прошу выложить код с css в head страницы - готовый вариант

У вас css не подключен. Вставьте код из jodit.css в head:

Код:

<head>
...

<style>
  //Код из jodit.css
</style>
</head>

Добрый день! Да, упустил это, за выходные успел исправить этот вопрос.
А можно ли данный функционал расширить, чтоб можно было использовать модуль и для изображений? В частности Drag&Drop??

1. Изменил код (ссылка на стиль теперь присваивается после вставки в dom-элемент - и это работает корректно), теперь нет необходимости вручную вставлять css.
БЫЛО:

Код:

link.href = UI.widget.filePath + '/jodit.min.css';
document.head.appendChild(link);

СТАЛО:

Код:

document.head.appendChild(link);
link.href = UI.widget.filePath + '/jodit.min.css';

2. Технически - добавить drag&drop можно. Исходники на руках - дерзайте) Возможно, добавим через некоторое время. Для нас пока неактуально и нет ресурсов на доработку. Картинки можно вставлять через программу LightShot (вырезаете нужную область, копируете и вставляете в редактор) - в принципе, очень полезная программка.

Добавил вырезание лишних пробелов (между словами, в начале текста, в конце текста):

Код:

editor.setEditorValue(String(Context.data.property).replace(/ +/g, ' ').trim());

А если вставлять только картинку - выходит internal error.
Как это можно победить?
На выходе поле markdown

Смените на "Текст"