富文本编辑器 - RichEditor

基本功能

RichEditor 是一个继承自 WebView 的自己定义 view，枚举类型 Type 定了它所支持的排版格式：

public enum Type {
  BOLD,
  ITALIC,
  SUBSCRIPT,
  SUPERSCRIPT,
  STRIKETHROUGH,
  UNDERLINE,
  H1,
  H2,
  H3,
  H4,
  H5,
  H6
}

首先在构造函数中载入一个 html 文件。

private static final String SETUP_HTML = "file:///android_asset/editor.html"

public RichEditor(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  setVerticalScrollBarEnabled(false);
  setHorizontalScrollBarEnabled(false);
  getSettings().setJavaScriptEnabled(true);
  setWebChromeClient(new WebChromeClient());
  setWebViewClient(createWebviewClient());

  // 载入 html 文件
  loadUrl(SETUP_HTML);

  applyAttributes(context, attrs);
}

当中 html 文件 - editor.html 载入了两个 css 文件 - normalize.css & style.css。一个 js 文件 - rich_editor.js。

body 中插入了一个 contentEditable="true" 的 div。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="editor" contentEditable="true"></div>
    <script type="text/javascript" src="rich_editor.js"></script>
  </body>
</html>

rich_editor.js 中定义了非常多排版功能的 API，RichEditor 相似 proxy。对外提供了 Java API。

public void setEditorFontColor(int color) {
  String hex = convertHexColorString(color);
  exec("javascript:RE.setBaseTextColor('" + hex + "');");
}

当中 exec 用于运行 js 代码。

protected void exec(final String trigger) {
  if (isReady) {
    load(trigger);
  } else {
    postDelayed(new Runnable() {
      @Override public void run() {
        exec(trigger);
      }, 100);
    }
  }
}

仅仅有当 rich_editor.html 载入完毕后 isReady 才会被置为 true。

protected class EditorWebViewClient extends WebViewClient {
  @Override public void onPageFinished(WebView view, String url) {
    isReady = url.equalsIgnoreCase(SETUP_HTML);
    if (mLoadListener != null) {
      mLoadListener.onAfterInitialLoad(isReady);
    }
  }
  // other methods
}

构造函数在载入 editor.html 之前已经设置了一个 EditorWebViewClient 的实例。

public RichEditor(Context context, AttributeSet attrs, int defStyleAttr) {
  // other statements
  setWebViewClient(createWebviewClient());
  loadUrl(SETUP_HTML)
  // other statements
}

protected EditorWebViewClient createWebviewClient() {
  return new EditorWebViewClient();
}

当 editor.html 载入完毕，isReady 被设为 true 之后，exec 方法就能够调用 load(trigger) 运行 js 了。

private void load(String trigger) {
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    evaluateJavascript(trigger, null);
  } else {
    loadUrl(trigger);
  }
}

evaluateJavascript 以及 loadUrl 都是 Webview 提供的方法。

evaluateJavascript 是从 API 19 開始引入的。能够异步运行 js 代码。

Asynchronously evaluates JavaScript in the context of the currently displayed page.

SCHEME

RichEditor 提供了两个 Scheme 负责回调 java 代码。

private static final String CALLBACK_SCHEME = "re-callback://";
private static final String STATE_SCHEME = "re-state://";

然后在 EditorWebViewClient 中重写了 shouldOverrideUrlLoading 方法：

protected class EditorWebViewClient extends WebViewClient {
  @Override
  public void onPageFinished(WebView view, String url) {
    isReady = url.equalsIgnoreCase(SETUP_HTML);
    if (mLoadListener != null) {
      mLoadListener.onAfterInitialLoad(isReady);
    }
  }

  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    String decode;
    try {
      decode = URLDecoder.decode(url, "UTF-8");
    } catch (UnsupportedEncodingException e) {
      // No handling
      return false;
    }

    if (TextUtils.indexOf(url, CALLBACK_SCHEME) == 0) {
      callback(decode);
      return true;
    } else if (TextUtils.indexOf(url, STATE_SCHEME) == 0) {
      stateCheck(decode);
      return true;
    }

    return super.shouldOverrideUrlLoading(view, url);
  }
}

假设 url 符合 CALLBACK 的 scheme，就会运行 callback 方法：

private void callback(String text) {
  mContents = text.replaceFirst(CALLBACK_SCHEME, "");
  if (mTextChangeListener != null) {
    mTextChangeListener.onTextChange(mContents);
  }
}

假设 url 符合 STATE 的 scheme。就会运行 stateCheck 方法：

private void stateCheck(String text) {
  String state = text.replaceFirst(STATE_SCHEME, "").toUpperCase(Locale.ENGLISH);
  List<Type> types = new ArrayList<>();
  for (Type type : Type.values()) {
    if (TextUtils.indexOf(state, type.name()) != -1) {
      types.add(type);
    }
  }

  if (mDecorationStateListener != null) {
    mDecorationStateListener.onStateChangeListener(state, types);
  }
}

通过下面两个 set 方法能够设置回调。

public void setOnDecorationChangeListener(OnDecorationStateListener listener) {
  mDecorationStateListener = listener;
}

public void setOnInitialLoadListener(AfterInitialLoadListener listener) {
  mLoadListener = listener;
}

总结

编辑器的核心功能由 js 实现，RichEditor 封装了 js 的功能。为上层提供了 java 接口。

參考

• https://github.com/wasabeef/richeditor-android
• http://www.liangfeizc.com/2016/01/27/source-analysis-rich-editor/