Nb
Study
.com
🔍 请输入搜索关键字
< prev 2 / 4 more >

html一键复制到微信公众号编辑器原理

一键复制到公众号（保留HTML格式）的原理总结，记录作为备忘：

微信公众号编辑器在粘贴时会优先解析text/html格式的内容（而非纯文本）。

因此，实现关键是强制让剪贴板同时存储text/html和text/plain两种格式的数据，确保：

  • 公众号读取text/html：保留样式和排版。
  • 纯文本作为备用：防止不支持HTML的场景丢失内容。

实现原理

1、使用现代浏览器（navigator.clipboard API）**

1)创建多格式数据

使用ClipboardItem封装text/html和text/plain格式的内容：

javascript 复制代码 
const htmlBlob = new Blob([htmlContent], { type: 'text/html' });
const textBlob = new Blob([textContent], { type: 'text/plain' });
const items = [new ClipboardItem({ 'text/html': htmlBlob, 'text/plain': textBlob })];

2)写入剪贴板
通过navigator.clipboard.write(items)直接写入剪贴板，浏览器会自动处理格式优先级。

2、传统浏览器（document.execCommand）

1）模拟选中HTML内容

将HTML放入隐藏的textarea并选中内容：

javascript 复制代码 
const dummy = document.createElement('textarea');
dummy.value = htmlContent; // 注意：此处实际存储的是纯文本，但包含HTML标签
dummy.select();

2）触发复制命令

通过document.execCommand('copy')复制选中内容。

关键技巧：虽然textarea内容是纯文本，但部分浏览器（如Chrome）会保留复制时的上下文格式（如从富文本编辑器复制的HTML）。

完整示例代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一键复制 HTML 到微信公众号</title>
</head>

<body>
    <!-- 复制按钮 -->
    <button id="copyBtn">复制到公众号</button>
    <!-- 要复制的内容，设置为隐藏 -->
    <div id="content" style="display: none;">
        <p style="color: red;">红色文字</p>
        <p style="font-size: 20px;">大号字体文字</p>
    </div>

    <script>
        document.getElementById('copyBtn').addEventListener('click', async function () {
            const content = document.getElementById('content').innerHTML;
            try {
                // 尝试使用现代的 Clipboard API
                if (navigator.clipboard) {
                    const htmlBlob = new Blob([content], { type: 'text/html' });
                    const textBlob = new Blob([content], { type: 'text/plain' });
                    const items = [
                        new ClipboardItem({
                            'text/html': htmlBlob,
                            'text/plain': textBlob
                        })
                    ];
                    await navigator.clipboard.write(items);
                    alert('已按 HTML 格式复制！');
                } else {
                    // 旧浏览器使用 document.execCommand 方法
                    const dummy = document.createElement('textarea');
                    dummy.value = content;
                    document.body.appendChild(dummy);
                    dummy.select();
                    document.execCommand('copy');
                    document.body.removeChild(dummy);
                    alert('已按 HTML 格式复制！');
                }
            } catch (error) {
                console.error('复制失败:', error);
                alert('复制失败，请重试！');
            }
        });
    </script>
</body>

</html>

为什么公众号能解析HTML？

微信公众号编辑器本质是一个富文本编辑器，其粘贴逻辑为：

  1. 优先读取剪贴板中的text/html数据。
  2. 若不存在，则尝试解析text/plain中的HTML标签（部分编辑器支持）。

【分享】Write a JavaScript Parser in Rust

启动tomcat一直提示JMX 端口被占用，但实际上该端口并未被占用时

启动tomcat时，一直报1099端口占用，即使换了一个端口还是被占用。

可以通过下列命令，查询端口占用情况（Windows系统）：

bash 复制代码 
netstat -aon | findstr <端口号>

发现端口并未占用。

原来是开启了Hyper-V服务，保留了端口。可以通过以下命令查询Hyper-V保留的端口。

bash 复制代码 
netsh interface ipv4 show excludedportrange protocol=tcp

输出如下：

bash 复制代码 
PS C:\Users\Administrator> netsh interface ipv4 show excludedportrange protocol=tcp

协议 tcp 端口排除范围

开始端口    结束端口
----------    --------
        80          80
      1050        1149
      1150        1249
      1250        1349
      1550        1649
      5496        5595
      5596        5695
      5696        5795
      5996        6095
      7410        7509
      7510        7609
      7610        7709
      7710        7809
      8888        8888
     50000       50059     *

* - 管理的端口排除。

选择一个上述之外的端口即可，如1010 。

Vant按需引入组件时，使用 showToast 时出现样式异常问题？

Vant中通过Vite及@vant/auto-import-resolver按需引入组件时，使用 showToast 时出现样式异常问题？

官网常见问题里面已经有说明, 在使用按需引入组件方案集成 Vant 时，使用 showToast 等函数无需进行显式导入，否则会造成样式异常。

javascript 复制代码 
// 以下是没有必要的
import { showFailToast, showSuccessToast } from 'vant';

如果需要显示导入组件，需要同时导入样式，即：

javascript 复制代码 
// 导入组件，同时导入样式
import { showFailToast, showSuccessToast } from 'vant';
import 'vant/lib/toast/style'

tailwindcss 4 集成vite报错：Failed to resolve "@tailwindcss/vite".

