wangEditor 富文本编辑器使用
wangEditor 富文本编辑器使用
框架: react hooks
链接: 官方文档参考
富文本编辑器组件
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { useState, useEffect } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { upload } from '@/services/myEditor';
import { message } from 'antd';/*** 富文本编辑器* @param props* @constructor*/
function MyEditor(props: any) {const { data, onChange } = props;/*** editor 实例*/const [editor, setEditor] = useState<IDomEditor | null>(null);/*** 编辑器内容*/const [html, setHtml] = useState('');/*** 初始化*/useEffect(() => {setHtml(data);}, []);/*** 工具栏配置*/const toolbarConfig: Partial<IToolbarConfig> = {};/*** 上传文件* @param file* @param insertFn*/const update = (file: any, insertFn: any) => {const imgData = new FormData();imgData.append('file', file);//调接口,上传图片upload(imgData).then((res) => {if (res.code == 0) {//接口调用成功,将上传文件插入到富文本中去insertFn(res.data.url, res.data.name);} else {message.error('上传失败');}});};/*** 编辑器配置*/const editorConfig: Partial<IEditorConfig> = {placeholder: '请输入内容...',// 菜单操作设置MENU_CONF: {uploadImage: {// 上传图片配置customUpload: update,server: '/web/v1/files', // 这里是接口},uploadVideo: {// 上传视频配置customUpload: update,server: '/web/v1/files', // 这里是接口},},};/*** 及时销毁 editor ,重要!*/useEffect(() => {return () => {if (editor == null) return;editor.destroy();setEditor(null);};}, [editor]);const handleChange = (el: any) => {if (onChange) onChange(el.getHtml());};return (<><div style={{ border: '1px solid #ccc', zIndex: 100 }}><Toolbareditor={editor}defaultConfig={toolbarConfig}mode="default"style={{ borderBottom: '1px solid #ccc' }}/><EditordefaultConfig={editorConfig}value={html}onCreated={setEditor}onChange={handleChange}mode="default"style={{ height: '300px', overflowY: 'hidden' }}/></div></>);
}export default MyEditor;
使用
<Form.Item{...formItemLayout}name="content"label="富文本内容"rules={[{ required: false, message: '请输入富文本内容' }]}initialValue={params?.content ? params?.content : ''}
><MyEditor data={params?.content ? params?.content : ''} />
</Form.Item>
wangEditor 富文本编辑器使用相关推荐
- wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
- 更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
- css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法
从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案 从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...
- 集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
- wangEditor富文本编辑器使用、编辑器内容转json格式
wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app.小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载 下载好之后 ...
- 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
- react html编辑器,wangEditor富文本编辑器+react+antd的使用
搜索热词 1.github上发现富文本编辑器: 2.结合react+antd的具体使用: 案例使用场景:MyModal为弹窗,弹窗显示 编辑名称及描述.描述使用wangeditor富文本编辑器实现. ...
- wangeditor富文本编辑器上传图片以及跨域问题解决
一.简介 wangeditor富文本编辑器是由js和css开发的富文本编辑器,轻量.简洁.高效 详细信息可以查看官网:http://www.wangeditor.com/ 二.上传图片 本章内容主要讲 ...
- 【wangEditor富文本编辑器】富文本三种使用方法,html使用富文本,html套vue脚手架使用富文本,vue使用富文本【简单易用,复制即用】
前言 富文本编辑器功能是很多人都要使用的 市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...
最新文章
- 现宣布Windows Azure中SQL数据同步的增强功能
- python手机版iphone-Python编程狮下载
- 数据结构(七)---循环队列的实现---java版
- android下关闭软键盘
- 计算机知识竞赛主持人开场词,护理竞赛主持人台词:主持人开场白台词
- mysql 副本 同步_副本机制与副本同步
- 学习nodejs+express+angular+socket.io ,投票demo
- 网络编程基础知识(待更新补充)
- 和县机电工程学校工业机器人_成都机电工程学校专业有哪些
- Linux 命令(97)—— info 命令
- 对step文件进行信息抽取算法
- 利用npm命令创建一个Vue项目并安装依赖
- 如何修改服务器ntp配置,[修改]Linux下NTP服务器的配置
- transformer通俗理解
- iOS-企业级开发者账号发布流程
- DevpTips【powerpoint】发现打不开,显示发现文件中的内容有问题。可尝试修复此演示文稿。
- 关于Web的欢迎页面的开发设置
- 服务器主板网卡接口Dedicate lan和share lan的区别
- python字典改键_python 字典修改键(key)的几种方法
- shuffle什么意思?python模拟随机发牌(斗地主、掼蛋)