Flutter中如何添加带默认阿拉伯字体的RTL富文本编辑器

我想在Flutter应用中实现支持阿拉伯语的所见即所得（WYSIWYG）HTML编辑器，试用了以下几个包，但均未达到预期效果：

• flutter_quill：存在项目符号对齐和默认字体问题（示例截图如下）
• super_editor：试用后未达到预期效果
• html_editor_enhanced：该包支持添加更多Summernote RTL扩展，但我不知道具体实现方法

我使用flutter_quill的代码示例如下：

QuillController controller = QuillController.basic();
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Flutter Quill'),
      actions: [
        IconButton(
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) => SecondEditor()));
            },
            icon: const Icon(Icons.edit_road)),
        IconButton(
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) => SuperEditView()));
            },
            icon: const Icon(Icons.superscript)),
        IconButton(
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => HtmlEditorExample(
                        title: 'aaa',
                      )));
            },
            icon: const Icon(Icons.html)),
      ],
    ),
    body: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Directionality(
        textDirection: TextDirection.ltr,
        child: Column(
          children: [
            QuillToolbar.basic(
              locale: const Locale('ar'),
              showDirection: true,
              showAlignmentButtons: true,
              showDividers: false,
              controller: controller,
              showFontFamily: true,
              showFontSize: false,
              showInlineCode: false,
              showListCheck: false,
              showClearFormat: false,
              showSearchButton: false,
              fontFamilyValues: const {'JF Flat': 'jfflat', 'Flat Jooza': 'flatjooza'},
              showSmallButton: true,
            ),
            Expanded(
              child: QuillEditor.basic(
                controller: controller,
                readOnly: false, // true for view only mode
                locale: const Locale('ar'),
              ),
            )
          ],
        ),
      ),
    ),
  );
}

解决方案 #

1. 修复flutter_quill的阿拉伯语适配问题 #

项目符号对齐问题

将外层Directionality的textDirection改为TextDirection.rtl，同时自定义列表样式确保对齐正确：

Directionality(
  textDirection: TextDirection.rtl,
  child: Column(
    children: [
      QuillToolbar.basic(/* 原有配置 */),
      Expanded(
        child: QuillEditor.basic(
          controller: controller,
          readOnly: false,
          locale: const Locale('ar'),
          customStyles: DefaultStyles(
            lists: DefaultListStyles(
              ordered: DefaultListStyle(
                textDirection: TextDirection.rtl,
                alignment: WrapAlignment.end,
              ),
              bullet: DefaultListStyle(
                textDirection: TextDirection.rtl,
                alignment: WrapAlignment.end,
              ),
            ),
          ),
        ),
      )
    ],
  ),
)

默认字体问题

先在pubspec.yaml中配置自定义字体，再通过customStyles设置编辑器默认字体：

QuillEditor.basic(
  controller: controller,
  readOnly: false,
  locale: const Locale('ar'),
  customStyles: DefaultStyles(
    paragraph: DefaultTextBlockStyle(
      TextStyle(fontFamily: 'jfflat', fontSize: 16),
      const Tuple2(16, 16),
      const Tuple2(0, 0),
      null,
    ),
  ),
)

2. super_editor的阿拉伯语适配 #

直接通过textDirection参数设置RTL方向，若仍有布局问题可自定义组件样式：

SuperEditor(
  editor: editor,
  textDirection: TextDirection.rtl,
)

3. html_editor_enhanced添加Summernote RTL扩展 #

通过customOptions添加RTL工具栏按钮，或引入第三方扩展脚本：

HtmlEditor(
  controller: controller,
  htmlEditorOptions: HtmlEditorOptions(
    hint: 'أكتب هنا...',
    customOptions: {
      'summernote': {
        'toolbar': [
          ['direction', ['rtl']],
          // 其他工具栏配置
        ],
      },
    },
  ),
  customHtml: '''
    <script src="https://cdn.jsdelivr.net/npm/summernote-rtl@0.8.18/dist/summernote-rtl.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote-rtl@0.8.18/dist/summernote-rtl.min.css">
  ''',
  otherOptions: OtherOptions(height: 400),
)

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