翻翻git之---編譯器般高大上的WebView RichEditor (PS:家裡兩個小祖宗大爆照)
阿新 • • 發佈:2018-12-23
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 + "');");
週末愉快!!
謝謝!!