【Android】基于webView打造富文本编辑器（H5）

已于 2024-06-19 17:15:18 修改
阅读量1.7k 收藏 18
点赞数 7
分类专栏： Android 文章标签： android kotlin webview html js 富文本 html5
于 2024-06-13 18:32:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t01151018/article/details/139629659
版权

目录

前言

HTML5是构建Web内容的一种语言描述方式。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。

而WebView 是一种嵌入式浏览器，原生APP应用可以用它来展示网络内容。其功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理.。
在这里插入图片描述
所以，因为H5的跨平台和成本低的优势，越来越多的项目都使用了Android原生控件与WebView进行混合开发，用WebView加载html界面，实现本地安卓代码与HTML+CSS+JS的交互。

webView的基本使用可以参考这篇文章：https://blog.csdn.net/carson_ho/article/details/52693322

本文将利用webView实现一个富文本编辑器，它是一种可内嵌于浏览器，所见即所得的文本编辑器，其实质就是html代码，可改变文本样式、文间插入图片或视频等。我为了实现这一功能借鉴很多项目（主要是MRichEditor和RichEditTextCopyToutiao，都是基于 richeditor-android），修复了一些Bug，最终效果还行。借鉴的第三方库可移步我之前写的文章：常用的第三方开源库汇总

一、实现效果

在这里插入图片描述

在这里插入图片描述

二、具体实现

富文本编辑器主要功能就是文字大小、颜色、加粗、斜体、下划线、删除线、缩进、居中或靠左靠右，无序或有序列表，插入链接、图片、视频等。原有项目会存在一些导入html标签和输入框光标的bug，解决这些需要一点HTML+CSS+JS的知识。

1. 导入网页资源

在项目根目录下新建assets文件夹
在这里插入图片描述
导入资源：对于熟悉网页端的开发人员来说，修改这些并不难。
在这里插入图片描述

2. 页面设计

编辑器的一个按钮即对应着js中的一个函数，通过RichEditor自定义 view去调用js函数， 它继承自 Webview ，加载html文件，枚举类型Type定义了支持的排版格式。

public class RichEditor extends WebView {

	private static final String SETUP_HTML = "file:///android_asset/editor.html";
    public enum Type {
        BOLD,
        ITALIC,
        SUBSCRIPT,
        SUPERSCRIPT,
        STRIKETHROUGH,
        UNDERLINE,
        H1,
        H2,
        H3,
        H4,
        H5,
        H6,
        ORDEREDLIST,
        UNORDEREDLIST,
        JUSTIFYCENTER,
        JUSTIFYFULL,
        JUSTIFYLEFT,
        JUSTIFYRIGHT
    }
    @SuppressLint("SetJavaScriptEnabled")
    public RichEditor(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        setVerticalScrollBarEnabled(false);
        setHorizontalScrollBarEnabled(false);
        getSettings().setJavaScriptEnabled(true);
        setWebChromeClient(new WebChromeClient());
        setWebViewClient(createWebviewClient());
        loadUrl(SETUP_HTML);

        applyAttributes(context, attrs);
    }
}

其中​editor.html​即编辑器所展示的主页面

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="editor" contenteditable="true"></div>
<script type="text/javascript" src="rich_editor.js"></script>
</body>
</html>

RichEditor控件中的一个功能就对应着​rich_editor.js​中的一个函数，例如加粗效果：

RichEditor：

public void setBold() {
        exec("javascript:RE.setBold();");
    }

​rich_editor.js：

RE.setBold = function() {
    document.execCommand('bold', false, null);
    RE.enabledEditingItems()
}

最后，RichEditor在布局中使用：

<com.text.richeditor.editor.RichEditor
        android:id="@+id/rich_Editor"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:overScrollMode="never" />

主要样式如下：
在这里插入图片描述
除了底部的功能栏可以使用，最左边还有一个排版按钮，这里主要是为了不方便弹出底部时，可以选择使用弹窗弹出功能栏，功能是一致的，可以选择性阉割。使用某一功能时会有颜色高亮提示。

3. 功能调用

