前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter使用富文本编辑器Zefyr的各种坑坑坑

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

作者头像
IT晴天
发布2020-02-18 15:07:35
3.4K0
发布2020-02-18 15:07:35
举报
文章被收录于专栏:ionic3+ionic3+

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

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

一、pub与源码版本不一致

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

代码语言:javascript
复制
zefyr: ^0.9.1

换成指向源码的方式:

代码语言:javascript
复制
  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文件:

代码语言:javascript
复制
#  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的方式:

代码语言:javascript
复制
  #  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方法,所以补充下面内容即可:

代码语言:javascript
复制
 @override
  // implement currentTextEditingValue
  TextEditingValue get currentTextEditingValue =>
      _lastKnownRemoteTextEditingValue;
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、pub与源码版本不一致
  • 二、有图片时无法转换成Markdown格式
  • 三、Markdown无法转成zefyr的Delta格式
  • 四、不同版本Flutter的SDK可能导致的问题
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档