仿简书APP富文本编辑器实现

最新推荐文章于 2024-09-15 07:04:47 发布

Henson_Ding

最新推荐文章于 2024-09-15 07:04:47 发布

阅读量2.1w

点赞数 13

分类专栏： Android 文章标签： android html webview 富文本

本文链接：https://blog.csdn.net/ding_GC/article/details/52839316

版权

最近看到了简书App中的编辑器可以实现字体的加粗，斜体，删除线等多种样式，而且可以插入图片，链接，分割线。支持字符串数据提交服务器，然后在TextView中直接展示。

如果我们没有了解其中原理之前，感觉还是挺高大上的。然后我就打算仿照他写一个类似的给大家分享。

开始我在网上找了一些类似的Demo，发现实现的关键原理是：通过WebView加载Html标签实现效果展示，然后最终获取全部的Html语句提交服务器，然后我们在请求服务器获取Html标签字符串，直接TextView展示。

不过在网上找了很多都最终达不到简书的那种效果，然后我就对部分进行了重写和添加，最终实现了和简书几乎一样的效果。

第一步：自定义WebView并初始Html化标签字符串

    private static final String SETUP_HTML = "file:///android_asset/editor.html";
    private static final String CALLBACK_SCHEME = "re-callback://";
    private static final String STATE_SCHEME = "re-state://";
    private boolean isReady = false;
    private String mContents;
    private OnTextChangeListener mTextChangeListener;
    private OnDecorationStateListener mDecorationStateListener;
    private AfterInitialLoadListener mLoadListener;
    private OnScrollChangedCallback mOnScrollChangedCallback;

    public RichEditor(Context context) {
        this(context, null);
    }

    public RichEditor(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.webViewStyle);
    }

    @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);
    }

loadUrl(SETUP_HTML);

我们可以看到加载了一个本地的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>

    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">

<pre name="code" class="html" style="font-size: 13.3333px;">    script type="text/javascript" src="rich_editor.js"></script>

在Html文件中连接了两个css文件和一个js文件

/**
 * Copyright (C) 2015 Wasabeef
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@charset "UTF-8";


html {
  height: 100%;
}

body {
  overflow: scroll;
  display: table;
  table-layout: fixed;
  width: 100%;
  min-height:100%;
}

#editor {
  display: table-cell;

  -webkit-user-sel

最低0.47元/天解锁文章