quill-better-table: предоставьте текстовому редактору quill мощные возможности редактирования таблиц!

внешний интерфейс

задний план

Я связался с quilljs, потому что предыдущий редактор форматированного текста компании больше не мог соответствовать большему количеству сценариев создания контента, поэтому она планировала разработать более индивидуальный редактор. После некоторых исследований меня привлекла мощная масштабируемость quilljs и его уникальный дизайн пергамента и дельты, и я выбрал его (конечно, звезда 2W+ также является важной причиной). Но «функции редактирования таблиц» мешают этому превосходному редактору форматированного текста, что можно найти в выпуске quill #117:Add support for tableВыучите один или два.

По замыслу автора quill, quilljs 2.0 будет поддерживать редактирование таблиц, но функции очень ограничены, такие как: нет переноса строк в таблице, нет возможности объединять/разделять ячейки и т.д. Поэтому я решил усердно работать над дополнением этой недостающей функции для quilljs.

quill-better-table

Основанный на модуле формы quilljs v2.0.0-dev.x, он поддерживает множество общих функций и направлен на устранение недостатков редактора quill при редактировании форм.
git-репозиторий:GitHub.com/soccer кстати…
Онлайн-демонстрация:codepen demo

编辑器截图

编辑器截图

Функции

  • Поддерживает разрывы строк в ячейках таблицы (клавиша ввода);
  • Выберите несколько ячеек (область таблицы) путем перетаскивания, появится подсказка с подсветкой синего поля;
  • Используйте контекстное меню для добавления новых столбцов слева/справа от выбранной области таблицы;
  • Используйте контекстное меню, чтобы добавить новую строку выше/ниже выбранной области таблицы;
  • Удалить строку/столбец, расположенные в области выделения перетаскиванием;
  • Пакетное слияние/разделение ячеек;
  • Перетащите инструмент управления столбцом в верхней части таблицы, чтобы изменить ширину соответствующего столбца таблицы.

Условия и положения

quill-better-tableОсновываясь на реализации quilljs версии 2.0, стабильная версия quilljs версии 2.0 еще не выпущена, и ее нужно использовать осторожно (O(∩_∩)O~ я уже использовал 2.0 в производственной среде, держите ее) .
Поскольку я использую внешние пакеты веб-пакетов для указания внешних зависимостей для упаковки, обязательно предоставьте объект Quill объекту окна или введите quilljs через теги сценария, чтобы quill-better-table мог получить зависимости.

Установить

npm install quill-better-table

Применение

  1. Загрузить внешние зависимости:
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.min.js" type="text/javascript"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/2.0.0-dev.3/quill.snow.min.css" rel="stylesheet">
<link href="unpkg.com/quill-better-table@1.1.0/dist/quill-better-table.css" rel="stylesheet">
  1. Специальное использование ES6:
import QuillBetterTable from 'quill-better-table'

Quill.register({
  'modules/better-table': QuillBetterTable
}, true)

window.onload = () => {
  const quill = new Quill('#editor-wrapper', {
    theme: 'snow',
    modules: {
      table: false,  // disable table module
      'better-table': {
        operationMenu: {
          items: {
            unmergeCells: {
              text: 'Another unmerge cells name'
            }
          }
        }
      },
      keyboard: {
        bindings: QuillBetterTable.keyboardBindings
      }
    }
  })

  document.body.querySelector('#insert-table')
    .onclick = () => {
      let tableModule = quill.getModule('better-table')
      tableModule.insertTable(3, 3)
    }
}

API модуля

Во-первых, вы можете использоватьquill.getModule(module_name)Получатьquill-better-table:

let tableModule = quill.getModule('better-table')

tableModule.getTable(range = quill.getSelection())

Получите информацию о таблице, переданную в позиции диапазона, и верните массив с текущим TableContainer, TableRow, TableCell, смещением.

module.getTable()  // current selection
module.getTable(range)
// [TableContainer, TableRow, TableCell, 0]

tableModule.insertTable(rows: Number, columns: Number)

Вставить новую таблицу в позицию курсора

tableModule.insertTable(3, 3)

Элемент конфигурации модуля

В настоящее времяquill-better-tableтолько при условииКонтекстное меню (operationMenu)Вариант конфигурации:

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    table: false,  // disable table module
    'better-table': {
      operationMenu: {
        items: {
          unmergeCells: {
            text: 'Another unmerge cells name'
          }
        }
      }
    },
    keyboard: {
      bindings: QuillBetterTable.keyboardBindings
    }
  }
})

operationMenu.items

Меню операций, вызываемое правой кнопкой мыши, открывает все функции управления по умолчанию. БудуitemsОдин из элементов настроен какfalseДаже если эта операция отключена, соответствующая кнопка не появится в контекстном меню.

items: {
  {
    operationKey: {
      text: 'foo'
    },
    
    operationKey: false
  }
}

operationKeyУказывает имя функции, в следующем списке перечислены все имена функций для настройки:

  • insertColumnRight
  • insertColumnLeft
  • insertRowUp
  • insertRowDown
  • mergeCells
  • unmergeCells
  • deleteColumn
  • deleteRow
  • deleteTable

operationKey.textУказывает текст кнопки, функция которой находится в контекстном меню Текст кнопки можно настроить по своему усмотрению.

наконец

еслиquill-better-tableможет помочь вам, я надеюсь, что вы можете ответить, по электронной почте илиgit issuesВыдвигайте свои ценные предложения, я буду продолжать усердно работать и постоянно улучшать его. Последующий план подробно объяснит основные принципы quill-better-table в другой статье.

Кстати, не забудьте звездочку в правом верхнем углу github~

Категории