如何使用 react-quill 添加从右到左的支持

Question

我们正在将 react-quill 用于富文本编辑器，我们需要添加 rtl 支持。知道怎么做吗？

我们正在使用打字稿进行构建。

Answer 1

遵循 react-quill's toolbar customization docks, and quill's toolbar customization docks，这是我的解决方案：

import React from 'react'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'


const MyQuill: React.FunctionComponent = () => {


  const modules = {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }] // this is rtl support
    ],
  }

  const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ]

  return (
    <ReactQuill
      theme="snow"
      modules={modules}
      formats={formats}
    />
  )
}

export default MyQuill

Answer 2

您也可以使用 CSS only 实现相同的效果，并且您无需通过单击该选项在 LTR 和 RTL 之间切换。

这里是 CSS 样式，目标是编辑器的文本区域并改变文本的方向：

.ql-editor {
  direction: rtl;
  text-align: right;
}

如何使用 react-quill 添加从右到左的支持

How to add right-to-left support with react-quill

reactjs

typescript

quill

react-quill