安装官网文档操作如下：

https://tailwindcss.com/docs/installation/using-vite

Install tailwindcss and @tailwindcss/vitevia npm.

bash 复制代码 
npm install tailwindcss @tailwindcss/vite

Configure the Vite plugin

bashit 复制代码 
# vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

Import Tailwind CSS

Add an @import to your CSS file that imports Tailwind CSS.

bash 复制代码 
@import "tailwindcss";

以上是官网的集成步骤，然而启动后报错：

Failed to resolve "@tailwindcss/vite". This package is ESM only but it was tried to load by require. See https://vite.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]

解决方案

将 vite.config.js/vite.config.ts 重命名为 vite.config.mjs/vite.config.mts

具体参考：https://vitejs.cn/vite5-cn/guide/troubleshooting.html

阿里云APP修改登录掩码（2025年亲测有效）

网上百度的很多方法，包括搜索“登陆掩码”，以及在我的资源找到账号中心等，均无效。

其实打开AI助理或任何可以聊天的窗口，发送账号中心的链接(https://myaccount.console.aliyun.com/overview)，然后直接打开即可。

html 复制代码 
https://myaccount.console.aliyun.com/overview

很傻的设计，备忘一下，免得IP变动后，自己给自己拦住了。

Github镜像站, 2025年1月最新可用！国内更快部署下载(1月更新)

GitHub 镜像可用站点

镜像 访问 链接 可用
GitHub镜像站014 直接 https://bgithub.xyz 可用
GitHub镜像站013 直接 https://kkgithub.com 可用
GitHub镜像站012 直接 https://gitclone.com 可用
GitHub镜像站011 直接 https://github.hscsec.cn 不可用
GitHub镜像站010 直接 https://git.homegu.com 不可用
GitHub镜像站009 直接 https://github.ur1.fun 可用

请特别注意：

导航立足学术公益，仅为方便科研工作而提供学术网址导航。

Windows 子系统中配置 Rust国内镜像以解决cargo run太慢的问题

Cargo则是Rust的官方包管理工具。在进行Rust项目开发时，由于网络原因，从Crates.io下载依赖可能会很慢。为此可以配置Cargo使用国内的镜像源。

在 Windows 子系统的 Linux 发行版中，打开终端，在用户主目录下找到.cargo文件夹，若不存在可新建。在该文件夹中创建或编辑config文件，添加国内镜像源配置内容：

配置国内镜像源

bash 复制代码 
[source.crates-io]
replace-with = 'aliyun'
[source.aliyun]
registry = "sparse+https://mirrors.aliyun.com/crates.io-index/"
[source.ustc]
registry = "https://mirrors.ustc.edu.cn/crates.io-index"
[source.sjtu]
registry = "https://mirrors.sjtug.sjtu.edu.cn/git/crates.io-index/"
[source.tuna]
registry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index.git"
[source.rustcc]
registry = "https://code.aliyun.com/rustcc/crates.io-index.git"

清理 Cargo 缓存

删除.cargo目录下的.package-cache文件：

bash 复制代码 
rm $HOME/.cargo/.package-cache

使用config.toml

如果是rust 1.38 及以后的版本，推荐 使用config.toml 代替 config。
否则会有一下警告。

即：

toml 复制代码 
[source]
[source.crates-io]
replace-with = "aliyun"

[source.aliyun]
registry = "sparse+https://mirrors.aliyun.com/crates.io-index/"

[source.ustc]
registry = "https://mirrors.ustc.edu.cn/crates.io-index"

[source.sjtu]
registry = "https://mirrors.sjtug.sjtu.edu.cn/git/crates.io-index/"

[source.tuna]
registry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index.git"

[source.rustcc]
registry = "https://code.aliyun.com/rrustcc/crates.io-index.git"

注意，toml 配置的写法稍有不同。

Windows 系统安装gcc, Using GCC with MinGW

如何在线查看mp4视频的编码格式，是否为iOS兼容的h264格式

记录一下，可以在线查询mp4编码格式的网站：

https://gpac.github.io/mp4box.js/test/filereader.html

通常H264的格式的文件编码信息如下：

Movie Info

File Size / Bitrate： 0 bytes / 0 kbps
Duration / Timescale： 220845/1000 (0:03:40.845)
Brands (major/compatible)： isom,isom,iso2,avc1,mp41
MIME： video/mp4; codecs="avc1.42c01f,mp4a.40.2"; profiles="isom,iso2,avc1,mp41"
Progressive： false
Fragmented： false
MPEG-4 IOD： false

重点查看MIME类型是否为video/mp4，是否包含avc信息。且 Progressive/Fragmented/MPEG-4 IOD 三个参数为false。

另外iOS支持的编码格式可以通过官方查看：
https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html

What are the specifics of the video and audio formats supported?
Although the protocol specification does not limit the video and audio formats, the current Apple implementation supports the following formats:

  • Video:
    H.264 Baseline Level 3.0, Baseline Level 3.1, Main Level 3.1, and High Profile Level 4.1.

  • Audio:
    HE-AAC or AAC-LC up to 48 kHz, stereo audio
    MP3 (MPEG-1 Audio Layer 3) 8 kHz to 48 kHz, stereo audio
    AC-3 (for Apple TV, in pass-through mode only)

< prev 2 / 4 more >