React富文本编辑框react-draft-wysiwyg使用

最新推荐文章于 2024-08-10 07:34:26 发布
最新推荐文章于 2024-08-10 07:34:26 发布
阅读量666 收藏
点赞数
分类专栏： 插件 文章标签： html css javascript reactjs 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36550828/article/details/103861742
版权

使用的库
react-draft-wysiwyg
（还要引入’react-draft-wysiwyg/dist/react-draft-wysiwyg.css’）
html-to-draftjs
draftjs-to-html
（坑：用了draft-js将html转为draftjs结果样式没有转换过来，这两个库应该是匹配的）
在这里插入图片描述
代码参考https://blog.csdn.net/qq_40524880/article/details/85272926
（这篇文章里上传的图片是有压缩过的，改成了不压缩直接上传）

POWER!
关注
专栏目录
react-draft-wysiwyg：在ReactJS和DraftJS之上构建的Wysiwyg编辑器。 https：jpuri.github.ioreact-draft-wysiwyg
02-03
使用ReactJS和DraftJS库构建的Wysiwyg编辑器。 。 产品特点 可配置的工具栏，带有添加/删除控件的选项。 用于更改工具栏中控件顺序的选项。 用于向工具栏添加自定义控件的选项。 用于更改工具栏中的样式和图标的...
基于 React-draft-wysiwyg 实现的 react 富文本编辑器组件 开箱即用
aiyuanqin9624的博客
05-26 798
工作中遇到了一个需要做图文详情 的富文本编辑的需求， 于是基于React-draft-wysiwyg 实现了一个 纯组件， 目前支持 常规文本输入 外部链接图片 以及本地上传图片， 由于是纯组件， 可直接放在react 项目中引入使用 具体项目中使用十分方便， 一行代码搞定, <EditorVan editorState={this.state.editorStat...
react-draft-wysiwyg 富文本编译器（超全面实用--附带上传图片）
总该长大了的博客
01-21 4897
最近由于项目需要，需要用到富文本编译器，我也是找了好多样富文本，最终不是因为不满足需要，或者是使用复杂、麻烦就给舍弃了，因为我本身用的是ant+react 框架，最终我使用了react-draft-wysiwyg，今天给大家分享一下我的用这个组件的心路历程，哈哈！（附上上传图片相关~） 安装插件或依赖 安装的时间会很长，耐心等待就可以啦！ npm install react-draft-wysiw...
React Draft Wysiwyg 教程
最新发布
gitblog_00778的博客
08-10 335
React Draft Wysiwyg 教程 react-draft-wysiwygA Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg项目地址:https://gitcode.com/gh_mirrors/re/react-draft-wysiwyg 本...
react-draft-wysiwyg 清除复制粘贴的内容携带的样式
weixin_52014110的博客
08-17 348
处理react-draft-wysiwyg粘贴内容携带样式的问题，只用添加一个粘贴事件即可。
vue2 使用tinymce编辑器实现上传图片及粘贴word文本保留格式并粘贴图片自动上传
weixin_52041354的博客
09-17 979
然后在node_modules中找到tinymce把整个文件复制下来粘到public中。根据自己需求进行注释或添加功能。
draft-editor实现粘贴上传图片
web_cgh的博客
08-30 2628
1、braft-editor中实现粘贴实现路径上传，需要编辑媒体的功能的上传，就行了。 myUploadFn = (param) => { console.log(param); const serverURL = `${config.baseUrl}api/AdminSite/Article/UploadImage`; //上传的路径 ...
react 富文本编辑器
coderYYA的博客
02-22 2333
yarn add react-draft-wysiwyg draft-js draftjs-to-html html-to-draftjs import { Component } from 'react' import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css' import { EditorState, convertToRaw, ContentState } from 'draft-js' import { Editor } from ..
braft-editor：美观易用的React富文本编辑器，基于draft-js开发
02-05
Braft编辑器-ZH 多亏了Google翻译一个基于draft-js的网络富文本编辑器，适用于React框架，与主流的现代浏览器兼容。请注意，该项目的当前版本是2.x。 如果您使用的是1.xx版本，请参阅[旧版本文档]（ .md）使用前请先...
React-使用ReactJS和DraftJS库构建的Wysiwyg编辑器
08-14
React作为Facebook推出的一款强大的JavaScript库，用于构建用户界面，而DraftJS则是Facebook专为React设计的富文本编辑器框架。通过结合这两者，我们可以创建出功能丰富的Markdown编辑器。 首先，我们需要理解React...
wysiwyg-editor-react:用于ReactJS的WYSIWYG编辑器.13+
05-08
该组件允许用户使用常见的样式技术（例如，粗体，斜体，下划线等）输入文本和样式文本。 您可以查看example文件夹，以了解如何实现此编辑器。 安装 $ npm install wysiwyg-editor-react 包括 var Editor = require...
一个基于ReactJS和DraftJS的Wysiwyg编辑器。 https://jpuri.github.io/react-draft-wysiwyg-React开发
05-27
React Draft Wysiwyg使用ReactJS和DraftJS库构建的Wysiwyg编辑器。 演示页。 特点可配置的工具栏，带有添加/删除控件的选项。 在React React Wysiwyg中更改控件顺序的选项。使用ReactJS和DraftJS库构建的Wysiwyg编辑...
react-draft-wysiwyg富文本编辑器
瓜皮伦的博客
07-23 1077
GitHub上有相应的问题提出,但是好像还没具体的解决方案:https://github.com/facebookarchive/draft-js/issues/1943。有一个小问题,在频繁输入(数字或者字母等)的时候会报错。
react-draft-wysiwyg富文本编辑器使用常见问题解答
ZhaoYulin6的博客
06-04 541
未直接插入富文本编辑器的问题解决。记录一些常见的问题以及使用。
react-draft-wysiwyg的使用
qq_44539570的博客
08-07 847
react-draft-wysiwyg
推荐开源项目：React Draft WYSIWYG
gitblog_00086的博客
05-11 298
推荐开源项目：React Draft WYSIWYG react-draft-wysiwygA Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg项目地址:https://gitcode.com/gh_mirrors/re/react-draft-wysiw...
react 富文本编辑器 react-draft-wysiwyg 的使用总结
热门推荐
让优秀成为一种习惯
09-19 1万+
1.摘要 本博客主要总结 react 富文本编辑器 react-draft-wysiwyg 的使用，包括相关依赖、保存方式以及回显方式。 2.效果图 3.安装相关依赖 npm install react-draft-wysiwyg npm install draft-js npm install draftjs-to-html npm install html-to-draftjs 4.引...
react中使用富文本框
孜然卷的博客
08-01 1511
react中使用富文本框。
react-draft-wysiwyg添加自定义工具栏
05-31
要在 `react-draft-wysiwyg` 中添加自定义工具栏，你需要使用 `CustomOption` 组件。 首先，你需要定义一个 `CustomOption` 组件来渲染自定义工具栏，例如： ```jsx import React from 'react'; import PropTypes from 'prop-types'; const CustomOption = ({ onChange, editorState }) => ( <div onClick={() => onChange(RichUtils.toggleInlineStyle(editorState, 'CUSTOM_STYLE'))}> Custom Option </div> ); CustomOption.propTypes = { onChange: PropTypes.func.isRequired, editorState: PropTypes.object.isRequired, }; export default CustomOption; ``` 然后，在 `Editor` 组件中，你需要将 `CustomOption` 组件添加到 `toolbar` 中，例如： ```jsx import React, { useState } from 'react'; import { Editor, EditorState, RichUtils } from 'draft-js'; import { EditorToolbar } from 'react-draft-wysiwyg'; import CustomOption from './CustomOption'; const MyEditor = () => { const [editorState, setEditorState] = useState(EditorState.createEmpty()); const handleToolbarChange = (editorState) => { setEditorState(editorState); }; return ( <div> <EditorToolbar> <CustomOption onChange={handleToolbarChange} editorState={editorState} /> </EditorToolbar> <Editor editorState={editorState} onChange={setEditorState} /> </div> ); }; export default MyEditor; ``` 这样，你就可以在 `react-draft-wysiwyg` 的工具栏中添加自定义工具栏了！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值