uni-app editor 简单实用富文本

需求,简单的复制文字、有格式 ,能从别的地方复制文案过来,有格式化展示即可,要求高的可以去插件市场看看。

可以直接复制允许!!!! 前提是在项目里!!!

<template>

<view class="container">

<view class="editor-wrapper">

<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar

show-img-resize @ready="onEditorReady" @input="onEditorInput">

</editor>

</view>

</view>

</template>

<script>

export default {

data() {

return {

editorCtx: null,

isDataLoad: false, //仅初始化 加载时使用,例如编辑

}

},

onLoad() {

this.loadActivityDetail()

},

methods: {

onEditorReady() {

uni.createSelectorQuery().select('#editor').context((res) => {

console.log('===>', res)

this.editorCtx = res.context

// 初始化测试 假的

this.editorCtx.setContents({

html: 'zouni~~~'

})

}).exec()

},

onEditorInput(e) {

this.editorContext = e.detail.html

// console.log('编辑器内容发生变化:', e.detail.html);

},

// 初始化 走接口加载数据

setEditorContents() {

if (this.isDataLoad) {

this.editorCtx.setContents({

html: this.editorContext, //editorContext 后台返回的数据

success: res => {}

})

} else {

// isDataLoad false 就一直调用,因为我这边内容一定有,没有可以不用

setTimeout(() => {

this.setEditorContents()

}, 200)

}

},

async loadActivityDetail(activityId) {

await this.$u.api

.activityDetail(activityId)

.then((res) => {

this.editorContext = res.data.description

this.isDataLoad = true

// 调用更新 富文本内容 初始化

this.setEditorContents()

})

.catch((err) => {

console.log(err);

});

},

}

}

</script>

相关推荐
啊阿狸不会拉杆9 分钟前
《计算机网络-自顶向下方法》6.7 回顾:Web页面请求的历程 读书笔记
前端·计算机网络
云上工程笔记24 分钟前
四柱记账法和复式记账法有什么区别?复式记账为什么更适合查错和对账
大数据·前端·人工智能
恋猫de小郭25 分钟前
Dart Skills CLI 1.0 :AI 时代的 Dart 交付支持
android·前端·flutter
Hilaku25 分钟前
为什么技术极强的前端,往往当不好前端 Team Leader?
前端·javascript·程序员
Knight_AL31 分钟前
EasyExcel 导入模板踩坑:row.add(““)导致文本格式失效与单元格保护问题解决方案
java·前端·easyexcel
2501_9160074743 分钟前
使用Apple Dashboards显示和自定iOS应用性能指标与数据可视化指南
android·ios·小程序·https·uni-app·iphone·webview
Csvn1 小时前
模板字面量类型:用类型做字符串的正则
前端
倾颜1 小时前
AI Chat 长会话性能实践:消息虚拟化、动态高度与流式滚动设计
前端·react.js·node.js
幸运小圣1 小时前
SSE 与 WebSocket 新手入门:前端实时通信完全指南【JavaScript】
前端·javascript·websocket
艾伦野鸽ggg1 小时前
25级开学 JS 考核题解
前端·javascript