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

如何将html推送到react- draft -wysiwyg和draft js中?

将HTML推送到React-Draft-Wysiwyg和Draft.js中,可以通过以下步骤实现:

  1. 首先,确保你已经安装了React-Draft-Wysiwyg和Draft.js的相关依赖包。
  2. 创建一个React组件,用于包裹React-Draft-Wysiwyg编辑器和Draft.js的编辑器状态管理。
  3. 在组件的state中定义一个变量,用于保存HTML内容。
  4. 在组件的render方法中,将React-Draft-Wysiwyg编辑器和Draft.js的编辑器状态管理组件进行配置和渲染。
  5. 在React-Draft-Wysiwyg编辑器的onEditorStateChange事件中,获取到编辑器的内容,并将其转换为HTML格式。
  6. 将转换后的HTML内容保存到组件的state中。
  7. 在组件的render方法中,将保存的HTML内容渲染到页面上。

下面是一个示例代码:

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

class HtmlToDraft extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      htmlContent: '',
    };
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });

    const contentState = editorState.getCurrentContent();
    const htmlContent = convertToHTML(contentState); // 将Draft.js内容转换为HTML
    this.setState({
      htmlContent,
    });
  };

  render() {
    const { editorState, htmlContent } = this.state;

    return (
      <div>
        <Editor
          editorState={editorState}
          onEditorStateChange={this.onEditorStateChange}
        />
        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
      </div>
    );
  }
}

export default HtmlToDraft;

在上述示例中,我们使用了react-draft-wysiwyg库提供的Editor组件来创建富文本编辑器,并使用Draft.js的EditorState来管理编辑器的状态。在onEditorStateChange事件中,我们将Draft.js的内容转换为HTML格式,并将其保存到组件的state中。最后,我们使用dangerouslySetInnerHTML属性将HTML内容渲染到页面上。

这样,你就可以将HTML推送到React-Draft-Wysiwyg和Draft.js中了。

请注意,上述示例中的convertToHTML方法是一个自定义方法,用于将Draft.js的内容转换为HTML格式。你可以使用第三方库如draft-js-export-html来实现这个功能。

希望这个答案能够满足你的需求,如果有任何问题,请随时提问。

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

相关·内容

初探富文本之编辑器引擎

,也有基于这些引擎二次开发的例如Plate.js,本文主要介绍了Slate.js、Quill.jsDraft.js三款编辑器引擎。...,几乎所有你在DOM可以做到的事情,都可以在slate做到。...跨平台,quill有着比较良好的兼容性,在旧版本的浏览器也可以相同的方式运行,在用户体验上不同浏览器也可以有着相同的视图与交互效果,并且可以在桌面移动设备上使用。...Draft.js draft是用于在React构建富文本编辑器的框架,其为创建和自定义文本编辑器提供了强大的API,并且旨在易于扩展与其他库集成,与React结合可以使开发者在进行编辑器开发时既不用操作...声明式富文本,draft无缝融入React,使用React用户熟悉的声明式的API抽象出渲染、选择输入行为的细节。

