最近改完的富文本编辑器

最新推荐文章于 2024-08-29 21:36:41 发布

Hei丨白不分

最新推荐文章于 2024-08-29 21:36:41 发布

阅读量1k

点赞数

文章标签： webview 富文本编辑器图文混排

本文链接：https://blog.csdn.net/vack2015/article/details/51113027

版权

最近项目需求在做一个富文本编辑器

找了很多个都不符合项目的需求，我要的功能就只有加粗、字体大小、插链接、插图；

但是找来的例如

WordPress：很大，很复杂，而且官方的项目都有bug，例如如果你只想用他们的编辑器而不用他们整个Fragment的话，那么不能编辑。他们示例项目的第一个按钮点进去，第一次能进去，以后都秒退。

knife：我没找到插入图片。

于是就在github上随便找一个小的，改改凑合着用

这个富文本编辑器功能很全，完全js实现
我个人也是在这个项目中js从入门到吐血
原来的项目删除图片有问题，不知道什么问题，于是我就让它通过点击图片，回调，弹框来达到查看原图、删除或者更多效果
原来的插入链接也是不能用的，于是我改得更简单了
如果想要把它嵌套在ScrollView中那么你可能需要设置TextChangeListener来手动滚动scrollView

那么我对删除图片做个说明

这段在编辑器的脚本里面

RE.click_img_callback = function(img_id) {
    //这里预先写好一个回调，让后面点击图片的时候调用，在webView里面拦截这条请求那么就可以让它调用里面对应的方法
    //参数里面也可以让它带上src以达到显示大图的功能
    window.location.href = "re-click_img_callback://" + encodeURI(img_id);
}
RE.insertImage = function(url, alt,img_id) {
    var html = '<img src="' + url + '" alt="' + alt + '" id="'+img_id+'" height=\"auto\" width=\"95%\"  οnclick=\'RE.click_img_callback(getAttribute("id"))\'/>';
    RE.insertHTML(html);
}
//这里不只可以删img标签，任何都可以
RE.delImage=function(img_id){
    document.getElementById(img_id).remove();
}

那么接下来java的部分我们需要找一个scrollView不冲突的webView，然后让富文本编辑器去继承这个webView，然后在构造方法中load这个本地的html，并setWebViewClient()重写shouldOverrideUrlLoading(WebView webView,String url)去拦截请求

setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                isReady = url.equalsIgnoreCase(SETUP_HTML);
                if (mloadListener != null) {
                    mloadListener.afterInitialLoad(isReady);
                }
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.e("VACK", url);
                if(TextUtils.indexOf(url,CLICK_IMG_CALLBACK)>0){
                    clickImgCallBack(url);
                    return true;
                }

                return super.shouldOverrideUrlLoading(view, url);
            }
        });
        loadUrl(SETUP_HTML);

public void clickImgCallBack(String text){
        try {
            String decode=URLDecoder.decode(text,"UTF-8");
            final String img_id=decode.replace(CLICK_IMG_CALLBACK,"").replace("file:///android_res/raw/","");
            new AlertDialog.Builder(getContext()).setMessage(img_id).setTitle(text).setPositiveButton("删除", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    delImg(img_id);
                }
            }).create().show();
        }catch (UnsupportedEncodingException e){
            Log.e("VACK", e.toString());
        }
    }

附上不坑你们积分的下载地址：http://download.csdn.net/detail/vack2015/9486557