翻翻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

周末愉快!!

谢谢!!

目录
相关文章

相关实验场景

更多