最近公司的專案中要求使用者可以在移動端編輯圖文混排，以前沒有弄過這方面的東東，所以一方面記錄一下開發歷程，一方面秉著分享的精神寫出來希望對看到這篇文章的人一點幫助。

先上效果圖

搜尋了一下網上的解決方案我這裡找到了兩個：
1.採用SpannableString和ImageSpan兩個類來實現這一功能。

2,.採用通過html的<img>標籤的方式插入到edittext中去。

這裡我選擇的是第一種，第二種方式我不知道如何從edittext物件中取出img標籤對應的路徑。

現在直接上程式碼：

private void appendImage(String imgUrl) {
        // 用imgUrl獲取Bitmap物件
 

        Bitmap bitmap = ImageLoader.getInstance().loadImageSync(
                "file://" + imgUrl);
        // 將Bitmap物件轉換成Drawable物件   
        Resources res = getApplicationContext().getResources();
        Drawable drawable = new BitmapDrawable(res, bitmap);

        // 用imgUrl初始化SpannableString物件
        msp = new
 
 SpannableString(imgUrl);
        // 設定圖片寬高
        drawable.setBounds(0, 0, 600, 800);
        msp.setSpan(new ImageSpan(drawable), 0, imgUrl.length(),
                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        // 獲取Editable的物件
        Editable edit = editText.getEditableText();
        // 獲取游標位置
        int index
 
 = editText.getSelectionStart();
        // 游標所在位置插入文字
        edit.insert(index, msp);
        Log.i("圖文混排",editText.getText().toString());
    }

這個程式碼非常簡單了，可以分成兩部分來看。
第一部分：因為我們移動端編輯圖文，圖片肯定來自本地檔案，我們根據這個路徑將其最終轉換成Drawable物件，這裡我採用的是
ImageLoader框架直接獲取到Bitmap物件然後轉換成Drawable物件，大家根據自己專案,換成相應的取得Bitmap物件的方法即可。
第二部分：初始化SpannableString物件。

msp = new SpannableString(imgUrl);

這裡的引數很重要,為什麼這麼說呢，我們以開頭的效果圖為例，通過結尾的Log列印下：

隨便寫寫字/storage/emulated/thumbnails/1448764326621.jpg啊啊

我們發現editText.getText().toString()列印的內容文字部分還是文字，但是圖片部分就是SpannableString物件的引數，因為我們移動端編輯完圖文肯定是要釋出的，這時候我們就需要上傳這些圖片，那麼因為內容中包換路徑我們就能想寫辦法獲取路徑。

我就是在這個地方卡住了，一開始隨便用了個“image”這樣的字串建立的物件，然後後期我發現我不知道從哪裡拿到圖片的原始路徑。

剩下的看程式碼註釋就可以知道我們將圖片放入了游標位置。

接下來自然是與伺服器的互動了，這裡我們要想辦法從editText.getText().toString()中取出我們所有加入的圖片的路徑。

還是上程式碼：

//從EditText中獲取圖片所對應的路徑
private ArrayList<String> getImagePath() {
        Editable edit = editText.getText();
        String path = null;
        ArrayList<String> pathArr = new ArrayList<String>();
        ImageSpan[] spans = edit.getSpans(0, edit.length(), ImageSpan.class);
        for (ImageSpan ip : spans) {
            int start = edit.getSpanStart(ip);
            int end = edit.getSpanEnd(ip);
            path = edit.toString().substring(start, end);
            path = path.substring(0, path.length());
            pathArr.add(path);
        }
        return pathArr;
    }

這個是我從“仿小米便籤圖文混排 EditText解決尾部插入文字bug”中提出的方法也感謝原作者。大家如果想看可以百度搜下這個內容。
就是這樣一個方法我們就拿到了路徑的集合，然後大家呼叫自己專案中的上傳方法將圖片上傳到伺服器吧！

接下來我們用上傳成功後得到的網路路徑替換原本editText中的本地路徑

/**
     * 用網路路徑替換本地路徑
     * @param urls 上傳圖片後得到的網路路徑集合
     * @return editText 替換後的文字內容(用於最終上傳)
     */
    public String getEditText(ArrayList<String> urls) {
        Editable edit = editText.getText();
        String cont = edit.toString();
        ImageSpan[] spans = edit.getSpans(0,edit.length(), 
        ImageSpan.class);

        int size = spans.length;
        for (int i = 0; i < size ; i++) {
            int start = edit.getSpanStart(spans[i]);
            int end = edit.getSpanEnd(spans[i]);
            String path = edit.toString().substring(start, end);
            cont = cont.replace(path, urls.get(i));
        }
        editText.setText(cont);
        return cont;
    }

這樣我們就拿到了替換後的editText中的文字內容，這也就是最終我們需要上傳的內容！