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

Question

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

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

Answer 1

CSS only您也可以通过单击选项在 LTR 和 RTL 之间切换，也可以实现相同的目的。

这是针对编辑器文本区域并更改文本方向的 CSS 样式：

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

Answer 2

继react-quill 的工具栏自定义停靠点和quill 的工具栏自定义停靠点之后，这是我的解决方案：

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