...

HTML-редактор JODIT

Тема в разделе "Примеры решений и дополнительных модулей", создана пользователем daniyar1997, 12 окт 2022.

Метки:
?

HTML vs Markdown

  1. HTML - редактор более удобен и функционален в большинстве случаев

    Голосов: 6
    67%

  2. Markdown - редактор более удобен и функционален в большинстве случаев

    Голосов: 2
    22%

  3. Удобство и функциональность редакторов сильно зависит от области использования

    Голосов: 1
    11%
  1. daniyar1997

    daniyar1997 Участник

    Разработан модуль 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.jpg
    2.jpg

    Подключение:
    1. Создайте модуль HTML-editor
    3.jpg
    2. Добавьте виджет HtmlEditor в модуль
    4.jpg
    3. Добавьте файлы jodit.min.css и jodit.min.js во вкладке "файлы" виджета
    5.jpg
    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.jpg
    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 на данный момент не поддерживает удаление и если редактор вам не понравится - будет висеть мертвым грузом в системе. А так, обладая исходниками, вы сможете изменять его по своему усмотрению (например, использовать для тестов).

    Вложения:

    • jodit.zip
      Размер файла:
      218,6 КБ
      Просмотров:
      29
    Последнее редактирование: 20 окт 2022
    daniyar1997 12 окт 2022
    #1
  2. Codain

    Codain Активный участник

    Замечательно выглядит! Но при попытке повторить получил вот такой результат
    upload_2022-10-13_16-37-6.png
    Codain 13 окт 2022
    #2
  3. d.nikonorov

    d.nikonorov Участник

    Тоже не работает. Прошу выложить код с css в head страницы - готовый вариант
    d.nikonorov 14 окт 2022
    #3
  4. daniyar1997

    daniyar1997 Участник

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

    <    style>
          //Код из jodit.css
    </style>
    </    head>
    daniyar1997 14 окт 2022
    #4
  5. Codain

    Codain Активный участник

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

    daniyar1997 Участник

    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 (вырезаете нужную область, копируете и вставляете в редактор) - в принципе, очень полезная программка.
    Последнее редактирование: 17 окт 2022
    daniyar1997 17 окт 2022
    #6
  7. daniyar1997

    daniyar1997 Участник

    Добавил вырезание лишних пробелов (между словами, в начале текста, в конце текста):
    Код:
    
editor.setEditorValue(String(Context.data.property).replace(/ +/g, ' ').trim());
    Последнее редактирование: 24 окт 2022
    daniyar1997 24 окт 2022
    #7
  8. Codain

    Codain Активный участник

    А если вставлять только картинку - выходит internal error.
    Как это можно победить?
    На выходе поле markdown
    Codain 24 окт 2022
    #8
  9. d.nikonorov

    d.nikonorov Участник

    Смените на "Текст"
    d.nikonorov 28 окт 2022
    #9
Вы должны войти или зарегистрироваться, чтобы ответить.