手机上 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 这个脑洞好棒,支持~~


 

最近的回复

  • 纹理滤波

    在纹理映射的过程中,如果图元的大小不等于纹理的大小,OpenGL便会对纹理进行缩放以适应图元的尺寸。我们可以通过设置纹理滤镜来决定OpenGL对某个纹理采用的放大、缩小的算法

    滤镜 描述 GL_NEAREST 取最邻近像素 GL_LINEAR 线性内部插值 GL_NEAREST_MIPMAP_NEAREST 最近多贴图等级的最邻近像素 GL_NEAREST_MIPMAP_LINEAR 在最近多贴图等级的内部线性插值 GL_LINEAR_MIPMAP_NEAREST 在最近多贴图等级的外部线性插值 GL_LINEAR_MIPMAP_LINEAR 在最近多贴图等级的外部和内部线性插值

    阅读更多
  • @大黄老鼠 你的视频是挺诡异的

    阅读更多
  • @青山白云 和纹理映射的那个骰子一样,跑出来的骰子感觉不对

    阅读更多

关注我们

微博
QQ群











召唤蕾姆