首先要在activity中初始化控件，实现setOnDecorationChangeListener接口，监听点击某个功能按钮时显示对应高亮，让用户看到现在正在所使用的排版格式。

		//输入框显示字体的大小
        rich_Editor.setEditorFontSize(16)
        //输入框显示字体的颜色
        rich_Editor.setEditorFontColor(ContextCompat.getColor(this,R.color.deepGrey))
        //输入框背景设置
        rich_Editor.setEditorBackgroundColor(Color.WHITE)
        //输入框文本padding
        rich_Editor.setPadding(10, 10, 10, 10)
        //输入提示文本
        rich_Editor.setPlaceholder("点击输入正文！~")
        rich_Editor.setOnDecorationChangeListener { _, types ->
            val flagArr = ArrayList<String>()
            for (i in types.indices) {
                flagArr.add(types[i].name)
            }
            if (flagArr.contains("BOLD")) {
                button_bold.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.BOLD, true)
            } else {
                button_bold.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.BOLD, false)
            }
            if (flagArr.contains("ITALIC")) {
                button_italic.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.ITALIC, true)
            } else {
                button_italic.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.ITALIC, false)
            }
            if (flagArr.contains("STRIKETHROUGH")) {
                button_strikethrough.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.STRIKETHROUGH, true)
            } else {
                button_strikethrough.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.STRIKETHROUGH, false)
            }
            if (flagArr.contains("JUSTIFYCENTER")) {
                button_align_center.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                button_align_left.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                button_align_right.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_CENTER, true)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_LEFT, false)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_RIGHT, false)
            } else {
                button_align_center.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_CENTER, false)
            }
            if (flagArr.contains("JUSTIFYLEFT")) {
                button_align_center.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                button_align_left.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                button_align_right.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_CENTER, false)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_LEFT, true)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_RIGHT, false)
            } else {
                button_align_left.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_LEFT, false)
            }
            if (flagArr.contains("JUSTIFYRIGHT")) {
                button_align_center.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                button_align_left.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                button_align_right.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_CENTER, false)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_LEFT, false)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_RIGHT, true)
            } else {
                button_align_right.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_RIGHT, false)
            }
            if (flagArr.contains("UNDERLINE")) {
                button_underline.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.UNDERLINE, true)
            } else {
                button_underline.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.UNDERLINE, false)
            }
            if (flagArr.contains("ORDEREDLIST")) {
                button_list_ol.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                button_list_ul.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.ORDERED, true)
                mEditorMenuFragment.updateActionStates(ActionType.UNORDERED, false)
            } else {
                button_list_ol.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.ORDERED, false)
            }
            if (flagArr.contains("UNORDEREDLIST")) {
                button_list_ul.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                button_list_ol.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.ORDERED, false)
                mEditorMenuFragment.updateActionStates(ActionType.UNORDERED, true)
            } else {
                button_list_ul.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.UNORDERED, false)
            }
        }

插入图片和视频：原本是调用特有的方法实现，但是可定制化不高，我就改成了插入html的形式

public void insertVideoPercentage(String url, String width, String height) {
        exec("javascript:RE.prepareInsert();");
//        exec("javascript:RE.insertVideoWH('" + url + "', '" + width + "', '" + height + "');");
        String testStr = "<video src=\"" + url + "\" width=\""+ width +"\"  height=\""+ height +"\" controls></video><br>";
        exec("javascript:RE.insertHTML('" + testStr + "');");
    }
public void insertImage(String url, String alt) {
        exec("javascript:RE.prepareInsert();");
        String testStr = "<img src=\"" + url + "\" alt=\"" + alt + "\" width=\"80%\"><br><br>";
        exec("javascript:RE.insertHTML('" + testStr + "');");
    }

	// 以下图片视频地址，来自网络素材
    fun selectImage(){
        // 进入相册选择照片之后可以本地文件直接插入html，或者上传到服务器获取地址再插入html中

        val path="https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
        againEdit()
        rich_Editor.insertImage(path, "dachshund")
        KeyBoardUtils.openKeyboard(edit_name, this@RichTextActivity)

    }

    fun selectVideo(){
        // 选择视频之后可以本地文件直接插入html，或者上传到服务器获取地址再插入html中

        val path="https://media.w3.org/2010/05/sintel/trailer.mp4"
        againEdit()
        rich_Editor.insertVideoPercentage(path, "80%","30%")
        KeyBoardUtils.openKeyboard(edit_name, this@RichTextActivity)

    }

图片删除：插入图片后点击图片可将图片删除：

