首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在react草稿中设置初始编辑器状态所见即所得

在React草稿中设置初始编辑器状态所见即所得,可以通过使用第三方库来实现。一个常用的库是react-draft-wysiwyg,它提供了一个富文本编辑器组件,可以实现所见即所得的编辑器状态。

首先,需要安装react-draft-wysiwyg库。可以使用npm或者yarn进行安装:

代码语言:txt
复制
npm install react-draft-wysiwyg

或者

代码语言:txt
复制
yarn add react-draft-wysiwyg

安装完成后,可以在React组件中引入并使用Editor组件。以下是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const MyEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const onEditorStateChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  const handleSave = () => {
    const content = convertToRaw(editorState.getCurrentContent());
    // 在这里处理保存逻辑
    console.log(content);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        onEditorStateChange={onEditorStateChange}
      />
      <button onClick={handleSave}>保存</button>
    </div>
  );
};

export default MyEditor;

在上述代码中,我们首先导入所需的库和样式文件。然后,使用useState钩子来创建一个名为editorState的状态变量,并使用EditorState.createEmpty()来设置初始编辑器状态为空。

接下来,我们定义了一个onEditorStateChange函数,用于更新编辑器状态。在Editor组件中,我们将editorState作为editorState属性传递给组件,并将onEditorStateChange函数作为onEditorStateChange属性传递给组件。

最后,我们在组件中添加了一个保存按钮,并在点击按钮时调用handleSave函数。在handleSave函数中,我们使用convertToRaw函数将编辑器内容转换为原始的Draft.js数据格式,并在控制台中打印出来。你可以在这里处理保存逻辑,例如将内容发送到服务器进行保存。

这样,你就可以在React草稿中设置初始编辑器状态所见即所得了。请注意,这只是一个简单的示例,你可以根据自己的需求进行定制和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

这个 hook api,曾吓退许多前端开发者

正是由于他臭名昭著,以致于在 react hooks 出来之后,大家都在积极探索如何在项目中寻找替代 redux 的状态管理方案。最后他才开始逐渐淡化。...但是作为开发者,要如何基于 React 实现这个功能呢? 这里的关键就在于,我们要回溯之前的状态,因此一个常规的思路就是,我在内存,把每一次操作之后,对应的状态以快照的形式存起来。...initialArg 表示状态初始值 init 是一个需要返回初始状态初始化函数。...: 'increment', age: 1 } 通常我们会在更复杂的操作场景,将 action.type 设置为 increment/age,更贴近语义 我们要根据 state 与 action...一个是新增一项更改列表,因此我们设计 action 为 { type: 'changed_draft', nextDraft: e.target.value } // 内容从草稿状态获取即可

