手机上 markdown 编辑器的设计与实现?



    1. 设计

      1. 如何设计,例如在桌面上的 markdown 一般是一个编辑框,一个是预览框。在手机上,是否还要如此,也就是提供一个编辑页面和一个预览页面。

      2. 如果不设计成上诉的传统页面,该如何设计?(编辑页面及时渲染?)

    2. 如何将 markdown 变成可看的富文本。

      有许多同学或许会说,直接找 markdown2html 的库即可。这个确实可行,但是不是每个 markdown2html 支持的 markdown 拓展都一样的,例如表格其实是 markdown 的拓展,数学公式流程图甘特图等都是 markdown 的拓展,所以每个 markdown2html 的库对输入的 markdown 都有不同的 html 输出。

      hoedown 是我使用的一个 markdown2html 的一个库。

    3. 获取到 markdown2html 的 html 文本,用什么来展示 html?

      其实有三个方案。

      1. 直接使用 Text 或者 TextEdit 这些标签,设置 textFormatRichText 即可。但是这些标签对富文本可以,但是渲染出来的效果不尽人意,例如设置 background 是不起作用的。

      2. 网页模块。桌面使用 WebKit,手机使用 QtWebView 这个模块,桌面系统有 WebKitWebEngine 两个方案。但是手机上的 Qt 网页解决方案还不成熟呢。由于 QtWebView 模块提供的接口太少,以至于只能用来展示内容,做不了其他高级交互,可定制性弱了许多。

      3. 使用 QML 控件来渲染 html,听起来有点天马行空,但是未尝不可。使用 markdown2html 获取到的 html 可以使用一些 html 解析库来获取树形结构,就可组织 QML 进行渲染。不过这个工程庞大啊。

      gumbo-parser 是谷歌推出的一个 html5 解析器,可以获取到 html 的结构树。

    欢迎大家就上诉的问题提出建议~


  • 网站研运

    @qyvlik 如果真的要渲染Markdown的话,可以尝试一下Qt Quick的Text、TextEdit、TextArea。当然,还是可以改改Qt的源码,实现自己的一套Markdown的。



  • @jcy手机上 markdown 编辑器的设计与实现? 中说:

    Text、TextEdit、TextArea

    Text、TextEdit、TextArea 这些尝试过了。效果不佳。


  • 网站研运

    @qyvlik Qt是不佳,但是提供了一个思路,只要像Text等一样封装字符处理引擎,还是可以制作出比较满意的markdown编辑器的。



  • @qyvlik 这个脑洞好棒,支持~~


 

最近的回复

  • 随后在git for windows这个软件中输入

    git clone git@git.coding.net:jiangcaiyang1/qtdreamrelease_windows.git

    就可以获得一个空的项目了。其它的项目也是同样的操作方法。然后呢,将此作为自动构建的代码库吧。
    此次介绍就是这样~😘 😘 🐧

    阅读更多
  • 0_1540027445466_很好.jpg
    萌梦安装包的分发始终是一个难题。要有一个稳定并且有效的方法进行分包,才能让大家都能够享受到萌梦动作编辑器的最新功能。我们目前有两种分发的方法:

    离线安装包。通常的位置是
    1.1 百度云盘
    1.2 QQ群文件
    1.3 github
    其中百度云盘和QQ群文件不会定期地更新,只有github的文件会定期更新。因为构建脚本要求每次有更改,都让github的文件更新。

    在线安装包。通常的位置是
    2.1 百度云盘
    2.2 QQ群文件
    2.3 github
    这里在线安装包的代码库主要还是在github中,在线安装包非常依赖CDN加速。目前github这块儿在国内做得不太好,还是希望在国内找一个类似的加速。目前可以选的只有两家:

    码云

    coding

    因为以前做过coding的加速,目前coding已经和腾讯云战略合作,所有的代码都要迁移到腾讯云了。而且对于代码库的空间要求变高了。128M。目前我的一个账号显然满足不了要求。所以有必要再注册一个账号。

    下面记录一下新建coding代码库的方法,并且尝试将萌梦安装包的线上代码库部分移动到coding代码库中。

    注册

    到这个位置注册。

    https://coding.net/register

    相信很快就会带你跳转到腾讯云中。不过这里我选择的是邮箱的方式,因为我希望注册尽量多的账号。

    设置ssh密钥

    进入控制台后,是这样的:
    0_1540028446495_2eeb7e93-c15b-4c82-9b36-58e1c304ea3f-image.png
    这个时候,我们要先创建项目,然后ssh的公钥。
    0_1540028822318_b3e81b93-099c-42d5-820d-deaf8d445913-image.png

    创建以后,开始部署公钥。在这里:
    0_1540028925337_d8059b64-8535-45e5-ba4c-d7454505aa5a-image.png
    这期间最好用OpenSSL生成SSH密钥。
    我使用的是git for windows来生成密钥的。方法是

    ssh-keygen

    如果你生成好了密钥,可以直接打开密钥内容看看:

    cat ~/.ssh/id_rsa.pub

    然后粘贴到网站的文本框中。

    添加好了之后,勾选“准许推送权限”,需要推送代码到代码库中。

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