翻翻git之---编译器般高大上的WebView RichEditor (PS:家里两个小祖宗大爆照)

转载请注明出处：王亟亟的大牛之路

P1 废话：(不想看的同学可以跳到P2)

本周忙有点忙（都是私事），几乎每天都是忙到12点多（昨天是去接当当），今天是周五强行下午抽时间再来一发。

这里再爆下照，我的2个宝贝“孩子”，麦麦和当当（麦麦就是我头像那个,不过刚来他们的别墅我还没画好，也没做 只能委屈当当了）

P2 RichEditor:

今天介绍的是一个“Star”相当高的一个自定义WebView– RichEditor

先贴一下效果图：

如果图片刷不出来，点击这里

样例中作者把带有预设格式的输入框区域的内容的html代码呈现在下方的TextView里。

也就是类似反向实现了你在编译器里敲html/css代码的效果。

HOW to use?

Grade:

repositories {
    jcenter()
}

dependencies {
    compile 'jp.wasabeef:richeditor-android:1.2.0'
}

Eclipse的小伙伴就要copy下他的代码和资源内容了。

因为他是native和js的交互肯定会有一些.js的代码以及双方的互相调用，这部分我之前也有写过Demo,可以看这里http://blog.csdn.net/ddwhan0123/article/details/49683799

大致讲一下他是怎么使用的

首先我们还是要获取他的对象
mEditor = (RichEditor) findViewById(R.id.editor);

然后对她进行一系列初始化(这也就是为什么作者提供的例子里横向ScrollView并没有绘色板却字体是红色，他作为控件本身的属性存在，那也就有了我们二次开发的可能，诸如添加个绘色板什么的)

     mEditor.setEditorHeight(200);
    mEditor.setEditorFontSize(22);
    mEditor.setEditorFontColor(Color.RED);
    //mEditor.setEditorBackgroundColor(Color.BLUE);
    //mEditor.setBackgroundColor(Color.BLUE);
    //mEditor.setBackgroundResource(R.drawable.bg);
    mEditor.setPadding(10, 10, 10, 10); //mEditor.setBackground("https://raw.githubusercontent.com/wasabeef/art/master/chip.jpg");
    mEditor.setPlaceholder("Insert text here...");

还有预设个图片啊，背景色什么的，看你的需求了，反正都是凋js的，也有一些是可以调WebView的一些方法

诸如：

 @Override public void setBackgroundColor(int color) {
    super.setBackgroundColor(color);
  }

那么，那些html代码是怎么返回给下面的TextView的呢？

做这些了个接口，然后set一下就行了

 public interface OnTextChangeListener {

    void onTextChange(String text);
  }

public void setOnTextChangeListener(OnTextChangeListener listener) {
    mTextChangeListener = listener;
  }

像这样 set一下就好了

    mEditor.setOnTextChangeListener(new RichEditor.OnTextChangeListener() {
      @Override public void onTextChange(String text) {
        mPreview.setText(text);
      }
    });

具体的功能什么 H1 h2什么的 还有斜体啊粗体之类的都是

像这样拼接起来然后传到js那头去处理,如果你要有自己的功能，JS那头添加一下，源生这头加一下走通就行了。

 exec("javascript:RE.setHeading('" + heading + "');");

作者Git:https://github.com/wasabeef/richeditor-android

例子地址：https://github.com/wasabeef/richeditor-android/archive/master.zip

周末愉快！！

谢谢！！