@SuppressLint("ClickableViewAccessibility")
    public void setImageClickListener(ImageClickListener imageClickListener) {
        this.imageClickListener = imageClickListener;
        if (this.imageClickListener != null) {

            RichEditor.this.setOnTouchListener(new OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()) {
                        case MotionEvent.ACTION_DOWN:
                            DownX = (int) event.getX();
                            DownY = (int) event.getY();
                            moveX = 0;
                            moveY = 0;
                            currentMS = System.currentTimeMillis();//long currentMS     获取系统时间
                            break;


                        case MotionEvent.ACTION_MOVE:
                            moveX += Math.abs(event.getX() - DownX);//X轴距离
                            moveY += Math.abs(event.getY() - DownY);//y轴距离
                            DownX = event.getX();
                            DownY = event.getY();
                            break;

                        case MotionEvent.ACTION_UP:
                            long moveTime = System.currentTimeMillis() - currentMS;//移动时间
                            //判断是否继续传递信号
                            if (moveTime < 400 && (moveX < 25 && moveY < 25)) {
                                //这里是点击
                                HitTestResult mResult = getHitTestResult();
                                if (mResult != null) {
                                    final int type = mResult.getType();
                                    if (type == HitTestResult.IMAGE_TYPE) {//|| type == WebView.HitTestResult.IMAGE_ANCHOR_TYPE || type == WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE
                                        //如果是点击图片
                                        String imageUrl = mResult.getExtra();
                                        setInputEnabled(false);
                                        postDelayed(new Runnable() {
                                            @Override
                                            public void run() {
                                                if (imageClickListener != null) {
                                                    if (imageUrl.contains("file://")) {
                                                        //说明是本地文件去除
                                                        String newImageUrl = imageUrl.replace("file://", "");
                                                        imageClickListener.onImageClick(newImageUrl);
                                                    } else {
                                                        imageClickListener.onImageClick(imageUrl);
                                                    }

                                                }
                                            }
                                        }, 200);

                                    } else {
                                        //不是点击的图片
                                    }
                                }
                            }

                            break;
                    }
                    return false;
                }
            });

        }
    }

view.findViewById<View>(R.id.linear_delete_pic).setOnClickListener { v: View? ->
            //删除图片
            val removeUrl =
                "<img src=\"$currentUrl\" alt=\"dachshund\" width=\"80%\"><br>"
            val newUrl: String = rich_Editor.html.replace(removeUrl, "")
            currentUrl = ""
            rich_Editor.html = newUrl
            if (RichUtils.isEmpty(rich_Editor.html)) {
                rich_Editor.html = ""
            }
            popupWindow?.dismiss()
        }

插入链接：必须要先执行一次restorerange ，控制用户选择的文本范围或光标的当前位置

RE.restorerange = function(){
    var selection = window.getSelection();
    selection.removeAllRanges();
    var range = document.createRange();
    range.setStart(RE.currentSelection.startContainer, RE.currentSelection.startOffset);
    range.setEnd(RE.currentSelection.endContainer, RE.currentSelection.endOffset);
    selection.addRange(range);
}

RE.insertLink = function(url, title) {
    RE.restorerange();
    var sel = document.getSelection();
    if (sel.toString().length == 0) {
        document.execCommand("insertHTML",false,"<a href='"+url+"'>"+title+"</a>");
    } else if (sel.rangeCount) {
       var el = document.createElement("a");
       el.setAttribute("href", url);
       el.setAttribute("title", title);

       var range = sel.getRangeAt(0).cloneRange();
       range.surroundContents(el);
       sel.removeAllRanges();
       sel.addRange(range);
   }
    RE.callback();
}

焦点的处理：

（1） 每一次调用排版功能都要调用一次，重新处理输入焦点，避免焦点冲突

private fun againEdit() {
        //如果第一次点击例如加粗，没有焦点时，获取焦点并弹出软键盘
        rich_Editor.focusEditor()
        KeyBoardUtils.openKeyboard(edit_name, this@RichTextActivity)
    }

public void focusEditor() {
        requestFocus();
        exec("javascript:RE.focus();");
    }

RE.focus = function() {
    var range = document.createRange();
    range.selectNodeContents(RE.editor);
    range.collapse(false);
//    var selection = window.getSelection();
//    selection.removeAllRanges();
//    selection.addRange(range);
    RE.editor.focus();
}

