1. 程式人生 > >翻翻git之---編譯器般高大上的WebView RichEditor (PS:家裡兩個小祖宗大爆照)

翻翻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下他的程式碼和資源內容了。

大致講一下他是怎麼使用的

首先我們還是要獲取他的物件
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 + "');");

週末愉快!!

謝謝!!