Android加载富文本

news2024/10/6 13:15:25

直接用webview加载:

package com.example.testcsdnproject;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class RichTextViewActivity extends AppCompatActivity {

    private WebView webview_intro;      //webview加载富文本
    //网页加载富文本的限制标签
    private String CSS_STYLE =" <style> p {color:#FFFFFF;} a {color:#FFFFFF;}  img{max-width:100% !important;height:auto !important}video{max-width:100% !important;height:auto !important}  p span{color:#FFFFFF !important; background-color:#1A1A1A !important; font-size:20px;}</style>";
//    private String CSS_Content = "";
    //测试数据
        private String CSS_Content = "<h3><span style=\"color: rgb(245, 245, 245);\">hello world</span></h3><p><span style=\"color: rgb(255, 251, 143);\">阿大声道啊大师大的撒打算的撒打发的股份的回复的后代鼓捣鼓捣 阿打算打打打算的啊大大十多万鹅鹅鹅我热潮中在大大</span></p><p><br></p><p><br></p><p><span style=\"color: rgb(255, 251, 143);\">撒旦教奥斯卡了的骄傲了看得见卡的好拉屎的金卡价saduoiejwrwmflkvnfslvlkaosfjdfms</span></p><p><span style=\"color: rgb(255, 251, 143);\">舒服vhskdjklvnmxmvxsdfsdfsdfjjsj;lrjewklrjkl</span></p><p><img src=\"https://img1.baidu.com/it/u=186439391,629096241&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=740\" alt=\"\" data-href=\"\" style=\"\"/></p><p><br></p><p><br></p><p><span style=\"color: rgb(255, 77, 79);\">结尾。。。。。。asd.asdas撒as大大啊我u哦IE问问瑞荣 &nbsp;1231312313112313132131231</span><div class=\"media-wrap video-wrap\"><video controls=\"\" class=\"media-wrap video-wrap\" src=\"https://images.artvrpro.com/activity%2F1668587203846-7_1.MP4.7_1.MP4\"></video></div></p>";
//    private String CSS_STYLE =" <style> p {color:#FFFFFF;} a {color:#FFFFFF;}  img{max-width:100% !important;height:auto !important}video{max-width:100% !important;height:auto !important}</style>";


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_rich_text_view);

        webview_intro = findViewById(R.id.webview_intro);
        initWebViewContent(CSS_Content);
    }


    /**
     * 传入参数为String的时候
     */
    @SuppressLint("NewApi")
    private void initWebViewContent(String content) {
        Log.e("colincontent: ", content);

        WebChromeClient wvcc = new WebChromeClient();
        WebSettings webSettings = webview_intro.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setUseWideViewPort(true); // 关键点
        webSettings.setAllowFileAccess(true); // 允许访问文件
        webSettings.setSupportZoom(true); // 支持缩放w
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setAppCacheEnabled(true);
        webSettings.setDatabaseEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        webSettings.setTextZoom(200);


        webview_intro.setBackgroundColor(Color.parseColor("#FF1A1A1A"));

        webview_intro.setWebChromeClient(wvcc);
        content = content.replaceAll("background-color:#ffffff", "background-color:#1A1A1A");
        CSS_Content = content;
        webview_intro.loadDataWithBaseURL(null, CSS_STYLE+getNewContent(content), "text/html", "utf-8", null);

        webview_intro.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);


                // 解决NestedScrollView嵌套WebView底部留白问题
//                        webview_intro.getLayoutParams().height = ViewGroup.LayoutParams.WRAP_CONTENT;

                //这是我找到的最简单的方法(例如,将文本颜色更改为白色):
                view.loadUrl(
                        "javascript:document.body.style.setProperty(\"color\", \"white\");"
                );

            }
        });


    }

    //视频屏幕宽度 解决视频超出屏幕宽度的问题
    private String getNewContent(String htmlText) {
        Document doc = Jsoup.parse(htmlText);
        Elements elements = doc.getElementsByTag("img");
        for (Element element : elements) {
            element.attr("width", "100%").attr("height", "auto");
        }
        Elements elementsVideo = doc.getElementsByTag("video");
        for (Element element : elementsVideo) {
            element.attr("width", "100%").attr("height", "auto");
        }
        return doc.toString();
    }


    @Override
    protected void onDestroy() {
        super.onDestroy();
        if(webview_intro!=null){    //销毁界面时要释放webview,否则退出页面还会播放视频音频
            webview_intro.loadUrl("about:blank");
            webview_intro =null;
        }
    }
}

xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RichTextViewActivity"
    android:background="#101010">

    <WebView
        android:id="@+id/webview_intro"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:scrollbars="none"
        android:visibility="visible"

        android:focusable="false"
        android:nestedScrollingEnabled="false"/>

</RelativeLayout>

这里用的是原生的webview,会有一个问题,就是特殊的视频格式可能会出问题,项目中可以使用腾讯的X5内核的webview 。

效果如下:

分割线=======================================

