WYSIWYG-редактор
===================

.. _wysiwyg_editor:

**WYSIWYG-редактор** («What You See Is What You Get» — «что видишь, то и получишь») — визуальный редактор для создания и форматирования контента: текста, таблиц, изображений и формул. Содержимое отображается в процессе редактирования именно так, как оно будет выглядеть в итоге — без необходимости знать разметку.

Редактор в Citeck построен на основе фреймворка `Lexical <https://lexical.dev>`_.

Над областью редактирования расположена панель инструментов WYSIWYG-редактора, при помощи которой можно оформлять текст, вставлять таблицы, изображения, математические формулы.

.. image:: _static/wysiwyg/comment_edit.png
       :width: 700
       :align: center

Рассмотрим ее функционал подробнее:

.. list-table:: 
      :widths: 5 5
      :align: center
      :class: tight-table 

      * - | 

            .. image:: _static/wysiwyg/title.png
                 :width: 200
                 :align: center   

        - | Выбрать уровень заголовков, вида списка и т.д.

      * - | 

            .. image:: _static/wysiwyg/font_size_format.png
                 :width: 200
                 :align: center  

        - | Изменить размер шрифта, применить стиль текста — жирный, курсив, подчёркнутый, добавить блок кода, ссылку

      * - | 

            .. image:: _static/wysiwyg/color.png
                 :width: 200
                 :align: center   

        - | Изменить цвет текста, цвет фона

      * - | 

            .. image:: _static/wysiwyg/format.png
                 :width: 200
                 :align: center   

        - | Изменить выравнивание и отступ

      * - | 

            .. image:: _static/wysiwyg/insert.png
                 :width: 200
                 :align: center   

        - | Вставить объект.
          | Изображение можно вставить как из файла, так и из ссылки.

            .. image:: _static/wysiwyg/pic_01.png
                 :width: 200
                 :align: center   

            .. image:: _static/wysiwyg/pic_02.png
                 :width: 200
                 :align: center   

            .. image:: _static/wysiwyg/pic_03.png
                 :width: 200
                 :align: center   

      * - | 

            .. image:: _static/wysiwyg/upload.png
                 :width: 50
                 :align: center  

          |

            .. image:: _static/wysiwyg/upload_file.png
                 :width: 400
                 :align: center   

        - | Загрузить файл

          | Файл будет отображаться в виде ссылки:

            .. image:: _static/wysiwyg/upload_file_1.png
                 :width: 500
                 :align: center   

          | По клику доступен его просмотр:

            .. image:: _static/wysiwyg/upload_file_2.png
                 :width: 600
                 :align: center   

      * - | Упомянуть пользователя

        - | 

            .. image:: _static/wysiwyg/mention_01.png
                 :width: 200
                 :align: center   


Пример работы с редактором:

.. image:: _static/wysiwyg/wysiwyg_01.png
       :width: 700
       :align: center

Быстрое редактирование выделенного текста
--------------------------------------------

.. image:: _static/wysiwyg/highlighted_area.png
       :width: 700
       :align: center

- **1** - перемещение строки или выделенной области
- **2** - форматирование выделенного текста

Добавление и редактирование таблицы
------------------------------------

Выберите в меню **Вставка - Таблица**, выберите количество строк и столбцов:

.. image:: _static/wysiwyg/table_01.png
       :width: 300
       :align: center

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

.. list-table::
      :widths: 20 20
      :align: center

      * - |

            .. image:: _static/wysiwyg/table_02.png
                  :width: 600
                  :align: center

        - |

            .. image:: _static/wysiwyg/table_03.png
                  :width: 200
                  :align: center

.. _wysiwyg_markdown:

Вставка текста в формате Markdown
----------------------------------

При вставке текста из буфера обмена в **пустой** редактор происходит автоматическое определение формата Markdown. Если вставляемый текст содержит элементы разметки Markdown (заголовки, списки, выделение текста, ссылки, блоки кода, таблицы и др.), он автоматически преобразуется в форматированный контент.

Условия автоматической конвертации:

- редактор пуст (не содержит текста)
- текст содержит не менее двух различных элементов Markdown-разметки
- в буфере обмена нет HTML-данных (только plain text)

Если условия не выполнены, текст вставляется как обычно, без преобразования.