（2）这里弹出排版页面时必须同时弹出键盘，否则输入框的焦点消失，之前所设置的格式也会随之消失。比如我在底部点了个加粗效果，再点击排版弹窗时，加粗效果应该存在。但是一旦键盘关闭焦点消失，光标的效果也会被重置。
在这里插入图片描述

	KeyboardUtils.registerSoftInputChangedListener(this) { height: Int ->
            //键盘打开
            isKeyboardShowing = height > 0
            if (height > 0) {
                //fl_action.visibility = View.GONE
                val params = fl_action.layoutParams
                params.height = height/2
                fl_action.layoutParams = params
            } else{
                //if (fl_action.visibility != View.VISIBLE)
                fl_action.visibility = View.GONE
                iv_action.setColorFilter(ContextCompat.getColor(this@RichTextActivity, R.color.tintColor))
            }
        }

        iv_action.setOnClickListener {
            if (fl_action.visibility == View.VISIBLE) {
                fl_action.visibility = View.GONE
                iv_action.setColorFilter(ContextCompat.getColor(this@RichTextActivity, R.color.tintColor))
            } else {
//                if (isKeyboardShowing) {
//                    KeyboardUtils.hideSoftInput(this@RichTextActivity)
//                }
                KeyboardUtils.showSoftInput(this@RichTextActivity)
                fl_action.visibility = View.VISIBLE
                iv_action.setColorFilter(ContextCompat.getColor(this@RichTextActivity, R.color.colorPrimary))
            }
        }

主要的逻辑代码(RichTextActivity.kt)：

class RichTextActivity :AppCompatActivity(), OnActionPerformListener {


    private var popupWindow //编辑图片的pop
            : CommonPopupWindow? = null
    private var currentUrl=""

    private val mEditorMenuFragment by lazy{ EditorMenuFragment(R.id.fl_action) }
    private var isKeyboardShowing = false