如果不想用webview加载富文本也可以用富文本编辑器:

 //导入图文编辑
    api ('com.github.wordpress-mobile.WordPress-Aztec-Android:aztec:v1.3.44')
    api ('com.github.wordpress-mobile.WordPress-Aztec-Android:glide-loader:v1.3.44')
    api ('com.github.wordpress-mobile.WordPress-Aztec-Android:wordpress-comments:v1.3.44')
    api ('com.github.wordpress-mobile.WordPress-Aztec-Android:wordpress-shortcodes:v1.3.44')
private AztecText mAztecText;
protected Aztec aztec;

 aztec = Aztec.with(mAztecText,
                new SourceViewEditText(getActivity()),
                new AztecToolbar(getActivity()),
                new IAztecToolbarClickListener() {
                    @Override
                    public void onToolbarCollapseButtonClicked() {

                    }

                    @Override
                    public void onToolbarExpandButtonClicked() {

                    }

                    @Override
                    public void onToolbarFormatButtonClicked(@NonNull ITextFormat iTextFormat, boolean b) {

                    }

                    @Override
                    public void onToolbarHeadingButtonClicked() {

                    }

                    @Override
                    public void onToolbarHtmlButtonClicked() {

                    }

                    @Override
                    public void onToolbarListButtonClicked() {

                    }

                    @Override
                    public boolean onToolbarMediaButtonClicked() {
                        return false;
                    }
                })
                .setImageGetter(new GlideImageLoader(getActivity()))
                .setOnLinkTappedListener(this)    /*添加超链接点击监听*/
                .setLinkTapEnabled(true)
                .addPlugin(new WordPressCommentsPlugin(mAztecText))
                .addPlugin(new CaptionShortcodePlugin(mAztecText))
                .addPlugin(new HiddenGutenbergPlugin(mAztecText));

        mAztecText.setKeyListener(null);
 aztec.getVisualEditor().fromHtml("富文本", false);

XML:

 <org.wordpress.aztec.AztecText
            android:id="@+id/aztec"
            style="@style/EditTextTheme"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/dp_16"
            android:layout_marginRight="@dimen/dp_16"
            android:focusable="false"
            android:gravity="top|start"
            android:imeOptions="flagNoExtractUi"
            android:paddingEnd="@dimen/dp_16"
            android:paddingLeft="@dimen/dp_16"
            android:paddingRight="@dimen/dp_16"
            android:paddingTop="@dimen/dp_16"
            android:scrollbars="none"
            android:visibility="gone"
            aztec:bulletColor="@color/bulletColor"
            aztec:bulletMargin="@dimen/dp_6"
            aztec:bulletPadding="@dimen/dp_5"
            aztec:codeColor="@color/colorLightBlack"
            aztec:historyEnable="true"
            aztec:historySize="10"
            aztec:linkColor="@color/linkColor"
            aztec:linkUnderline="true"
            aztec:quoteBackground="@color/quoteBackground"
            aztec:quoteColor="@color/quoteColor"
            aztec:quoteMargin="@dimen/dp_0"
            aztec:quotePadding="@dimen/dp_10"
            aztec:quoteWidth="@dimen/dp_5"
            aztec:textColor="@color/colorLightBlack"/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1462907.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

模型转换案例学习:等效替换不支持算子

文章介绍 Qualcomm Neural Processing SDK &#xff08;以下简称SNPE&#xff09;支持Caffe、ONNX、PyTorch和TensorFlow等不同ML框架的算子。对于某些特定的不支持的算子&#xff0c;我们介绍一种算子等效替换的方法来完成模型转换。本案例来源于https://github.com/quic/qidk…

js谐音梗创意小游戏《望子成龙》

&#x1f33b; 前言 龙年到来&#xff0c;祥瑞满天。愿您如龙般矫健&#xff0c;事业腾飞&#xff1b;如龙鳞闪耀&#xff0c;生活美满。祝您龙年大吉&#xff0c;万事如意&#xff01; 龙年伊始&#xff0c;我给各位设计了一款原创的小游戏&#xff0c;话不多说&#xff0c;直…

D5020——外围元件少,内含压缩器和扩展器静噪电路,可应用在1.5V立体声耳机上,响应时间可调

D5020是一块增益可调 的压缩、扩展电路。它有两个通道组成&#xff0c;一个通道作扩展用&#xff0c;另一个通道能作压缩或扩展用。电路内部含有小信号全波整流、检测信号的大小&#xff0c;用于调节输入或反馈通道的增益大小。含有温度特性较好的带隙精密基准源&#xff0c;静…

Leetcode 11.盛水最多的容器

题目 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾斜容器。…

浏览器---浏览器/http相关面试题

1.localStorage和sessionStorage 共同点&#xff1a;二者都是以key-value的键值对方式存储在浏览器端&#xff0c;大小大概在5M。 区别&#xff1a; &#xff08;1&#xff09;数据有效期不同&#xff1a;sessionStorage仅在当前浏览器窗口关闭之前有效&#xff1b;localStorag…

C语言第二十八弹---整数在内存中的存储

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 目录 1、整数在内存中的存储 2、大小端字节序和字节序 2.1、什么是大小端&#xff1f; 2.2、为什么有大小端? 2.3、练习 2.3.1、练习1 2.3.2、练习2 2.…

