只需2步uniapp集成富文本编辑器wangEditor4

官网文档地址

首先安装 npm i wangeditor --save

使用 

<div id="div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>import E from 'wangeditor'onReady() {this.initEditor()
},/*** 初始化富文本编辑器*/
initEditor() {editor = new E('#div1')editor.config.zIndex = 0editor.config.onblur = newHtml => {this.formData.content = newHtml // 获取最新的 html 内容}editor.create()
},

效果

 上传本地图片

			initEditor() {editor = new E('#div1')editor.config.zIndex = 0editor.config.onblur = newHtml => {this.formData.content = newHtml // 获取最新的 html 内容}// 本地上传图片editor.config.customUploadImg = function(resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后,插入到编辑器的方法resultFiles.forEach(async file => {let filePath = URL.createObjectURL(file)let cloudPath = file.nameconst result = await uniCloud.uploadFile({filePath,cloudPath});// 上传图片,返回结果,将图片插入到编辑器中insertImgFn(result.fileID)})}editor.create()},

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tui-editor富文本编辑器组件

tui-editor富文本编辑器 记录项目中使用富文本编辑器 安装 npm init & npm install --save tui-editor创建组件文档 tuieditor 在 default-options.js中 // doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditorexport default {minH…

ueditor 百度富文本编辑器后端配置(上传图片)

在前端已经写好的情况下进行以下操作 1&#xff0c;在public/assets/addons/ueditor内新建 config.json并加入以下代码 {"imageActionName": "uploadimage","imageFieldName": "upfile","imageMaxSize": 2048000,"im…

百度富文本编辑器UEditor配置及功能实现详解

当前功能基于PHP&#xff0c;其它语言流程大抵相同。 大概流程&#xff1a; 1. 将docx文件上传到服务器中 2. 使用PHPoffice/PHPword实现将word转换为HTML 3. 将HTML代码返回并赋值到编辑器中 1 编辑器配置修改 1.1 新增上传word json配置 在ueditor\php\config.json中新…

开源版ai智能写作软件源码 一键写作生成器 含完整搭建教程

分享一个开源版ai智能写作软件系统的源码&#xff0c;含详细的搭建教程&#xff0c;可以一键生成原创高质量文章。 它是一款人工智能对话系统&#xff0c;它可以聊天&#xff0c;写文章&#xff0c;写论文&#xff0c;写代码&#xff0c;写小说&#xff0c;创意策划&#xff0c…

AI自动写文章生成器系统源码 一键生成高质量原创文案

分享一个AI自动写文章生成器系统源码&#xff0c;程序包含电脑端手机端详细的搭建教程&#xff0c;源码开源可二开。 功能介绍&#xff1a; 是一款人工智能对话系统&#xff0c;它可以聊天&#xff0c;写文章&#xff0c;写论文&#xff0c;写代码&#xff0c;写小说&#xff0…

简历中的“项目经验”该怎么写?

找工作&#xff0c;简历是最关键的一步&#xff0c;只有通过了简历筛查才能往下继续进行。 很多人写简历&#xff0c;都是在记录流水账&#xff0c;看来没有任何平淡寡味。其实简历的核心价值就在于游说 hr 和面试官&#xff1a;看我&#xff0c;看我&#xff0c;看我 —— 即&…

java程序员简历项目经验_程序员简历中的项目经验怎么写

程序员简历项目经验范文一 项目&#xff1a;河北省风电监控系统 时间&#xff1a;2014—2015 开发环境&#xff1a;windowseclipsetomcatoracle 框架&#xff1a;springspringmvchibernate 插件&#xff1a;jquery&#xff0c;raphael,highcharts,validate, 个人主要工作内容&a…

软件测试简历没有项目经验怎么写?

目录 前言&#xff1a; 1、项目名称: 家电购 2、项目名称: 瑞德商城 3、项目名称:随意读(APP) 前言&#xff1a; 之前很多小伙伴问我说自己是转行或者自学的想找工作但是没有工作经验&#xff0c;简历上面不知道怎写&#xff1f;今天就给大家带来几个可以直接写进简历的项目…

简历中的项目经历可以怎么写?

概述 工作这10多年来&#xff0c;也经常做招聘的工作&#xff0c;面试过的人超过50人次了&#xff0c;而看过的候选人的简历则有几百份了&#xff0c;但是清晰且能突出重点的简历&#xff0c;确实很少遇到。这里基本可以说明一个问题&#xff0c;很多候选人是不太清楚如何写出…

简历上面的项目经历怎么写?怎么写才能显得突出?

项目经历可不可以是课堂项目? 其实对很多同学来说,不是不会写项目经历,而是根本不知道什么是项目经历,哪些内容可以写在项目经历中。所以看到简历中的项目经历模块,感觉不知道怎么写?那么对于大学生来说,即使你大学四年中没有太多活动、竞赛、科研的经历,但是你一定上过…

程序员简历项目经验怎么写?

我是一个典型的互联网公司程序员&#xff0c;也见过无数的程序员简历&#xff0c;包括很多优秀的程序员简历&#xff0c;看了可以让人眼前一亮&#xff0c;优美简洁的简历模板&#xff0c;项目经验工作重点突出;也见过更多的写得不好的简历。程序员怎么写简历?程序员简历项目经…

【软件测试】简历中的项目经历可以怎么写?

工作这10多年来&#xff0c;也经常做招聘的工作&#xff0c;面试过的人超过50人次了&#xff0c;而看过的候选人的简历则有几百份了&#xff0c;但是清晰且能突出重点的简历&#xff0c;确实很少遇到。这里基本可以说明一个问题&#xff0c;很多候选人是不太清楚如何写出一份好…

简历中“项目经历“该如何写?

前言 找工作&#xff0c;简历是最关键的一步&#xff0c;只有通过了简历筛查才能往下继续进行。 很多人写简历&#xff0c;都是在记录流水账&#xff0c;看来没有任何平淡寡味。其实简历的核心价值就在于游说 hr 和面试官&#xff1a;「看我&#xff0c;看我&#xff0c;看我」…

【DeepL Write】AI润色

DeepL Write 是著名的机器翻译工具 DeepL 最新发布的新功能&#xff0c;通过「检查语法及标点错误&#xff0c;重新表述句子&#xff0c;运用精确措辞&#xff0c;并为你的文本选择最恰当的语气。」&#xff0c;目前支持英文、德语。 使用 DeepL Write 完善你的写作 这是一款通…

云上使用 Stable Diffusion ,模型数据如何共享和存储

随着人工智能技术的爆发&#xff0c;内容生成式人工智能&#xff08;AIGC&#xff09;成为了当下热门领域。除了 ChatGPT 之外&#xff0c;文本生成图像技术更令人惊艳。 Stable Diffusion&#xff0c;是一款开源的深度学习模型。与 Midjourney 提供的直接将文本转化为图像的服…

初探 Cloudflare 零信任 - 通过 Docker 部署 Bitwarden 密码管理器

❝ 本文转自 Dejavu Moe 的博客&#xff0c;原文&#xff1a;https://www.dejavu.moe/posts/selfhosted-bitwarden-with-cloudflare-tunnel/&#xff0c;版权归原作者所有。欢迎投稿&#xff0c;投稿请添加微信好友&#xff1a;cloud-native-yang 前言 两年前&#xff0c;我就想…

Nopepad++使用教程

Contents 1 介绍2 下载&安装3 Notepad配置&#xff08;Python&#xff09; 3.1 配置制表符3.2 自动完成3.3 配置调试工具4 添加辅助插件5 PythonScript&#xff08;控制台插件&#xff09; 5.1 日常使用5.2 多视图模式5.3 显示符号5.4 快捷键大全6 参考链接 介绍 Notepa…

将 Quicker 搜索功能打造成专属于你的 Windows 启动器

在 macOS 平台上&#xff0c;有许多优秀的启动器&#xff0c;如老牌双雄 Alfred、Launchbar 和新秀 Raycast。反观 Windows 平台&#xff0c;则有 uTools、Listary、Wox 等应用&#xff0c;它们在基础功能上表现不错&#xff0c;但受限于应用生态&#xff0c;可拓展性都较弱。Q…

文心一言 VS 讯飞星火 VS chatgpt (28)-- 算法导论5.1 3题

三、假设你希望以1/2的概率输出0与 1。你可以自由使用一个输出0或1的过程 BIASED-RANDOM。它以某概率 p 输出1&#xff0c;概率 1-p 输出0&#xff0c;其中 0<p<1 &#xff0c;但是 p 的值未知。请给出一个利用 BIASED-RANDOM 作为子程序的算法&#xff0c;返回一个无偏的…

学成在线案例——黑马程序员pink老师\思路讲解\完整源代码

本文为跟随B站黑马程序员pink老师学习CSS时所写&#xff0c;文章讲解了学成在线首页的制作思路&#xff0c;并贴出了源代码&#xff0c;作为学习笔记分享给大家 如有错误&#xff0c;欢迎指出。如有侵权&#xff0c;联系删除 文章目录 1. 案例准备工作2. CSS属性书写顺序3. 页面…