    private val inputLinkDialog by lazy { InputLinkDialog(this, sureListener = {href, name ->
        againEdit()
        rich_Editor.insertLink(href,name)
    }) }


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_rich_text)
        initData()

    }

    private fun initData(){
        initPop()
        initEditor()
    }
    private fun initEditor() {
        //输入框显示字体的大小
        rich_Editor.setEditorFontSize(16)
        //输入框显示字体的颜色
        rich_Editor.setEditorFontColor(ContextCompat.getColor(this,R.color.deepGrey))
        //输入框背景设置
        rich_Editor.setEditorBackgroundColor(Color.WHITE)
        //输入框文本padding
        rich_Editor.setPadding(10, 10, 10, 10)
        //输入提示文本
        rich_Editor.setPlaceholder("点击输入正文！~")

        //文本输入框监听事件
        rich_Editor.setOnTextChangeListener { text -> Log.e("富文本文字变动", text!!) }
        edit_name.addTextChangedListener(object : TextWatcher {
            override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}
            override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {}
            override fun afterTextChanged(s: Editable) {
                tv_sum.text = edit_name.text.toString().length.toString()+"/100"
                val html = rich_Editor.html
            }
        })
        rich_Editor.setOnDecorationChangeListener { _, types ->
            val flagArr = ArrayList<String>()
            for (i in types.indices) {
                flagArr.add(types[i].name)
            }
            if (flagArr.contains("BOLD")) {
                button_bold.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.BOLD, true)
            } else {
                button_bold.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.BOLD, false)
            }
            if (flagArr.contains("ITALIC")) {
                button_italic.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.ITALIC, true)
            } else {
                button_italic.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.ITALIC, false)
            }
            if (flagArr.contains("STRIKETHROUGH")) {
                button_strikethrough.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.STRIKETHROUGH, true)
            } else {
                button_strikethrough.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.STRIKETHROUGH, false)
            }
            if (flagArr.contains("JUSTIFYCENTER")) {
                button_align_center.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                button_align_left.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                button_align_right.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_CENTER, true)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_LEFT, false)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_RIGHT, false)
            } else {
                button_align_center.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_CENTER, false)
            }
            if (flagArr.contains("JUSTIFYLEFT")) {
                button_align_center.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                button_align_left.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                button_align_right.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_CENTER, false)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_LEFT, true)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_RIGHT, false)
            } else {
                button_align_left.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_LEFT, false)
            }
            if (flagArr.contains("JUSTIFYRIGHT")) {
                button_align_center.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                button_align_left.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                button_align_right.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_CENTER, false)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_LEFT, false)
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_RIGHT, true)
            } else {
                button_align_right.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.JUSTIFY_RIGHT, false)
            }
            if (flagArr.contains("UNDERLINE")) {
                button_underline.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.UNDERLINE, true)
            } else {
                button_underline.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.UNDERLINE, false)
            }
            if (flagArr.contains("ORDEREDLIST")) {
                button_list_ol.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                button_list_ul.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.ORDERED, true)
                mEditorMenuFragment.updateActionStates(ActionType.UNORDERED, false)
            } else {
                button_list_ol.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.ORDERED, false)
            }
            if (flagArr.contains("UNORDEREDLIST")) {
                button_list_ul.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.colorPrimary
                    )
                )
                button_list_ol.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.ORDERED, false)
                mEditorMenuFragment.updateActionStates(ActionType.UNORDERED, true)
            } else {
                button_list_ul.setColorFilter(
                    ContextCompat.getColor(
                        this@RichTextActivity,
                        R.color.tintColor
                    )
                )
                mEditorMenuFragment.updateActionStates(ActionType.UNORDERED, false)
            }
        }
        rich_Editor.setImageClickListener { imageUrl ->
            currentUrl = imageUrl
            popupWindow?.showBottom(ll_container, 0.5f)
        }

        button_rich_do.setOnClickListener { rich_Editor.redo() }
        button_rich_undo.setOnClickListener { rich_Editor.undo()}
        button_bold.setOnClickListener {
            againEdit()
            rich_Editor.setBold() }
        button_underline.setOnClickListener {
            againEdit()
            rich_Editor.setUnderline()
        }
        button_italic.setOnClickListener {
            againEdit()
            rich_Editor.setItalic()
        }
        button_strikethrough.setOnClickListener {
            againEdit()
            rich_Editor.setStrikeThrough()
        }
        //字号
        button_h1.setOnClickListener {
            againEdit()
            rich_Editor.setFontSize(2)
        }
        button_h2.setOnClickListener {
            againEdit()
            rich_Editor.setFontSize(3)
        }
        button_h3.setOnClickListener {
            againEdit()
            rich_Editor.setFontSize(4)
        }
        button_h4.setOnClickListener {
            againEdit()
            rich_Editor.setFontSize(5)
        }
        button_indent_decrease.setOnClickListener {
            againEdit()
            rich_Editor.setOutdent()
        }
        button_indent_increase.setOnClickListener {
            againEdit()
            rich_Editor.setIndent()
        }
        button_list_ul.setOnClickListener {
            againEdit()
            rich_Editor.setBullets()
        }
        button_list_ol.setOnClickListener {
            againEdit()
            rich_Editor.setNumbers()
        }
        button_align_center.setOnClickListener {
            againEdit()
            rich_Editor.setAlignCenter()
        }
        button_align_left.setOnClickListener {
            againEdit()
            rich_Editor.setAlignLeft()
        }
        button_align_right.setOnClickListener {
            againEdit()
            rich_Editor.setAlignRight()
        }
        button_link.setOnClickListener {
            KeyboardUtils.hideSoftInput(this@RichTextActivity)
            inputLinkDialog.show()
        }
        //选择图片
        button_image.setOnClickListener {
            selectImage()
        }
        //选择视频
        button_video.setOnClickListener {
            selectVideo()
        }

        mEditorMenuFragment.setActionClickListener(this)
        supportFragmentManager.beginTransaction().add(R.id.fl_action, mEditorMenuFragment, EditorMenuFragment::class.java.name).commit()
        KeyboardUtils.registerSoftInputChangedListener(this) { height: Int ->
            //键盘打开
            isKeyboardShowing = height > 0
            if (height > 0) {
                //fl_action.visibility = View.GONE
                val params = fl_action.layoutParams
                params.height = height/2
                fl_action.layoutParams = params
            } else{
                //if (fl_action.visibility != View.VISIBLE)
                fl_action.visibility = View.GONE
                iv_action.setColorFilter(ContextCompat.getColor(this@RichTextActivity, R.color.tintColor))
            }
        }

        iv_action.setOnClickListener {
            if (fl_action.visibility == View.VISIBLE) {
                fl_action.visibility = View.GONE
                iv_action.setColorFilter(ContextCompat.getColor(this@RichTextActivity, R.color.tintColor))
            } else {
//                if (isKeyboardShowing) {
//                    KeyboardUtils.hideSoftInput(this@RichTextActivity)
//                }
                KeyboardUtils.showSoftInput(this@RichTextActivity)
                fl_action.visibility = View.VISIBLE
                iv_action.setColorFilter(ContextCompat.getColor(this@RichTextActivity, R.color.colorPrimary))
            }
        }
    }


    private fun initPop() {
        val view= LayoutInflater.from(this@RichTextActivity).inflate(R.layout.pop_picture, null)
        view.findViewById<View>(R.id.linear_cancle)
            .setOnClickListener { popupWindow?.dismiss() }
        view.findViewById<View>(R.id.linear_delete_pic).setOnClickListener { v: View? ->
            //删除图片
            val removeUrl =
                "<img src=\"$currentUrl\" alt=\"dachshund\" width=\"80%\"><br>"
            val newUrl: String = rich_Editor.html.replace(removeUrl, "")
            currentUrl = ""
            rich_Editor.html = newUrl
            if (RichUtils.isEmpty(rich_Editor.html)) {
                rich_Editor.html = ""
            }
            popupWindow?.dismiss()
        }
        popupWindow = CommonPopupWindow.Builder(this@RichTextActivity)
            .setView(view)
            .setWidthAndHeight(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
            )
            .setOutsideTouchable(true) //在外不可用手指取消
            .setAnimationStyle(R.style.pop_animation) //设置popWindow的出场动画
            .create()
        popupWindow?.setOnDismissListener(PopupWindow.OnDismissListener {
            rich_Editor.setInputEnabled(
                true
            )
        })
    }

    private fun againEdit() {
        //如果第一次点击例如加粗，没有焦点时，获取焦点并弹出软键盘
        rich_Editor.focusEditor()
        KeyBoardUtils.openKeyboard(edit_name, this@RichTextActivity)
    }
    

    override fun onActionPerform(type: ActionType?, vararg values: Any?) {
        var value = ""
        if (values != null && values.isNotEmpty()) {
            value = values[0] as String
        }

        againEdit()
        when (type) {
            ActionType.FORE_COLOR -> { rich_Editor.setTextColor(value)}
            ActionType.BOLD -> { rich_Editor.setBold()}
            ActionType.ITALIC -> rich_Editor.setItalic()
            ActionType.UNDERLINE -> rich_Editor.setUnderline()
            ActionType.STRIKETHROUGH -> rich_Editor.setStrikeThrough()
            ActionType.H1 -> {
                rich_Editor.setFontSize(2)
                mEditorMenuFragment.updateActionStates(ActionType.H1,true)
                mEditorMenuFragment.updateActionStates(ActionType.H2,false)
                mEditorMenuFragment.updateActionStates(ActionType.H3,false)
                mEditorMenuFragment.updateActionStates(ActionType.H4,false)
            }
            ActionType.H2 -> {
                rich_Editor.setFontSize(3)
                mEditorMenuFragment.updateActionStates(ActionType.H1,false)
                mEditorMenuFragment.updateActionStates(ActionType.H2,true)
                mEditorMenuFragment.updateActionStates(ActionType.H3,false)
                mEditorMenuFragment.updateActionStates(ActionType.H4,false)
            }
            ActionType.H3 -> {
                rich_Editor.setFontSize(4)
                mEditorMenuFragment.updateActionStates(ActionType.H1,false)
                mEditorMenuFragment.updateActionStates(ActionType.H2,false)
                mEditorMenuFragment.updateActionStates(ActionType.H3,true)
                mEditorMenuFragment.updateActionStates(ActionType.H4,false)
            }
            ActionType.H4 -> {
                rich_Editor.setFontSize(5)
                mEditorMenuFragment.updateActionStates(ActionType.H1,false)
                mEditorMenuFragment.updateActionStates(ActionType.H2,false)
                mEditorMenuFragment.updateActionStates(ActionType.H3,false)
                mEditorMenuFragment.updateActionStates(ActionType.H4,true)
            }
            ActionType.JUSTIFY_LEFT -> rich_Editor.setAlignLeft()
            ActionType.JUSTIFY_CENTER -> rich_Editor.setAlignCenter()
            ActionType.JUSTIFY_RIGHT -> rich_Editor.setAlignRight()
            ActionType.INDENT -> rich_Editor.setIndent()
            ActionType.OUTDENT -> rich_Editor.setOutdent()
            ActionType.UNORDERED->rich_Editor.setBullets()
            ActionType.ORDERED->rich_Editor.setNumbers()
            ActionType.IMAGE -> {
                selectImage()
            }
            ActionType.LINK -> {
                KeyboardUtils.hideSoftInput(this@RichTextActivity)
                inputLinkDialog.show()
            }
            ActionType.VIDEO -> {
                selectVideo()
            }
            else -> {}
        }
    }


    // 以下图片视频地址，来自网络素材
    fun selectImage(){
        // 进入相册选择照片之后可以本地文件直接插入html，或者上传到服务器获取地址再插入html中

        val path="https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
        againEdit()
        rich_Editor.insertImage(path, "dachshund")
        KeyBoardUtils.openKeyboard(edit_name, this@RichTextActivity)

    }

    fun selectVideo(){
        // 选择视频之后可以本地文件直接插入html，或者上传到服务器获取地址再插入html中

        val path="https://media.w3.org/2010/05/sintel/trailer.mp4"
        againEdit()
        rich_Editor.insertVideoPercentage(path, "80%","30%")
        KeyBoardUtils.openKeyboard(edit_name, this@RichTextActivity)

    }
}