安装SSH连接工具

连接Linux 1). 打开finalShell 2). 建立连接 Linux目录结构 在Linux系统中&#xff0c;也是存在目录的概念的&#xff0c;但是Linux的目录结构和Windows的目录结构是存在比较多的差异的 在Windows目录下&#xff0c;是一个一个的盘符(C盘、D盘、E盘)&#xff0c;目…

使用python构建Android,探索跨平台应用开发Kivy框架

使用python构建Android&#xff0c;探索跨平台应用开发Kivy框架 1. 介绍Kivy框架 Kivy是什么&#xff1f; Kivy是一个开源的Python跨平台应用程序开发框架&#xff0c;旨在帮助开发者快速构建创新的、可扩展的移动应用和多点触控应用。Kivy采用MIT许可证&#xff0c;允许开发…

java数据结构与算法刷题-----LeetCode102. 二叉树的层序遍历

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 1. 法一&#xff1a;广度优先遍历&#xff08;队列&#xff09; 解题思路…

嵌入式Qt 计算器核心算法_2

一.中缀表达式转后缀表达式 中缀表达式是最常用的算术表达式形式——运算符在运算数中间。但运算时需要考虑运算符优先级。 ​后缀表达式是计算机容易运算的表达式&#xff0c;运算符在运算数后面&#xff0c;从左到右进行运算,无需考虑优先级,运算呈线性结构。 1 2 * 3// …

django自定义后端过滤

​ DRF自带的过滤 第一个 DjangoFilterBackend 是需要安装三方库见[搜索&#xff1a;多字段筛选]两外两个是安装注册了rest_framework就有。 如上图&#xff0c;只要配置了三个箭头所指的方向&#xff0c;就能使用。 第一个单字段过滤 用户视图集中加上filterset_fields …

HarmonyOS—添加/删除Module

Module是应用/服务的基本功能单元&#xff0c;包含了源代码、资源文件、第三方库及应用/服务配置文件&#xff0c;每一个Module都可以独立进行编译和运行。一个HarmonyOS应用/服务通常会包含一个或多个Module&#xff0c;因此&#xff0c;可以在工程中创建多个Module&#xff0…

C++模板从入门到入土

1. 泛型编程 如果我们需要实现一个不同类型的交换函数&#xff0c;如果是学的C语言&#xff0c;你要交换哪些类型&#xff0c;不同的类型就需要重新写一个来实现&#xff0c;所以这是很麻烦的&#xff0c;虽然可以cv一下&#xff0c;有了模板就可以减轻负担。 下面写一个适…

Windows下搭建EFK实例

资源下载 elasticSearch &#xff1a;下载最新版本的就行 kibana filebeat&#xff1a;注意选择压缩包下载 更新elasticsearch.yml&#xff0c;默认端口9200&#xff1a; # Elasticsearch Configuration # # NOTE: Elasticsearch comes with reasonable defaults for most …

CSB ---> (XXE)XML基础

本来今天想更一下CSbeacon上线多层的内网机器的&#xff0c;但是刚好今天是年后的第一节课&#xff0c;讲的是XXE的基础&#xff0c;那就来先盘一下基础&#xff01;&#xff01; 1.XXE XXE全称是XML External Entity即xml外部实体注入攻击&#xff01;其后果会导致用户…

UE C++ 设置碰撞前 后事件 碰撞中事件

一.在Actor中声明碰撞BOX组件 UPROPERTY(VisibleAnywhere, BlueprintReadOnly, Category "MySceneComponent")class UBoxComponent* MyBox; 在Actor以这样的形式实现代理绑定&#xff0c;在BeginPlay()里。 MyBox->OnComponentBeginOverlap.AddDynamic(); 转到…

《游戏引擎架构》--学习3

内存管理 优化动态内存分配 维持最低限度的堆分配&#xff0c;并且永不在紧凑循环中使用堆分配 容器 迭代器 Unicode

(C++) 详解内存地址空间

详解内存空间 0. 概述 一个C/C 程序&#xff0c;编译之后&#xff0c;形成的程序&#xff0c;在执行期间&#xff0c;内存中不仅存在一块区域用于存放代码&#xff0c;还有一些其他的区域用于使用&#xff0c;本节会详解C/C内部所使用的内存地址空间&#xff0c;关于各内存的…

Java下访问SQLServer 2008(低于2016)数据连接问题

环境&#xff1a;ubuntu20.04&#xff0c;tomcat&#xff0c;java 通过jdbc:sqlserver连接远程的SQLServer 2008R2数据库&#xff0c;2016版本之前仅支持TLS10&#xff0c;因此在连接时会出现如下错误&#xff0c; The driver could not establish a secure connection to SQ…

(二十二)Flask之上下文管理第三篇【收尾—讲一讲g】

目录&#xff1a; 每篇前言&#xff1a;g到底是什么&#xff1f;生命周期在请求周期内保持数据需要注意的是&#xff1a; 拓展—面向对象的私有字段深入讲解一下那句&#xff1a; 每篇前言&#xff1a; &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;【孤寒者】—CSDN全栈领域…