uniapp/H5富文本复制文本功能

最新推荐文章于 2025-06-25 10:54:20 发布

原创

最新推荐文章于 2025-06-25 10:54:20 发布 · 969 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #javascript

博客主要涉及uni-app前端开发的代码实现，着重介绍了工具方法相关内容，与信息技术领域的前端开发紧密相关。

代码实现：

copy() {
				let replacedContent = this.form.resTaskBaseInfoDetail.content;
				let text = readHtml(replacedContent)
				// #ifdef H5
				let textarea = document.createElement("textarea")
				textarea.value = text
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选中文本内容
				textarea.setSelectionRange(0, text.length)
				uni.showToast({ //提示
					title: '复制成功',
					icon: 'success'
				})
				document.execCommand("copy")
				textarea.remove()
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: text, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: `复制成功`,
							icon: 'success'
						})
					}
				}, true);
				// #endif
			},

工具方法：

// 提取html中文本
export const readHtml = (html) => {
	// 去掉注释，script，style,textarea,input,实体字符&开头;结尾
	let res = html.repl

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_Girl200

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp - [全端兼容] 实现精美Editor富文本编辑器功能，uniApp全平台兼容的富文本插件组件用户可上传图片及对接服务器存储文件等，手机移动端H5网页富文本/小程序富文本/App富文本！

🏆 前端领域优质创作者

11-01

1万+

uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，uniapp富文本编辑器，uniapp中如何实现各平台都兼容的富文本编辑器，Editor富文本插件，uniApp微信小程序富文本，UNI-APP安卓苹果ios系统App端富文本组件，editor富文本编辑器如何实现上传图片，图片上传后不显示怎么办，如何配置图像上传功能，富文本图片上传怎么传到服务器中，获取图片路径，editor插入图片，富文本编辑器上传图片，报错怎么办，跨域CORS处理，配置不行无效

uniapp editor富文本编辑器，h5富文本编辑器封装成插件

weixin_42483208的博客

04-12

7618

公司业务需求，需要在h5实现富文本编辑功能。uniapp的editor可以实现富文本编辑，但是editor只有编辑框，没有给文本设置样式的工具栏。于是自己组装了一个。效果如下图，实现了文本的字体、颜色、加粗、斜体、下划线、删除线、对齐方式、有序/无序/列表、插入图片、返回、撤销、清空等常见功能。用到的插件：color-picker(颜色选择插件，插件市场下载)、editor(uniapp自带，无需下载)。封装插件名称：editor-rich 重点提示：工具栏的图标请自行在iconfont去添加，否则图

参与评论您还未登录，请先登录后发表或查看评论

uniapp 开发H5、安卓复制图片和文字到剪贴板

weixin_44850095的博客

06-25

1906

本文介绍了使用uniapp开发H5和安卓应用时实现复制图片与文字至剪贴板的解决方案。对于H5端，直接使用navigator.clipboard API即可方便地实现图片和文字复制；安卓端则通过worry-clipboard插件实现。针对安卓无法同时复制文字图片的问题，作者创新性地采用canvas将文字与原图片合成新图片再复制的思路。文章详细说明了实现步骤，包括canvas绘制、文本处理、图片转换等技术细节，并提供了完整的代码示例。该方法效果良好，作者也欢迎读者分享更好的实现方案。

uniapp 之复制文本内容（兼app+h5）

zhuang的博客

01-24

1万+

在实际项目开发中，我们经常能够遇到复制文本内容的需求，下面就让我们来看下复制文本如何实现：第一种方式：利用uniapp 的 text 组件的 selectable属性，使 text 组件包裹的文本内容可选，但是这种方法有一定的局限线，就是当用户长按的时候选中的是当前的词且不能拖拽移动增加选中内容，而不是选中 text 组件包裹的所有文本内容； <text selectable="true"> 这是一个可以长按选择文本，弹出复制的text标签 </text&gt

uniapp富文本文字长按选中（用于复制，兼容H5、APP、小程序三端）

weixin_58031521的博客

02-18

2952

改造后：（由于uniapp rich-text ios无法实现复制功能，故加上:user-select="selectable"兼容ios）1. 查看u-parse源码发现小程序走到以下逻辑：（没有传入selectable属性，需要将selectable传入trees组件）2. 进入trees组件，找到富文本展示逻辑，发现使用uni-app的rich-text，支持selectable属性。

uniapp 支持复制当前文本内容

一名运维开发工程师的日常记录

09-02

1364

uniapp 小程序上面有时需要支持复制功能，如下代码即可。（注意小程序隐私协议需要打开剪切板功能）

【uni-app】H5复制文字

weixin_44901524的博客

07-10

353

1、安装 vue-clipboard2 插件 2、main.js引入 3、需要的页面调用（js部分）

uniApp H5实现复制文本功能

qq_37125233的博客

09-19

674

uniApp H5实现复制文本功能

精选资源

Uniapp 多功能富文本编辑组件可多端使用 H5插入

09-18

在这个场景下，标题提到的“Uniapp多功能富文本编辑组件”就是一个专门为Uniapp设计的，能在H5环境下使用的富文本编辑工具。这个组件具有多端使用的特性，这意味着不仅可以在H5环境中运行，也可以在 Uniapp 支持的...

uniapp富文本编辑器.zip

01-17

本文将深入探讨如何在uniapp中实现一个功能完善的富文本编辑器，包括编辑器的美化、内容获取、事件监听等关键点。一、uniapp框架介绍 uniapp是一款由DCloud开发的跨端框架，基于Vue.js语法，可一次编写，多端运行...

uniapp 开发必备：复制功能实现教程（h5）

最新发布

07-13

在 UniApp 框架中实现 H5 技术的富文本编辑器功能，通常可以通过以下几种方式完成： ### 3.1 使用 `contenteditable` 自定义富文本编辑器 UniApp 支持 H5 页面中使用原生 HTML 属性 `contenteditable` 来创建可编辑区域。开发者可以结合 Vue 的 ref 和 methods 实现对编辑内容的控制与导出。 ```html <template> <view class="container"> <div id="editor" contenteditable="true" @input="onInput" v-html="editorContent"></div> <button @click="saveContent">保存</button> </view> </template> <script> export default { data() { return { editorContent: '<b>初始内容</b>' }; }, methods: { onInput(e) { this.editorContent = e.target.innerHTML; }, saveContent() { console.log('当前HTML内容：', this.editorContent); } } }; </script> ``` 该方法适用于简单的富文本输入场景，但缺乏高级格式化功能如插入图片、颜色选择等[^1]。 --- ### 3.2 使用第三方富文本编辑器组件为了提升功能完整性和用户体验，推荐集成成熟的富文本编辑器库或组件。例如： #### 3.2.1 使用 `vue-quill-editor` Quill 是一个功能丰富的开源富文本编辑器，支持 Vue 集成，并兼容 UniApp 的 H5 平台。安装依赖： ```bash npm install vue-quill-editor quill ``` 使用示例： ```html <template> <quill-editor v-model="content" :options="editorOptions" /> </template> <script> import { quillEditor } from 'vue-quill-editor'; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; export default { components: { quillEditor }, data() { return { content: '<p>默认内容</p>', editorOptions: { theme: 'snow' } }; } }; </script> ``` 此方案提供了完整的编辑功能，包括字体设置、列表、链接插入等。 --- ### 3.3 使用 UniApp 内置的 `web-view` 加载外部编辑器若需要更复杂的富文本编辑功能（如公式编辑、协作编辑等），可通过 `web-view` 组件加载远程网页形式的富文本编辑器，例如 TinyMCE 或 CKEditor。 ```html <template> <web-view :src="editorUrl" @message="handleMessage" /> </template> <script> export default { data() { return { editorUrl: 'https://example.com/rich-text-editor.html' }; }, methods: { handleMessage(e) { const htmlContent = e.detail.data[0]; console.log('接收到的内容：', htmlContent); } } }; </script> ``` 通过 `web-view` 可以实现跨平台一致的富文本体验，但需要注意网络请求和安全性问题。 --- ### 3.4 结合引用中的 `this.$refs.editor.setEditorContent()` 方法根据提供的代码片段，可以通过封装一个自定义编辑器组件，并通过 `ref` 调用其方法来设置初始内容和导出 HTML。 ```html <template> <custom-rich-editor ref="editor" @export="handleExportHtml" /> </template> <script> export default { mounted() { const fixedHtmlContent = ` <p><strong>欢迎使用富文本编辑器！</strong></p> <ul> <li>列表项 1</li> <li>列表项 2</li> </ul> <p style="color: red;">这是一个红色的文本。</p> `; this.$refs.editor.setEditorContent(fixedHtmlContent); }, methods: { handleExportHtml(htmlContent) { console.log('导出的HTML内容：', htmlContent); } } }; </script> ``` 此方法允许开发者灵活控制编辑器行为，并与其他业务逻辑集成。 --- ###