...

HTML-редактор JODIT

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

?

HTML vs Markdown

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

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

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

    13%
  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(maxnumber Number.MAX_SAFE_INTEGERminnumber 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(textstring) {
        
    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 %> {
                    
    width100%;
                }
                
    #<%- Context.data.editor_block_id %> .elma-form-label{
                    
    word-wrap: break-word;
                }
                .
    jodit_theme_ivctl {
                    
    background-colorwhite;
                }
            </
    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(joditLoadScript50);

            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, {
                    
    zIndex0,
                    
    readonlyContext.data.readonly,
                    
    activeButtonsInReadOnly: ['source''fullsize''print''about''dots'],
                    
    toolbarButtonSize'middle',
                    
    theme'default',
                    
    saveModeInCookiefalse,
                    
    spellchecktrue,
                    
    editorCssClass'jodit_theme_ivctl',
                    
    triggerChangeEventtrue,
                    
    width'100%',
                    
    minWidth'800px',
                    
    height'350px',
                    
    direction'',
                    
    language'auto',
                    
    debugLanguagefalse,
                    
    i18n'en',
                    
    tabIndex: -1,
                    
    toolbartrue,
                    
    enter"P",
                    
    defaultModeJodit.MODE_WYSIWYG,
                    
    useSplitModefalse,
                    
    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',
                    
    imageDefaultWidth300,
                    
    removeButtons: [],
                    
    disablePlugins: [],
                    
    extraButtons: [],
                    
    sizeLG900,
                    
    sizeMD700,
                    
    sizeSM400,
                    
    sizeSM400,
                    
    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(updateValue250editor);
                        },
                    },
                    
    textIconsfalse,
                });

                
    intervalID setInterval(updateValue250editor);

                };

                
    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 КБ
      Просмотров:
      20
    Последнее редактирование: 20 окт 2022
  2. Codain

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

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

    d.nikonorov Участник

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

    daniyar1997 Участник

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

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

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

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

    daniyar1997 Участник

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

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

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

    d.nikonorov Участник

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