Android富文本編輯器

Android富文本編輯器，一款支持撤銷、加粗、斜體、下劃線、有序無序列表、對齊、改文字大小、改文字顏色、插入圖片、插入視頻等功能，並且可設置cookie，自定義素材操作菜單的的編輯器。

github地址：https://github.com/yeaper/RichEditor

1.控件使用

RichEditor是富文本編輯器，EditorOpMenuView是操作欄控件，兩個需要配合使用，xml引用方式如下：

<com.yyp.editor.RichEditor
    android:id="@+id/editor"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

<com.yyp.editor.widget.EditorOpMenuView
    android:id="@+id/editor_op_menu_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

兩個控件最後需要綁定

mEditorOpMenuView.setRichEditor(mEditor);

2.編輯器相關設置

//設置佔位文字
mEditor.setPlaceholder("請填寫文章正文內容（必填）");
//設置編輯器文字大小
mEditor.setEditorFontSize(16);
//設置編輯器內邊距
mEditor.setPadding(10, 10, 10, 10);
//設置編輯器背景色
mEditor.setBackgroundColor(UIUtils.getResources().getColor(R.color._ffffff));
//禁止編輯 包括長按複製、雙擊選中、點擊
mEditor.disableEdit();
//配置同一界面的焦點切換，可傳多個輸入框控件
mEditor.hideWhenViewFocused((editText1, editText2, editText3, ...);

3.編輯器操作

//撤銷
mEditor.undo();
//反撤銷
mEditor.redo();
//加粗
mEditor.setBold();
//斜體
mEditor.setItalic();
//刪除線
mEditor.setStrikeThrough();
//下劃線
mEditor.setUnderline();
//設置文字顏色 傳int色值
mEditor.setTextColor(color);
//設置文字大小 支持1-7字號
mEditor.setFontSize(size);
//左對齊
mEditor.setAlignLeft();
//居中對齊
mEditor.setAlignCenter();
//右對齊
mEditor.setAlignRight();
//兩端對齊
mEditor.setAlignFull();
//有序列表
mEditor.setNumbers();
//無序列表
mEditor.setBullets();
//清除所有格式
mEditor.removeFormat();

//插入圖片
mEditor.insertImage("圖片地址", "提示文字");
//插入視頻
mEditor.insertVideoFrame("視頻封面地址", videoId, "視頻名字", size);
//插入文本
mEditor.insertHtml("文本內容");

4.監聽接口使用

//編輯器焦點監聽
mEditor.setOnEditorFocusListener(new OnEditorFocusListener() {
    @Override
    public void onEditorFocus(boolean isFocus) {
        mEditorOpMenuView.displayMaterialsMenuView(false); //編輯器重獲焦點，素材菜單要隱藏
        mEditorOpMenuView.setVisibility(isFocus ? View.VISIBLE : View.GONE);
    }
});
//編輯器文本輸入回調
mEditor.setOnTextChangeListener(new OnTextChangeListener() {
    @Override
    public void onTextChange(String text) {
        text.length();
    }
});
//監聽素材菜單點擊事件
mEditorOpMenuView.setOnMaterialsItemClickListener(new OnMaterialsItemClickListener() {

    @Override
    public void onMaterialsItemClick(MaterialsMenuBean bean) {
        switch (bean.getId()){
            case MATERIALS_IMAGE: //從素材圖片庫選擇
                break;
            case MATERIALS_VIDEO: //從素材視頻庫選擇
                break;
            case MATERIALS_TXT: //從素材文字庫選擇
                break;
            case LOCAL_IMAGE: //從本地圖片庫選擇
                break;
            case LOCAL_VIDEO: //從本地視頻庫選擇
                break;
        }
    }
});

5.遇到的問題與解決方案

問題： 編輯器展示的圖片訪問不了，需要傳cookie驗證

解決方案： 先前試過在WebViewClient的shouldInterceptRequest方法中，針對url設置cookie，但是cookie同步不及時，導致部分圖片無法加載，後來考慮在加載圖片前，先設置cookie，那麼得出解決方案，先清除原來的cookie，然後爲圖片的ip地址設置新cookie，就可以訪問了，這個方法在Webview.loadUrl()方法前調用即可。（注：android5.0以上記得打開cookie開關）

 //打開cookie
android.webkit.CookieManager cookieManager = android.webkit.CookieManager.getInstance();
cookieManager.setAcceptCookie(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    cookieManager.setAcceptThirdPartyCookies(this, true);
}

private void addCookies(String url) {
    CookieManager cookieManager = CookieManager.getInstance();
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        cookieManager.removeSessionCookies(null);
        PersistentCookieStore cookieStore = new PersistentCookieStore(UIUtils.getContext());
        for (Cookie cookie : cookieStore.getCookies()) { //添加cookie
            cookieManager.setCookie(url, String.format("%s=%s", cookie.name(), cookie.value()));
        }
        cookieManager.flush();
    }
}

問題： 爲了方便編輯，圖片、視頻之間需要保持間距

解決方案： css樣式文件中，設置margin邊距即可

/* 圖片和視頻：寬度佔滿，高度自適應，下邊距3px */
IMAGE,img,video {
    width: 100% !important;
    height: auto;
    margin: 0px 0px 3px 0px !important;
}