1.9K51
  • (译)几个 DockerKubernetes 构建-推送-部署流程工具

    Draft、Gitkube Skaffold 减轻了开发人员的负担,在构建应用的过程,能够更快的在 Kubernetes 上运行起来。...所以用户自身的用例如何进行选择? 正文 Draft 在任何 Kubernetes 集群上简化应用的开发部署。 顾名思义,Draft 让面向 Kubernetes 的应用开发变得简单。...他内部使用 Helm 来进行变更,因此他 Helm 的集成是非常紧密的。 架构 ? 如上图所示,Draft 客户端是一个关键组件。它感知代码的变化,然后从 Repo 获取对应的 Pack。...使用 draft create 处理目录之后,会在目录添加 Dockerfile、Helm chart 以及 draft.toml 文件,draft up 能够构建 Docker 镜像,推送到私库,然后使用...Skaffold 会在本地构建 Docker 镜像,推送到私库,然后使用 skaffold 客户端进行部署。他还会监测目录,如此一来,目录的代码一旦发生变化,就会触发重新构建和部署。

    1.4K30

    如果你想要,React 也能实现

    我前面有跟大家分享过 React 的一大优势就是他对 JS 的弱侵入性。...我认识的一位腾讯大佬,就干了这么一件事情,把最细粒度响应式更新,带到了 React 的生态来,它就是 helux,它已经在腾讯内部经历过真实的商业项目实践。 现在我们就来介绍一下这个状态管理框架。...注意架构里的红色区域里是 react-like,强调 helux 整体架构并非与 react 强绑定,只要满足提供了图示几个 api 的类 react 库,core 就可以秒适配并导出所有功能。...综合上面的架构图,不难看出,helux 相比现阶段开源社区较出名的状态管理库(redux,recoil,jotai,zustand,mobx等)的优势较为显著: 内置依赖追踪特性,基于最快的不可变 js...100% ts 编码,类型安全 2、落地场景 腾讯新闻 web 腾讯新闻web是一个迭代了很多年的老项目,在 7 年前就引入了 react 技术栈,采用了 csr + ssr 混合渲染架构,在实际开发过程

    33310

    Make

    原文:https://seankross.com/the-unix-workbench/working-with-unix.html#make 从前没有网页浏览器、文件浏览器、开始菜单或搜索栏。...这是通过指定一个名为makefile的文件来实现的,该文件描述了不同文件程序之间的关系 。除了安装程序之外,make对于自动创建文档也很有用。...在这个简单的示例,我们创建了以draft_journal_entry.txt为目标的文件,该文件是作为命令的结果创建的。需要注意的是,目标下的任何命令都必须用Tab缩进。...通过这种方式,对依赖项的更改被合并到目标。为了避免不必要地运行命令,这些命令只在依赖项改变时运行,或者当目标根本不存在时运行。 让我们更新makefile,以包含自动生成的readme.txt。...通过添加all目标,我们可以在不带任何参数的情况下运行make来构建makefile的所有目标。

    1.6K30

    Windows环境下搭建一个Hexo博客

    builtin: 是否将生成页面的功能嵌入hexo shexo g,默认是false,另一可选项为true(1.x.x版本新增配置项)。...写草稿 draft是草稿的意思,也就是你如果想写文章,又不希望被看到,那么可以 $ hexo new draft newdraft 这样会在source/_draft中新建一个newdraft.md文件...,如果你的草稿文件写的过程,想要预览一下,那么可以使用 $ hexo server --draft 在本地端口中开启服务预览。...如果你的草稿文件写完了,想要发表到post, $ hexo publish draft newdraft 就会自动把newdraft.md发送到post。...文件,如果你的草稿文件在写的过程,想要预览一下,那么可以使用 $ hexo server --draft 如果你的草稿文件写完了,想要发表到post, $ hexo publish draft "Article

    1.8K10

    一杯茶的时间,上手 Gatsby 搭建个人博客

    但这么做还是略嫌不便,通过 CMS 一般可以在一个可视化的在线环境编辑文章,然后一键即可发布。 Gatsby 主流的两个 CMS 是 Contentful Netlify CMS。...Netlify CMS 借助 Oauth 把写好的 Markdown 文件推送到项目源码的仓库上,再配合 Netlify 检测仓库变动自动构建发布。当然后者也不是必须的,可以换其它方式自动构建。...这里我们把自定义的路径存到 fields.slug 。 通过 /gatsby-node.js 的 exports.onCreateNode 钩子我们可以在生成节点的时候进行拦截处理。...下节我会继续谈谈其它个性化的配置,如草稿模式显示上下篇博文。 草稿模式 草稿模式即可以将文章保存为草稿而不被渲染出来。...方式是在 front matters 设置一个 draft 布尔域,以此域作为渲染参考。

    3.2K20

    在线文档技术揭秘开篇 - 富文本编辑器

    例如早期的技术产品 WYSIWYG Editor。 请输入正文 <!...PromiseMirror),Confluence WIKI以及SAAS 产品内集成的知识库(Teambition Thoughts、Pingcode 等等);技术产品包括CKEditor、TinyMCE、Draft.js...、 Slate、Quil.js 、ACE 等等,通常我们对 L1 编辑器从布局实现方式还区分为【传统模式】【MVC模式】 传统模式 DOM 树等于数据,使用 DOM API 直接操作(CKEditor...4、TineMCE、UEditor) MVC模式 数据渲染分离,数据模型发生变更后,数据才发生变更(Slate、CKEditor 5、Quil.js) L2 自定义输入操作,包括光标、输入法、删除等基础动作...富文本编辑器 - 技术选型 从团队规模角度 产品内容体验简单,并且缺乏编辑器开发者,推荐直接使用 Quill、 Slate.js、CKEditor、TIngMCE 进行二次开发。

    4.8K30

    「可视化搭建系统」——从设计到架构,探索前端领域技术业务价值

    **做个比喻:如果把富文本内容比作一幅画,Draft.js 只提供了画纸画笔,至于怎么画,开发者享有很大的自由 ——(出自文章:Draft.js 在知乎的实践)。...因为 Draft.js 是一个基于 React 的编辑器,我们可以直接在编辑器渲染出一个 React 组件 如下图: ?...**为此我们的方案是:**在编辑器接收到数据源后,如果嗅探为历史 Markdown 格式,那么先利用 marked.js 将此 Markdown 格式内容转换为富文本内容,再根据富文本内容转换为 Draft.js...如果 isDraftJson(rawContent) 判别为 false,那么就表示无法被 Draft.js 解析,需要兼容历史 Markdown 语法,由 marked.js 解析出富文本后再交给 Draft.js...富文本编辑器是一个深坑,Draft.js 虽然背靠 Facebook 团队,但也一直在深坑挣扎,我们此间开发过程确实是一部血泪史,但我们团队也在此方向积累了丰富的经验,后续技术细节也会一一进行分享,请持续关注订阅

    2K30

    最新的15 个有趣的前端库(December 2016)

    Turbo.js Turbo.js允许您访问GPU并提高应用程序的性能。 通过直接在图形处理器执行进程,可以并行运行多个复杂计算,大大减少JavaScript等待时间。 兼容大部分浏览器。 ?...Medium-draft 基于Facebook文本编辑器框架draft-js之上的React富文本编辑器。 支持Markdown, 丰富的快捷键,友好的用户界面,用于编写编辑内容。...需要编辑器的朋友可以试试 Eg.js 基于jQuery实现的包括UI交互,动画效果各种其他实用程序的组件。 可用于网格生成,动画,风景/人像检测,提供设备浏览器信息。...Superdom Superdom是jQuery的轻量级替代品,它允许您操纵HTML DOM。 它提供了一个全局dom对象,可以用来选择修改页面上的所有现有元素及其属性。...Chaos Socket Chaos Socket包含WebSockets,使得更容易自动测试你的应用程序的套接字连接。 提供一个简单的API,允许您注册不同类型的事件,并发送一次或以一定的间隔。

    1K30

    还不知道这 11 个超酷的编程新工具你就 out 了!

    在这篇文章,我们将列出你在日常工作能够使用的新的开发工具。很多对在线流媒体感兴趣的开发人员已经开始在他们的开发环境中使用这些新工具,因为相比他们的旧的设施来讲这些工具提供了更多的优势。...Draft https://github.com/Azure/draft Draft 是一个可以帮助开发者轻松在 Kubernet 构建应用程序的新工具。...有了 Draft,开发者可以在Kubernetes的开发沙箱把“内循环”测试应用作为测试对象。沙箱可以通过公共URL获得,并可以使用本地编辑器修改。...Docsify https://docsify.js.org/ Docsify 是一个文档站点生成器工具。但它完全不同于其他静态的HTML文件生成器。...它可以以gem的形式轻松插入你的应用程序,目前可用于 MacOS Linux 系统。 最后的思考 编码工具是开发人员工具的一部分。 就像其他职位一样,其对提高效率是很有帮助的。

    1.9K20

    数往知来:一次浏览器兼容工作的知识点分析

    在这个机器学习人工智能遍地的年代,前端开发的PC端浏览器兼容问题显得已经不是那么时髦迫切了;刨去某些面向传统行业或网银支付等领域还不得不面对这个具体的问题外,大部分网站移动端应用似乎可以潇洒的回避了...项目构成 ---- 本次用来分析的项目,其package.json的依赖大致如下: "dependencies": { "bootstrap": "^3.3.7", "draft-js":..."react-bootstrap": "^0.30.8", "react-datetime": "^2.8.9", "react-dom": "^15.6.1", "react-draft-wysiwyg...需要注意的是,historylocation两个对象是从组件的props获得的 -- 并非window默认的全局对象。...,以及一些技术的发展脉络,相信在以后的应用,会对相关技术更加心中有数,也能在其他工作,更合理的分析取舍 ?

    1K10
    领券