2021-06-25

Flutter使用富文本编辑器Zefyr的各种坑坑坑

IT晴天关注

0.7852020.01.22 12:09:22字数 634阅读 7,936

个人觉得当前Flutter富文本编辑器勉强能用的是：zefyr

使用过程中发现有很多坑，稍微记录一下。

一、pub与源码版本不一致

首先遇到几个坑是0.8.0版本的，源码0.9.1已经修复了，但是它迟迟没有发布到pub上（现在已更新了）。这个时候把pubspec.yaml中引用方式：

zefyr: ^0.9.1

换成指向源码的方式：

  zefyr:
    git:
      url: git@github.com:memspace/zefyr.git
      path: packages/zefyr     

这样就先解决了部分问题。

二、有图片时无法转换成Markdown格式

zefyr默认数据格式是Delta(json)格式，如果要以markdown格式显示，调用notusMarkdown.encode()进行格式转换，就会报下面错误：

EmbedAttribute in notusMarkdown.encode()

是因为notus包中的markdown.dart对于图像转换有bug，作者说到zefyr:1.0版本就会修复，但大多人估计和我一样等不了，这时可以调整新增以下红框内容：

新增修改

所以，把上述包的引入方式，改为本地引用，首先下载zefyr源码中packages文件夹到项目根目录下：

image.png

再按上述修改markdown.dart文件，同时修改项目的pubspec.yaml文件：

#  notus: ^0.1.5
  notus:
    path: './packages/notus'
#  zefyr: ^0.9.1
  zefyr:
    path: './packages/zefyr'

这时运行 flutter packages get会报错，因为zefyr默认依赖于网络的notus，要把zefyr的pubspec.yaml中的依赖也改成path的方式：

  #  notus: ^0.1.0
  notus:
    path: '../notus'

这样就解决了json转markdown的问题。

三、Markdown无法转成zefyr的Delta格式

本想着既然能转成markdown格式，那干脆存储成markdown格式，方便内容传播复用，结果发现有notusMarkdown.decode方法，但是里面没有实现！！作者说要等到zefyr:1.0！！！，也就是说，想编辑markdown文件？对不起，不支持！

所以建议以json存储、json加载编辑、json转换成markdown显示。

四、不同版本Flutter的SDK可能导致的问题

部分版本SDK会报错:

TextInputClient.currentTextEditingValue未实现

因为zefry/lib/src/widgets/input.dart文件中， InputConnectionController implements TextInputClient，但是没有实现currentTextEditingValue方法，所以补充下面内容即可：

 @override
  // implement currentTextEditingValue
  TextEditingValue get currentTextEditingValue =>
      _lastKnownRemoteTextEditingValue;

五、zefry的Delta格式无法与quill.js的Delta互转

在手机端可以用这个包：Quill-Zefyr-Bijection
而在PC端，如果用quill.js的话，可以把上述包代码翻译成js版本。

六、zefry的替代品

受够了zefry，可以尝试使用 html_editor或 flutter_html_editor

6人点赞

Flutter