简易富文本编辑-Android学习日志2020-1-28

最新推荐文章于 2024-10-06 20:16:20 发布

嘻嘻哈哈笑呵呵

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量125

点赞数

分类专栏： Android 文章标签： java android javascript web app

本文链接：https://blog.csdn.net/qq_25856179/article/details/104100472

版权

Android 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简易富文本编辑

让标签的contenteditable属性设为true即可直接修改内部内容，但是Android和在pc网页上使用可能存在差异。这里分享一个简单的富文本编辑，需要配合Android使用。
这个富文本编辑目前通过于Android端交互可以向其中添加图片、添加超链接、普通文本。主要靠js驱动（我的基础不行，只能写成这样）。详细解释看代码即可，需要配合Android知识。
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>富文本编辑</title>
    <script type="text/javascript">
		/*每一个被添加的标签（也就是图片、超链接）都会被一层div包裹，固定其具体位置，并且每次添加完一个都会在其下部添加一个div用于输入文本（可忽略）*/
        /*添加外层标签*/
        function outDiv(inLabel)
        {
            var outdiv = document.createElement("div");
            outdiv.style.textAlign = "center";
            outdiv.contentEditable= true;
            outdiv.appendChild(inLabel);
            document.getElementById("main").appendChild(outdiv);
            var nextDiv = document.createElement("div");
            document.getElementById("main").appendChild(nextDiv);
            nextDiv.outerHTML = "<div style='margin-left: 30px; margin-right: 30px;' contenteditable='true'><br></div>"
        }

        /*添加图片*/
        function addPhoto(path)
        {
            var addImg = document.createElement("img");
            outDiv(addImg);
            addImg.outerHTML = "<img src='" + path + "' alt='图片存在问题' id='" + path + "'/>";

        }

		/*Android端存在图片传输问题，是先将图片保存到文件夹内，再在html中调用，而在html中使用退格键即可删除标签，所以Android端在适当的时候清除没有用到的图片*/
        /*确定图片是否存在于html页面中*/
        function isExistedPhoto(id)
        {
            if(document.getElementById(id))
            {
                return 1;
            }
            else
            {
                return 0;
            }
        }
		/*受Android端影响，启用预览模式时，将整体网页所有标签设为不可编辑（代码在下面），同时为了确保同步，每次预览都会在Android端存储，因为js没法直接存储文件，所以将网页代码整体返回到Android端接收并保存到文件内，注意Android端应对得到的结果转码，因为得到的是unicode码，即使js已经转过了。*/
        /*返回整体网页*/
        function wholeHtml()
        {

            return unescape(document.getElementsByTagName('html')[0].outerHTML.toString());
        }

        /*添加链接*/
        function addHref(href)
        {
            var a = document.createElement("a");
            a.href = href;
            a.innerText = href;
            a.contentEditable = true;
            outDiv(a);
        }
		
		/*开启预览模式则不可编辑，此时可以验证链接*/
        /*可编辑设置*/
        function setEditAble(type)
        {
            if(!type)
            {
                getEdit("div", type);
                getEdit("img", type);
                getEdit("a", type);
            }
            else
            {
                getEdit("div", type);
                getEdit("img", type);
                getEdit("a", type);
            }
        }
        /*获取对象*/
        function getEdit(label, type)
        {
            var aa =  document.getElementsByTagName(label);
            if(!type)
            {
                for( var a1 = 0; a1 < aa.length; a1++)
                {
                    aa[a1].contentEditable = false;
                }
            }
            else
            {
                for( var a1 = 0; a1 < aa.length; a1++)
                {
                    aa[a1].contentEditable = true;
                }
            }
        }
    </script>
</head>
<body>
	<!--只要一个基础div就行，甚至可以直接用body添加id代替-->
    <div id="main" contenteditable="true" style="margin-left: 30px; margin-right: 30px;"></div>
</body>
</html>

由于本人技术能力限制，无法很好的写出代码，只能提供一个简易的编辑。

对应Android端的简易介绍

Android端根据js代码设置对应内容。
webview建立

//根据id查找
webView = rootView.findViewById(R.id.makeArticle);
		//启用js支持
        webView.getSettings().setJavaScriptEnabled(true);
//下面有一堆设置内容，我也不太明白，大致是启用js支持、支持网络传输、支持html5格式存储、支持本地存储        webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
		//网页处理，内部可根据网页开始、网页完成等状态做处响应
        webClient = new WebClient();
        webView.setWebViewClient(webClient);
        //允许操作文件
        webView.getSettings().setAllowFileAccessFromFileURLs(true);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        webView.getSettings().setBlockNetworkLoads(false);
        webView.getSettings().setBlockNetworkImage(false);
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setDatabaseEnabled(true);
        //添加js可调用的函数类，函数使用javascriptinterface注释，内部函数可以被js所调用
        webView.addJavascriptInterface(new MakeArticleWeb(getContext(), username, articleId, webView), "makeArticle");

使用Android调用js代码

//webview使用要在同一进程中
//基础格式
webView.loadUrl(url);//注意此调用异步加载，可能比后续loadUrl方法加载慢
//加载js代码
webView.loadUrl("javascript:js函数(参数)");//传入一个字符串，前面javascript固定，后面为要调用的函数名，注意当参数要传入字符串时，加上单引号。
//loaddata
webView.loadData(文本，文本格式(mimetype)（例如text/html为html文本），编码格式（例如UTF-8）);

WebView的loadUrl异步加载问题

因loadUrl加载顺序不一致导致错误，因为webview使用必须在统一进程中，最好避免。如果实在需要，可以通过WebViewCilent中onPageFinsihed方法，在其中运行js可避免页面未完全加载导致js无法执行的异常。
示例

 //网页监控
    public class WebClient extends WebViewClient
    {
		//页面加载完成调用该方法
        @Override
        public void onPageFinished(WebView view, String url)
        {
            super.onPageFinished(view, url);
            onCreateViewUpdate();
            //不为空，更新数据
            if(addList.size() > 0 && number <= 30)
            {
                for (Bitmap value : addList.values()) {
                    String savePath = MakeUUID.makeUUID(username + "-" + articleId) + ".png";
                    saveThePhotoWithBitmap(value, savePath);
                    //此处调用了js，而且该js必须在页面完全加载后才能有效使用
                    webView.loadUrl(addTo(savePath, 0));
                }
            }
            //保存网页数据
            saveHtml();
        }

webview调用goback方法导致返回乱七八糟的东西（例如返回ul）

单击webview中超链接进入其它网页再调用goback返回时可能出现问题，可通过修改默认的gobakc返回流程改善。
代码

public String startUrl = thePath;//记录一开始的url，直接通过内部类写死，或在构造方法中定义
        private int pageNumber = 0;//页面计数，判断当前网页是不是主网页
        
        //重写该方法，适配Android高版本
		@Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
        {
            System.out.println(startUrl);
            //如果页面不是主页面且当前url不是一开始的url，跳转会主界面
            if(!request.getUrl().equals(startUrl) && pageNumber != 0)
            {
                System.out.println(pageNumber);
                pageNumber = 0;
                view.loadUrl(startUrl);//返回主界面
                return true;
            }
            else
            {
                pageNumber = 1;
                //使用原流程
                return super.shouldOverrideUrlLoading(view, request);
            }
        }