laizimo/zimo-article

移动端富文本实践篇（一）

Opened this issue · 0 comments

laizimo commented

前言

本篇文章之前，有一篇前言篇，如果你还未读过，建议你花一分钟的时间，先读一下前言篇。前言篇，篇幅较少，并不会花费你太多的时间，但是概括了接下来几篇文章的主要内容。

本篇文章主要是讲一些移动端富文本开发之前，所需要了解的基础内容。基础内容可以分成三部分。我们首先考虑的是webView与js之间的交互，之后就是原生富文本功能，最后就是Selection和Range的概念。所以，本篇会根据这三部分来详细阐述基础内容。欢迎关注我的github博客。同时也希望你关注和支持我们的项目，github项目地址，谢谢支持。

正文

聊聊webView和js的那点事

我这里并不具体聊webView的具体使用，而是讲一下我们在项目中会使用的js与webView之间的一些信息交互。在这个项目中，我们主要使用了两种方式进行通信：

  1. url拦截

所谓的url拦截，在我的理解中，就是网页可以通过跳转url的方式，将内部信息填入url中，然后webView在其跳转前，将它的url获取到，然后阻断这个过程。然后在对url进行解密，之后拆分里面的信息。都知道url其实是base64编码的，在传输信息的过程，js需要去调用encodeComponentURI函数加密整个信息的。

这里的表达方式有一点俗气，哈哈，也没啥办法，因为通俗易懂吧

  1. 对象映射的方式

对象映射的方式就是，在Android建立一个对象，并添加上webView中提供的注解，然后在内部添加方法，这些添加的方法是可以被js使用的。但是，似乎这种对象映射的方式，并不是特别的安全，容易遭到注入攻击。

  1. alert弹窗方式

这种方式，并没有在我们的项目中使用到。只是，当时使用的是比较老的版本的webview，那里还是具备之前的两种方法的。看过很多的博文，似乎这种方法或许是目前最常用的一种方式，而另外两种已经在新版本的webView中被淘汰了。所以，我们或许会在下个版本去考虑更新这种机制。

交互通信这一方面就聊这么多吧，毕竟我是一个研究js的小渣渣，具体的webView的操作，网上的大佬们已经书写万字了，也并不需要我去多做讲解。之后，会有具体的参考博文赋上。

富文本都会谈到的东西

说到富文本应用的开发，你或许会直接考虑到contenteditable这个属性。因为它可以使得一个块可编辑。但是富文本应用并不仅仅如此。接下来，我们来看看一些我在项目中会经常使用到的API接口：

最重要的接口一定是execCommand函数，这个函数是富文本的灵魂。因为之后所需要去完成的功能——加粗、斜体、删除线、引用、标题h1、h2、h3、h4等，当然也包括图片、链接、分割符，都是需要通过这个函数去进行的。

这个函数接收三个参数：

  1. command => 就是命令，因为原生的函数已经定义了一部分的命令在函数的内部，例如加粗：

    document.execCommand('bold', false, null);

  2. showDefaultUI => 是否展示用户界面，一般都会使用false，项目中并未对这个属性进行设置（忽略）

  3. value => 一些特殊的命令需要插入值时，需要用到这个参数。之后在讲解项目细节时会详细说明。

第二个会使用到的API是——queryCommandState();

它接受一个参数command，然后返回boolean。主要是去判断当前的焦点是否具备command。打个比方，你在使用富文本的时候，你需要去点击内容中的一个部分进行编辑，但是，当你点击时，你需要去做一下底栏按钮间的状态同步。可能这一部分是bold，但是你加粗按钮却没有被激活的话，就非常尴尬了。

第三个会使用的API是——queryCommandValue():

这里也是接受一些特定的命令的插入内容是否存在。我们可以来详细的举个例子：

**场景：**我们需要去插入一个h1标签元素，之后我们又需要去获取到当前位置是否具备h1标签

//插入h1

document.execCommand('formatBlock', false, 'h1');

//获取状态时

var isExist = document.queryCommandValue('formatBlock');

这样我们就可以去，获取当前是否具备h1标签

你可能从来没听过我

最后，我们来看一下，我们之后会涉及到的知识点Selection和Range。

Selection，可以解释为选区。讲的通俗点，整个选区就是文本可以编辑的区块。一般整个窗口只有一个选区。

如何取得选区？可以通过window.getSelection()来获得选区。

讲到选区的话，就必须牵扯到一个概念——Range。Range：字面意思是范围。这个东西大家都见识过。当你在屏幕上，选择复制块的时候，那块全部被蓝色包裹的区域。(底色也可能不是蓝色的，颜色可以修改)。这种块往往可以具备多个，通过ctrl键来增加多个范围块。在富文本的开发中，对于这个运用的也非常之多。

同时，其实焦点也是Range。只是这个Range的start和end重合在了一起。在聚焦的过程中，也会对这一概念进行运用。详情可见

总结

富文本开发的基础内容，就简单的介绍这么一点。后续会随着js的源码一步步的展开分析。

本篇的内容可概括为：

  • js的webView交互
  • 富文本开发基础API
  • Selection和Range简述

这些内容，都是我在富文本开发中会使用到的知识点。

如果你对我写的有疑问，可以评论，如我写的有错误，欢迎指正。你喜欢我的博客，请给我关注Star~呦。大家一起总结一起进步。欢迎关注我的github博客