WYSIWYG

Общее

Аналогично элементам Textarea и Input, вы можете использовать редактируемый элемент WYSIWYG в шаблонах для редактирования форматированного текста. По умолчанию в демонстрационных версиях Pimcore установлен Quill. Другой редактор можно установить с помощью wysiwyg-событий, которые вы найдете в events.js.

Конфигурация

Имя	Тип	Описание
height	integer	Высота WYSIWYG в пикселях
width	integer	Ширина WYSIWYG в пикселях
class	string	Класс CSS, который добавляется к окружающему контейнеру этого элемента в режиме редактирования
placeholder	string	Текст, отображаемый в поле, когда оно пустое, для указания пользователю ожидаемого типа ввода
defaultValue	string	Значение по умолчанию для доступных параметров. Примечание: Это значение необходимо сохранить перед вызовом функции getData() или использовать функцию setDataFromResource()
required	boolean	(по умолчанию: false) установите значение true, чтобы сделать значение поля обязательным для публикации

Пример

{{ pimcore_wysiwyg("myWYSIWYG", {  
    "height": 600,  
    "width": 1100,  
    "placeholder": "Enter your content"  
}) }}  

Включение Quill

Новым рекомендуемым редактором является Quill. Пожалуйста, ознакомьтесь с readme бандла для получения инструкций по установке.

Включение TinyMce (устарело)

В Pimcore 11 редактор по умолчанию был заменен с CKEditor на TinyMCE и перенесен в PimcoreTinymceBundle. Инструкции по установке можно найти в readme бандла.

Добавление пользовательского редактора

Убедитесь, что вы добавили редактор в pimcore.wysiwyg.editors. Этот массив можно использовать для создания разных редакторов для разных случаев использования (документы, объекты ...):

if(!parent.pimcore.wysiwyg) {  
    parent.pimcore.wysiwyg = {};  
    parent.pimcore.wysiwyg.editors = [];  
}  
parent.pimcore.wysiwyg.editors.push("Custom_Editor");  

Редактор также должен обрабатывать событие pimcore.events.changeWysiwyg чтобы задать значение из WYSIWYG-поля.

document.dispatchEvent(new CustomEvent(pimcore.events.changeWysiwyg, {  
    detail: {  
        e: {target:{id: textareaId}},  
        data: this.activeEditor.getSemanticHTML(), //text of the editor-field  
        context: e.detail.context //the context in which the editor is registered (object, document ...)   
    }  
}));  

Пожалуйста, используйте события из event.js, чтобы привязать ваш редактор к полю и настроить его. Для получения более подробной информации, пожалуйста, ознакомьтесь с QuillBundle.

Расширение конфигурации symfony HTML sanitizer

Редактируемый Wysiwyg использует symfony HTML sanitizer для очистки содержимого HTML от нежелательных тегов и параметров. Конфигурация по умолчанию определяется следующим образом:

framework:  
    html_sanitizer:  
        sanitizers:  
            pimcore.wysiwyg_sanitizer:  
                max_input_length: -1  
                allow_attributes:  
                    pimcore_type: '*'  
                    pimcore_id: '*'  
                allow_relative_links: true  
                allow_relative_medias: true  
                allow_elements:  
                    span: [ 'class', 'style', 'id' ]  
                    div: [ 'class', 'style', 'id' ]  
                    p: [ 'class', 'style', 'id' ]  
                    strong: 'class'  
                    em: 'class'  
                    h1: [ 'class', 'id' ]  
                    h2: [ 'class', 'id' ]  
                    h3: [ 'class', 'id' ]  
                    h4: [ 'class', 'id' ]  
                    h5: [ 'class', 'id' ]  
                    h6: [ 'class', 'id' ]  
                    a: [ 'class', 'id', 'href', 'target', 'title', 'rel', 'style' ]  
                    table: [ 'class', 'style', 'cellspacing', 'cellpadding', 'border', 'width', 'height', 'id' ]  
                    colgroup: 'class'  
                    col: [ 'class', 'style', 'id' ]  
                    thead: [ 'class', 'id' ]  
                    tbody: [ 'class', 'id' ]  
                    tr: [ 'class', 'id' ]  
                    td: [ 'class', 'id' ]  
                    th: [ 'class', 'id', 'scope' ]  
                    ul: [ 'class', 'style', 'id' ]  
                    li: [ 'class', 'style', 'id' ]  
                    ol: [ 'class', 'style', 'id' ]  
                    u: [ 'class', 'id' ]  
                    i: [ 'class', 'id' ]  
                    b: [ 'class', 'id' ]  
                    caption: [ 'class', 'id' ]  
                    sub: [ 'class', 'id' ]  
                    sup: [ 'class', 'id' ]  
                    blockquote: [ 'class', 'id' ]  
                    s: [ 'class', 'id' ]  
                    iframe: [ 'frameborder', 'height', 'longdesc', 'name', 'sandbox', 'scrolling', 'src', 'title', 'width' ]  
                    br: ''  
                    img: [ 'class', 'id', 'alt', 'style', 'src' ]  
                    hr: ''  

Если вы хотите адаптировать эту конфигурацию, пожалуйста, ознакомьтесь с документацией symfony. Добавьте свою пользовательскую конфигурацию в свой проект, например, в config/packages/html_sanitizer.yaml

Примечание: При использовании API для установки данных WYSIWYG, пожалуйста, передавайте закодированные символы для объектов html, например. <,>, & и т.д. Данные кодируются санитайзером перед сохранением в базе данных, и те же закодированные данные будут возвращены API.