如何将React-Quill的默认文本对齐设置为右对齐？

下面提供几种更优的实现方式，替代手动给元素加类的操作：

方法一：利用Quill实例API初始化对齐 #

通过ReactQuill的onReady事件，在编辑器实例加载完成后，调用原生Quill的format方法设置默认右对齐，这是最符合编辑器原生逻辑的方式。

修改后的组件代码：

import dynamic from 'next/dynamic'
import { ReactQuillProps, Quill } from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { useRef } from 'react'

const ReactQuill = dynamic(import('react-quill'), { ssr: false })

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ direction: 'rtl' }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],
  ['clean'],
]

export default function BasicTextEditor({
  value,
  onChange,
  placeholder,
}: {
  placeholder: string
  value: string
  onChange: (content: string) => void
}) {
  const quillRef = useRef<Quill | null>(null)

  const handleEditorReady = (quillInstance: Quill) => {
    quillRef.current = quillInstance
    // 初始化设置全局右对齐
    quillInstance.format('align', 'right')
  }

  const quillProps: ReactQuillProps = {
    modules: {
      toolbar: toolbarOptions,
    },
    onReady: handleEditorReady,
  }

  return (
    <ReactQuill
      className="whitespace-pre-line"
      {...quillProps}
      placeholder={placeholder}
      theme="snow"
      value={value}
      onChange={onChange}
      formats={[
        'bold', 'italic', 'underline', 'strike',
        'blockquote', 'code-block',
        'header', 'list', 'bullet', 'ordered',
        'direction', 'color', 'background', 'align',
        'link', 'image', 'video'
      ]}
    />
  )
}

说明：format('align', 'right')会设置编辑器的默认格式，后续用户输入的内容会自动继承右对齐，同时用户仍可通过工具栏手动切换对齐方式，不会被强制覆盖。

方法二：CSS强制设置内容对齐 #

如果想简单粗暴地让编辑器所有内容默认右对齐，可以添加自定义样式：

.ql-editor {
  text-align: right !important;
}

说明：这种方式通过样式强制覆盖，优点是实现简单，但会忽略编辑器内部的格式设置，用户手动切换对齐可能无效，适合不需要用户修改对齐的场景。

方法三：设置初始内容的对齐格式 #

如果编辑器初始值为空，可以设置带有右对齐格式的初始HTML内容，让后续输入继承该格式：

// 在组件内处理初始值
const initialValue = value || '<p style="text-align: right;"></p>'

// 传递给ReactQuill
<ReactQuill
  // 其他属性
  value={initialValue}
/>

说明：这种方式适合需要保留用户已有内容格式，仅在空内容时默认右对齐的场景。

内容的提问来源于stack exchange，提问作者Samyar