17410
  • 任由文字肆意流淌,更自由的开源 Markdown 编辑器

    Markdown 作为程序员写作的心头爱,有很多优点: 通过语法实现排版,不需要点选手动设置样式 快速实现复杂内容,:代码块、超链接、公式等 让创作者有更多时间专注于内容 但,同样的也有些缺点: 有一定的学习门槛...如果想在自己的项目实现类似的 Markdown 编辑器,就需要另寻方案了。 如果你正在寻找功能强大、易于接入、所见即所得的 Markdown 编辑器、组件、插件,就请花 5 分钟读完本文!...Milkdown 一款高颜值+自由(插件)的所见即所得,集合 Markdown 编辑器、组件、插件于一身的开源项目。...三、架构 Prosemirror 的核心逻辑其实类似于 React,它通过一种函数式的数据映射来体现编辑器的 UI 和内部状态的关系,如图: 编辑器通过 EditorState 来保存当前状态,并由...Prosemirror 通过这样的方式将编辑器的每个状态以 EditorState 的方式保存了下来,它是一颗树状结构。

    70220

    再见 Typora!这款 Markdown 神器绝了!

    Markdown 作为程序员写作的心头爱,有很多优点: 通过语法实现排版,不需要点选手动设置样式 快速实现复杂内容,:代码块、超链接、公式等 让创作者有更多时间专注于内容 但,同样的也有些缺点: 有一定的学习门槛...如果你正在寻找功能强大、易于接入、所见即所得的 Markdown 编辑器、组件、插件,就请花 5 分钟读完本文! 接下来带来的开源项目完全满足上述需求。...Milkdown 一款高颜值+自由(插件)的所见即所得,集合 Markdown 编辑器、组件、插件于一身的开源项目。...3 架构 Prosemirror 的核心逻辑其实类似于 React,它通过一种函数式的数据映射来体现编辑器的 UI 和内部状态的关系,如图: 编辑器通过 EditorState 来保存当前状态,并由...Prosemirror 通过这样的方式将编辑器的每个状态以 EditorState 的方式保存了下来,它是一颗树状结构。

    41640

    再见 Typora!这款 Markdown 神器绝了!

    Markdown 作为程序员写作的心头爱,有很多优点: 通过语法实现排版,不需要点选手动设置样式 快速实现复杂内容,:代码块、超链接、公式等 让创作者有更多时间专注于内容 但,同样的也有些缺点: 有一定的学习门槛...如果想在自己的项目实现类似的 Markdown 编辑器,就需要另寻方案了。 如果你正在寻找功能强大、易于接入、所见即所得的 Markdown 编辑器、组件、插件,就请花 5 分钟读完本文!...Milkdown 一款高颜值+自由(插件)的所见即所得,集合 Markdown 编辑器、组件、插件于一身的开源项目。...三、架构 Prosemirror 的核心逻辑其实类似于 React,它通过一种函数式的数据映射来体现编辑器的 UI 和内部状态的关系,如图: 编辑器通过 EditorState 来保存当前状态,并由...Prosemirror 通过这样的方式将编辑器的每个状态以 EditorState 的方式保存了下来,它是一颗树状结构。

    3.1K30

    前端:开源免费的浏览器端Markdown编辑器——Vditor上手体验

    一、编辑器简介Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。...它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。提供桌面版。支持Windows、Linux、MacOS、浏览器扩展、安卓、IOS版本。...话题等自动补全扩展● 可使用拖拽、剪切板粘贴上传,显示实时上传进度,支持 CORS 跨域上传● 实时保存内容,防止意外丢失● 录音支持,用户可直接发布语音● 粘贴 HTML 自动转换为 Markdown,粘贴包含外链图片可通过指定接口上传到服务器...● 支持主窗口大小拖拽、字符计数● 多主题支持,内置黑白绿三套主题● 多语言支持,内置、英、韩文本地化● 支持主流浏览器,对移动端友好三、编辑器模式初始化设定2.1 所见即所得模式即所得模式对不熟悉...)\n所见即所得模式对不熟悉 Markdown 的用户较为友好,熟悉 Markdown 的话也可以无缝使用。

    64630

    开源公告|腾讯tmagic-editor页面可视化编辑器对外开源

    项目简介 腾讯tmagic-editor是一个所见即所得的页面可视化编辑器,基于tmagic-editor可以快速搭建可视化页面生产平台,让非技术人员可以通过拖拽和配置,自助生成H5页面、PC页面、...业务组件可以用不同的前端框架实现,vue2、vue3、react。 二、编排,这里指通过对组件的拖拽和配置,完成页面编辑,主要由非技术人员完成。...可视化页面需要在tmagic-editor编辑器搭建、渲染,通过模拟器所见即所得。搭建完成后,保存配置并发布,然后渲染成用户访问的真实页面。...其中涉及到两个不同的 runtime:编辑器的模拟器,终端打开真实页面。...由于tmagic-editor在编辑器的模拟器是通过 iframe 渲染的,和tmagic-editor平台本身可以做到框架解耦,所以 runtime 也可以用不同框架开发。

    22K40

    腾讯可视化, 低代码生成器,正式开源!

    腾讯tmagic-editor是一个所见即所得的页面可视化编辑器,实现零代码/低代码生成页面,可以快速搭建可视化页面生产平台,让非技术人员可以通过拖拽和配置,自助生成H5页面、PC页面、TV页面,大大降低页面生产成本...业务组件可以用不同的前端框架实现,vue2、vue3、react。 二、编排 这里指通过对组件的拖拽和配置,完成页面编辑,主要由非技术人员完成。...可视化页面需要在tmagic-editor编辑器搭建、渲染,通过模拟器所见即所得。搭建完成后,保存配置并发布,然后渲染成用户访问的真实页面。...其中涉及到两个不同的 runtime:编辑器的模拟器,终端打开真实页面。...由于tmagic-editor在编辑器的模拟器是通过 iframe 渲染的,和tmagic-editor平台本身可以做到框架解耦,所以 runtime 也可以用不同框架开发。

    1.4K40

    腾讯低代码神器开源!拖拽开发,爽的飞起~

    腾讯tmagic-editor是一个所见即所得的页面可视化编辑器,实现零代码/低代码生成页面,可以快速搭建可视化页面生产平台,让非技术人员可以通过拖拽和配置,自助生成H5页面、PC页面、TV页面,大大降低页面生产成本...业务组件可以用不同的前端框架实现,vue2、vue3、react。 编排 这里指通过对组件的拖拽和配置,完成页面编辑,主要由非技术人员完成。...可视化页面需要在tmagic-editor编辑器搭建、渲染,通过模拟器所见即所得。 搭建完成后,保存配置并发布,然后渲染成用户访问的真实页面。...其中涉及到两个不同的 runtime:编辑器的模拟器,终端打开真实页面。...由于tmagic-editor在编辑器的模拟器是通过 iframe 渲染的,和tmagic-editor平台本身可以做到框架解耦,所以 runtime 也可以用不同框架开发。

    1.4K20

    React项目前端开发总结

    5. webpack + react-router 按需加载 首先在webpack配置,主要需要配置 chunkFilename 这个属性,其它的顺便提一下 ?...Redux状态管理 在大型项目中,react的组件嵌套及跨级是非常频繁的,而react的数据本身是单向数据流,这样组件之间传递数据非常麻烦,Redux最主要是用作应用状态的管理,用于实现多级组件之前的数据共享...编辑器UEditor的使用 首先,引入编辑器文件 ? 然后,在componentDidMount生命周期里初始编辑器 ?...本项目中常用的编辑器指令如下: (1). 清空内容 ? (2). 插入内容 ? (3). 获取编辑器的内容 ? (4). 设置编辑器的内容 ? (5). 设置编辑器不可编辑 ? (6)....设置编辑器可以编辑 ?

    1.5K20

    这个牛逼的国产低代码生成器!现在开源了

    腾讯tmagic-editor是一个所见即所得的页面可视化编辑器,实现零代码/低代码生成页面,可以快速搭建可视化页面生产平台,让非技术人员可以通过拖拽和配置,自助生成H5页面、PC页面、TV页面,大大降低页面生产成本...业务组件可以用不同的前端框架实现,vue2、vue3、react。 二、编排 这里指通过对组件的拖拽和配置,完成页面编辑,主要由非技术人员完成。...可视化页面需要在tmagic-editor编辑器搭建、渲染,通过模拟器所见即所得。 搭建完成后,保存配置并发布,然后渲染成用户访问的真实页面。...其中涉及到两个不同的 runtime:编辑器的模拟器,终端打开真实页面。...由于tmagic-editor在编辑器的模拟器是通过 iframe 渲染的,和tmagic-editor平台本身可以做到框架解耦,所以 runtime 也可以用不同框架开发。

    1.4K30

    干货 | 高效联动,携程机票IVR可视化的探索和实践

    在系统设计过程面临以下几个难点:如何通过配置调整修改业务流程、如何在配置处理接口调用、如何优雅的动态话术模板配置。...平台通过以下功能实现IVR可视化流程树配置: 数据定义:将IVR流程需要用到的数据(逻辑判断、话术播报场景)进行数据定义,为后续操作做准备。...(4)脚本编辑及调试 脚本编辑使用Monaco Editor编辑器,支持智能提示,并且我们对智能提示进行扩展,使编辑器支持自定义的方法和对象,更加人性化,操作更方便。...基于react-quill富文本组件友好的展示话术模板,并且支持自定义时间格式。 (7)服务端执行流程 服务端执行分为两部分:配置初始化、IVR自助服务接口。 在服务启动时,首先需要对配置初始化。...首先所有的流程修改都是在草稿版本编辑,当草稿版本申请发布时可以进行版本对比以及仿真测试,如果测试通过后可以生成预发布版本。

    45930

    前端 DDD 框架 Remesh 的浅析

    可是我们仔细想想,这种方式其实违背了面向对象的本质,将一个对象的状态和行为强行拆分,变成了面向过程开发,Service 的逻辑随着业务复杂度提升,变得失控。...DDD 示例 通常一个商品有以下几种场景:创建、编辑、上架、审核、撤回,其对应的状态有,草稿、审核、已上架,如果我们用传统的逻辑去写,往往是以下代码: class Goods { private...isDraft: boolean; // 是否草稿 private isAuditing: boolean; // 是否审核状态 private isPublished: boolean; //...是否已上架 private info: any; // 商品信息 // 状态初始化 constructor(info: any) { this.isDraft = true;...,初始草稿状态 const GoodsState = domain.state({ name: 'GoodsDomain', default: { type

    70910

    开源公告 | CherryMarkdown-更友好的编辑器前端组件

    CherryMarkdown是一款使用者和开发者友好的Markdown编辑器前端组件,具有开箱即用、易于扩展、语法和功能丰富等特点,致力于帮助使用者和开发者降低编辑、开发成本,快速聚焦到编辑和创作。...易于扩展 由原生ES6实现,开发者可以快速进行二次开发和功能扩展;可以方便地使用vue/react等主流框架进行二次封装。 3....图片语法&所见即所得编辑 CherryMarkdown支持通过语法指定图片的大小和位置等属性,且允许在预览区进行所见即所得的编辑交互。 2. ...多光标编辑 CherryMarkdown支持和主流代码编辑器体验类似的多光标批量编辑功能。 5. ...持续优化所见即所得编辑模式,增加插入思维导图能力,优化移动端适配; 3. 增加快捷键等快捷操作指令,增加第三方插件包(插入vscode),增加本地应用安装包。

    1.5K40

    不到200行 JavaScript 代码如何实现富文本编辑器

    ,然后发现了这个名为 Pell 的项目,它是一个所见即所得(WYSIWYG)的文本编辑器,虽然它的功能很简单,但是令人吃惊的是它只有 1kb 大小。...bold,italic,underline 的三个对象属性,对应于工具栏前方的加粗、斜体、下划线按钮,可以看出它们的结构是相同的,都有下列三个属性: icon: 如何在工具栏显示 title: 就是...init() 初始化函数 想使用 pell 编辑器时,只要调用 init() 函数来初始化一个编辑器即可。...它接收一个 setting 对象作为参数,其中包含这样的一些属性: element: 编辑器的 DOM 元素 styleWithCSS: 设置为 true 时,将会用 代替 actions onChange...actions参数 和 pell.js 定义的 actions对象组合起来,可以将 actions 对象当作一个默认设置,看以下代码: actions:[ 'bold', 'underline',

    1.6K70

    2018年1月份最热门的JavaScript开源项目

    一、编辑器tui.editor https://github.com/nhnent/tui.editor Star 5033 tui.editor(TOAST UI Editor)是一款所见即所得的Markdown...编辑器。...它会将你在 Webpack 构建开发和生产过程的所有相关信息都放到浏览器。 JARVIS 非常漂亮,可显示导入的 ES Harmony 模块的数量,以及资产在 12 种不同的连接类型的表现。...在浏览器手动完成的大多数事情都可以通过使用 Puppeteer 完成,生成屏幕截图和 PDF 页面、检索 SPA 并生成预渲染内容(即“SSR”)、从网站上爬取内容等 九、静态网站建站工具 Docusaurus...自定义标签是无状态的,易于调试。 ● Batteries-included:开箱即用,HyperApp 具有类 Elm 的状态管理和虚拟 DOM 引擎;但它仍然只有 1kb 的大小,没有依赖关系。

    2.1K80

    15 个有意思的 JavaScript 和 CSS 库推荐! 你用过几个?

    你所需要做的就是将你的代码粘贴到编辑器,或直接自己编写代码。你可以通过更改字体样式、编辑器主题、语法高亮和甚至窗口按钮来自定义图像的外观。 Аxios ?...它向你展示了你的资源在12种不同的连接类型的表现如何,你项目中所有包的大小,并拥有一个漂亮的错误输出。它仍处于beta版本,预计会增加许多新功能。 Toast UI编辑器 ?...这是一个markdown和WYSIWYG编辑器,允许你在编码时轻松地在markdown和所见即所得模式之间切换。...该编辑器还支持强大的扩展,颜色选择器、图表代码块、UML代码块等。 Micron.js ? Micron是一个允许你为DOM元素添加不同的CSS增强动画的库。...Rekit是一款可帮助你使用React、Redux和React-router创建出色的响应式Web应用程序的工具包。

    1.9K00
    领券