4. 完整代码

完整代码我已上传github，需要的可以自行pull：https://github.com/FullCourage/RichEditor

总结

这个功能是之前做的，时间间隔有点久了，有些细微的点已经记不得了，由此事后的总结记录就格外重要。

full courage
关注
专栏目录
移动端强大的富文本编辑器richeditor-android
findhappy117的博客
03-12 5204
代码地址如下：http://www.demodashi.com/demo/14883.html ####一、运行效果图 ####二、代码具体实现 1.引入richeditor-android richeditor-android需要的jar： implementation 'jp.wasabeef:richeditor-android:1.2.2' 这是一个Dialog框架，demo中不想...
Android富文本编辑器RichEditor的使用
热门推荐
salute_li的博客
07-22 3万+
以前有个项目做一个笔记本类似的东西，觉得写的不太好，最近重新写，就发现了这个富文本编辑器他的效果是这样的 感觉有点厉害啊 废话不多说开始撸码 1先添加依赖 dependencies { compile ‘jp.wasabeef:richeditor-android:1.2.0’ } 2写布局 <jp.wasabeef.richeditor.RichEditor a
Android富文本编辑器(高仿简书)
06-11
一个Android富文本类库，支持编辑和预览，支持修改文字大小，各种样式（斜体，加粗。。。）、支持插入和删除图片。
HTML5 – 支持WORD上传的富文本编辑器
最新发布
alisky119的博客
09-27 713
编辑器：百度UEditor前端：vue2,vue3,vue-cli,html5,jquery后端：asp.net,.net core,asp,php,jsp,springboot服务器：Windows,linux,centos功能：word一键导入实际上这个需求很早之前就有了，但是一直没有好的解决方案，之前也是在网上找过很长时间，寻找过不很多产品和解决方案。开源的解决方案也找过，但是一直都没找到满意的。JAVA的话大部分是用的POI，用起来的话，感觉还不是太好。
安卓富文本编辑器
HEgoooah的博客
11-23 1795
自动解析超链接和表情。 但写得不是很满意，仅供参考。 public class RichCharSequenceBuilder { private CharSequence charSequence; private final static String EMPTY_STR = ""; private final static String HYPERLINK_COLOR = "#5CA2AE"; public RichCharSequenceBuilder() {
H5移动端，富文本编辑器 wangEditor
12-20
移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器，非常好用，后台配置也简单。按照wangEditor官网的配置教程就可以。
Android-基于WebView的富文本编辑器-Android
08-13
基于WebView的富文本编辑器 - Android
分享一个Android好用的富文本编辑器
tianqidear的博客
03-04 2777
Android富文本编辑器 说明 最近大家有个问题问的比较多，就是如何把已有的html二次编辑，其实直接setHtml就好了，获取是get 放进去就是set,load的方式其实就是走webview本身的效果了 https://github.com/RexSuper/RichEditor/issues/9 本编辑器基于静态html实现了客户端编辑器所需要的几乎全部功能及其实际流程所需，包括下载，视频缩略图，自定义标签样式 自定义点击事件本地资源转网络资源需要改为你自己的服务器）等等 下面一个实际项目的应用
react-native-rich-editor：轻量级React Native（JavaScript，H5）富文本编辑器
02-05
React Native Rich Text编辑器 适用于Android和iOS（macOS和Windows）的功能齐全的Rich Text Editor？ 如果要使用flutter ，可以检查以添加flutter_rich_editor yarn add react-native-pell-rich-editor or npm i...
android h5 离线缓存,H5 应用程序缓存(离线缓存)
weixin_29421409的博客
05-27 1085
离线缓存这个功能的实现有以下步骤：1,以nginx做web服务器为例，在mime.types文件中添加一行：text/cache-manifest manifest,作用是为了让服务器识别该类型文件2,在html文件html标签中添加一行manifest="cache.appcache",告诉浏览器要加载的内容。3.在该目录下新建一个文件cache.appcache，文件内容为：chche...
Android 富文本编辑器
12-14
Android 富文本编辑器
RichEditor for Android强大的富文本编辑器
11-09
RichEditor for Android强大的富文本编辑器 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
安卓富文本编辑器相关-richeditor-android富文本编辑器.zip
07-29
richeditor-android富文本编辑器.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
android 优秀框架整理(1)
2401_83817843的博客
05-03 739
github https://github.com/chrisbanes/Android-PullToRefresh作者：Chris Banes使用：github fork源码，集成到项目中25.flexbox-layout一句话介绍：一款弹性伸缩布局上榜理由：8.1k个star，前端H5开发者转Android开发的福音，FlexboxLayout作为LinearLayout和RelativeLayout的替代者，值得各位一试，与其一同推出的还有ConstraintLayout。github https:/
Android富文本开发
weixin_35034831的博客
01-31 1192
基础概念目录介绍 01.业务需求简单介绍 02.实现的方案介绍 03.异常状态下保存状态信息 04.处理软键盘回删按钮逻辑 05.在指定位置插入图片 06.在指定位置插入输入文字 07.如果对选中文字加粗 08.利用Span对文字属性处理 09.如何设置插入多张图片 10.如何设置插入网络图片 11.如何避免插入图片OOM 12.如何删除图片或者文字 13.删除和插入图片添加动画 14...
Android富文本编辑器
yeaper_yeo的博客
02-17 3134
Android富文本编辑器，一款支持撤销、加粗、斜体、下划线、有序无序列表、对齐、改文字大小、改文字颜色、插入图片、插入视频等功能，并且可设置cookie，自定义素材操作菜单的的编辑器。 github地址：https://github.com/yeaper/RichEditor 1.控件使用 RichEditor是富文本编辑器，EditorOpMenuView是操作栏控件，两个需要配合使用，xm...
Android富文本编辑器（一）
qq_42702222的博客
10-05 1323
本项目参考了Android富文本开发_杨充-CSDN博客_android 富文本，做了大量精简工作，实现一个最基本富文本编辑器，具有文字和图片混合编排的功能。 效果展示 实现的关键步骤 ...
android富文本编辑器ued,Android - 富文本编辑器
weixin_32151313的博客
05-26 519
目前主流的基于Android富文本开发方式思路如下：基于TextView图文混排使用方式：TextView textView = new TextView(context);textView.setText(Html.fromHtml(“xxxxxx”));优点：简单、易用、学习成本低，直接输入html即可缺点：支持的样式不够灵活，有些效果实现不了。例如图片的环绕效果基于布局的实现方式:通过实现多...
android 富文本编辑器
06-06
Android平台上有很多富文本编辑器可以使用，以下是几个比较常用的： 1. RichEditor：这是一个基于WebView的富文本编辑器，可以实现加粗、斜体、下划线、字体大小、颜色等常用富文本编辑功能。 2. Quill：这是一个流行的富文本编辑器，支持多种格式的文本编辑，包括加粗、斜体、下划线、列表等，同时还支持插入图片。 3. CKEditor：这是一款基于HTML5的富文本编辑器，可以实现多种文本格式的编辑，包括表格、图片、音频、视频等。 4. TinyMCE：这是一款基于JavaScript的富文本编辑器，可以实现多种文本格式的编辑，包括加粗、斜体、下划线、列表等。 以上是几个常用的Android富文本编辑器，你可以根据自己的需求选择适合的编辑器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

full courage

你的鼓励是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值