Включение возможности создания и редактирования таблиц в редакторе TinyMCE.

Гобелен - кликните для возврата на главную

Не прошло и месяца а Фурмановская ЦРБ в очередной раз попала в историю. На этот раз сотрудница клеветала на пациентов, а именно огласку получил случай когда сотрудница назвала пациента алкашём.

Ровно 3 года назад произошло событие, которое подарило жителям планеты Змеля новый чистый праздник 6 апреля - в этот замечательный день земля забрала гнить негодяя и СПАМера Жладимира Вольфовича Жириновского.

Начал разбираться с информацией которая находится в HTTPS клиентском запросе рукопожатия.

Обратите внимание! Объект изображённый на гобилене может отличаться от общепринятого вида описанного объекта. Тут дело в том что художник видит именно так!

104 549 руб.

Описание товара

Сейчас не увидел в настройках возможности создавать и редактировать таблицы. Можно ли включить такой функционал.

Да, в TinyMCE можно включить функционал для создания и редактирования таблиц. Для этого нужно добавить плагин table и настроить панель инструментов (toolbar) или меню для работы с таблицами.

Шаг 1: Подключение плагина table

Плагин table отвечает за работу с таблицами. Его нужно добавить в параметр plugins при инициализации TinyMCE.

JavaScript
    
tinymce.init({
  selector: '.wysiwyg-editor',
  plugins: 'table',//Подключаем плагин для таблиц
});

Шаг 2: Настройка панели инструментов (toolbar)

Чтобы добавить кнопки для работы с таблицами на панель инструментов, используйте параметр toolbar. Вот основные команды для таблиц:

  • table: Вставка таблицы;
  • tableprops: Свойства таблицы;
  • tabledelete: Удаление таблицы;
  • tablecellprops: Свойства ячейки;
  • tablemergecells: Объединение ячеек;
  • tablesplitcells: Разделение ячеек;
  • tableinsertrowbefore: Вставить строку выше;
  • tableinsertrowafter: Вставить строку ниже;
  • tabledeleterow: Удалить строку;
  • tableinsertcolbefore: Вставить столбец слева;
  • tableinsertcolafter: Вставить столбец справа;
  • tabledeletecol: Удалить столбец.

Пример настройки панели инструментов:

JavaScript
    
tinymce.init({
  selector: '.wysiwyg-editor',
  plugins: 'table',
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | table',
});

Шаг 3: Настройка меню для таблиц

Если вы хотите добавить пункты для работы с таблицами в меню, используйте параметр menu. Например:

JavaScript
    
tinymce.init({
  selector: '.wysiwyg-editor',
  plugins: 'table',
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | table',
  menu: {
    table: { title: 'Таблица', items: 'tableprops tabledelete | tablecellprops | tablemergecells tablesplitcells | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol' },
  },
  menubar: 'file edit insert format table',//Добавляем меню "Таблица"
});

Шаг 4: Пример полного кода

Вот пример полного кода с включённым функционалом для работы с таблицами:

HTML
    
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Редактор TinyMCE с таблицами</title>
    <!-- Подключение TinyMCE -->
    <script src="/path/to/local/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: '.wysiwyg-editor',
            language: 'ru', // Русский язык
            plugins: 'table', // Подключаем плагин для таблиц
            toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | table', // Панель инструментов
            menu: {
                table: { title: 'Таблица', items: 'tableprops tabledelete | tablecellprops | tablemergecells tablesplitcells | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol' },
            },
            menubar: 'file edit insert format table', // Добавляем меню "Таблица"
        });
    </script>
</head>
<body>
    <h1>Редактор TinyMCE с таблицами</h1>
    <textarea class="wysiwyg-editor">Начните писать здесь...</textarea>
</body>
</html>

Как это работает:

  • Плагин table: добавляет функционал для создания и редактирования таблиц.

  • Панель инструментов:

    • Кнопка table позволяет вставить таблицу.
    • Остальные команды (например, tableprops, tablemergecells) можно добавить в меню.
  • Меню "Таблица": Позволяет управлять таблицами через выпадающее меню.

Дополнительные настройки

Если вам нужно больше контроля над таблицами, TinyMCE предоставляет дополнительные параметры:

Настройка стилей таблиц:

Вы можете указать CSS-классы для таблиц, чтобы они автоматически применялись при создании:

JavaScript
    
tinymce.init({
  selector: '.wysiwyg-editor',
  plugins: 'table',
  toolbar: 'table',
  table_class_list: [
    { title: 'Без стиля', value: '' },
    { title: 'Полосатая', value: 'striped-table' },
    { title: 'С рамкой', value: 'bordered-table' },
  ],
});

Настройка размеров таблиц:

Вы можете указать допустимые размеры таблиц:

JavaScript
    
tinymce.init({
  selector: '.wysiwyg-editor',
  plugins: 'table',
  toolbar: 'table',
  table_default_attributes: {
    border: '1',
  },
  table_default_styles: {
    width: '100%',
  },
});

Итог

Теперь редактор TinyMCE поддерживает создание и редактирование таблиц. Вы можете настроить панель инструментов и меню так, как вам удобно.

Другие товары

Вы так же можете прочитать следующие статьи: