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

将DraftJS html返回到父组件

将DraftJS HTML返回到父组件是指在使用DraftJS编辑器创建富文本内容后,将其转换为HTML格式并传递给父组件进行进一步处理或展示。

DraftJS是一个用于构建富文本编辑器的JavaScript库,它提供了一套丰富的API和组件,用于处理文本内容的编辑、样式、块级元素等。在使用DraftJS编辑器创建内容后,可以通过其提供的转换函数将内容转换为HTML格式。

以下是一个示例代码,展示如何将DraftJS HTML返回到父组件:

  1. 在父组件中引入DraftJS和相关依赖:
代码语言:txt
复制
import React, { useState } from 'react';
import { Editor, EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';

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

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

  const handleSave = () => {
    const contentState = editorState.getCurrentContent();
    const rawContentState = convertToRaw(contentState);
    const html = draftToHtml(rawContentState);
    // 将html传递给父组件进行进一步处理或展示
    console.log(html);
  };

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

export default ParentComponent;

在上述代码中,我们使用了React的函数式组件和Hooks来管理编辑器的状态。通过Editor组件和EditorState来创建一个DraftJS编辑器,并通过handleEditorChange函数来更新编辑器的状态。

  1. handleSave函数中,我们获取当前编辑器的内容,并将其转换为Raw格式。然后使用draftToHtml函数将Raw格式的内容转换为HTML格式的字符串。
  2. 最后,我们将HTML字符串传递给父组件进行进一步处理或展示。在示例代码中,我们只是简单地将HTML字符串打印到控制台上,你可以根据实际需求进行相应的处理。

这样,当用户在DraftJS编辑器中创建内容并点击保存按钮时,父组件就可以获取到转换后的HTML内容,并进行后续的操作。

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

相关·内容

vue业务组件封装_怎么去设计一个组件封装

组件间传值——给子传值 一、组件 组件是拥有专属的 HTML+JS+CSS+数据 的可重用的独立的页面功能区域,如果发现网页中有一个功能,可能被多处反复使用,都应封装为组件。...return一个新对象{} //HTML片段仍需写在唯一的元素中 (2)在页面中使用组件 <!...二、组件化开发 前端一个页面的功能和代码量越来越多,但是操作系统是禁止多人协作编写一个文件的。组件化就是一个大的页面,划分为多个组件区域,分别保存在不同的文件中,由多人协作开发。...组件的使用过程 (1)每当拿到一个页面后,先划分组件区域,根据3个原则:位置、功能、是否重用; (2)为每个组件创建独立的js文件,来保存组件的代码; (3)回到原页面中引入并使用组件标签,组件重新拼接回一个完整的页面...组件间传值——给子传值 //1.给子: 组件:{ template:` ` //2.子组件接收属性值: 子组件对象

2K10

高质量编程的金玉良言——开放-封闭原则

因此,在设计类的时候,应该要“猜”这个类未来会作哪些扩展,然后把这些扩展抽象出一个公共类,类中有这些子类都会执行的函数,只不过不同的子类函数实现不一样;这样,增加新功能时只要新建一个类,继承类,覆盖类中的函数...我们在设计或开发类的时候如果没有未来可能扩展的功能考虑到,这没关系,只要在开发或新增需求的时候,一旦发现需要扩展功能并且需要修改原来代码,我们就立刻给这个类抽象出类,让原本的功能和新增的功能都继承这个类...比如,我们一开始拿到需求是这样的: 开发一个软件,营业员只要输入原价,就能根据“满10050”计算出折扣以后的价钱。 ?...我们只需要创建一个折扣类,该类里面有一个打折函数,这个函数需要输入原价,然后它会按照“满10050”的规则计算出折后价。...正确的做法是,当我们发现需要增加打折功能的时候,我们抽象出一个打折类,这个类中有一个抽象函数:discount(),然后让各种不同的打折方式类继承这个类,并重写各自的打折方式。

779120

Vue 组件插槽:父子组件间的内容分发和插槽作用域

插槽的作用 在组件入门这篇教程中,学院君已经给大家演示了插槽(slot)功能的基本使用,插槽的主要作用就是在组件中分发作用域的内容,这个作用域可以是 Vue 全局容器(可以看作是一个全局的「根组件」...),也可以是组件。...关于组件嵌套、数据传递和事件通知学院君前面都已经介绍过了,回到插槽这个主题,我们可以通过 语法在子组件中渲染级作用域定义的元素,从而实现嵌套组件之间的内容分发。..."language">{{ language }} 我们通过一个循环列表渲染从父级作用域传入的 languages 数据,每一个列表项通过插槽转发给级作用域定义渲染的内容...+ Vue Loader 来编写单文件 Vue 组件,并成功在 HTML 文档中引入和渲染。

1.7K30

【Vue进阶】手把手教你在 Vue 中使用 JSX

[3] 我们来看下怎么使用 JSX 实现具名插槽和作用域插槽 具名插槽:组件的写法和单文件组件模板的类似,通过 slot="header" 这样方式指定要插入的位置。...$slots.header} 方式指定插槽的名称,其中 header 就是插槽的名称,父子组件需要一一对应 注意:这里不能使用 v-slot 指令 组件: render() { {/* 具名插槽...$scopedSlots.test({ user: this.user })} 指定插槽的名称是 test,并将 user 传递给组件。...组件在书写子组件标签的时候,通过 scopedSlots 值指定插入的位置是 test,并在回调函数获取到子组件传入的 user 值 注意:作用域插槽是写在子组件标签中的,类似属性。...*/} } 函数式组件 函数式组件是一个无状态、无实例的组件,详见官网说明[4],新建一个 FunctionalComponent.js

4.5K20

「React进阶」 推荐 8 个很棒的 React 工具库,强烈建议收藏~

笔者在开发 React 项目的时候,总结出一些很不错的 React 库,可以提高开发效率,满足业务需求,接下来一一介绍它们。...UI组件库 Ant Design 要说 React 最受欢迎的 UI 组件库,那么我第一个想到的就是 Ant Design,Ant Design 提供了数十种常用的组件,比如 Button,Menu ,...https://github.com/ant-design/ant-design 2.jpg 3.jpg 4.jpg 富文本编辑器 braft-editor braft-editor 是一个基于 draftjs...把 echarts 的配置参数通过 React 组件的 props 形式进行传递配置。目前在 github 上获得 3.3k+ star 。...17.jpg 该插件基于react 16.8+ ,react-router 4+ 开发的 react 缓存组件,可以用于缓存页面组件,类似 vue 的 keepalive 包裹 vue-router 的效果功能

1.2K20

推荐 8 个很棒的 React 工具库,强烈建议收藏~

笔者在开发 React 项目的时候,总结出一些很不错的 React 库,可以提高开发效率,满足业务需求,接下来一一介绍它们。...UI组件库 Ant Design 要说 React 最受欢迎的 UI 组件库,那么我第一个想到的就是 Ant Design,Ant Design 提供了数十种常用的组件,比如 Button,Menu ,...https://github.com/ant-design/ant-design 2.jpg 3.jpg 4.jpg 富文本编辑器 braft-editor braft-editor 是一个基于 draftjs...把 echarts 的配置参数通过 React 组件的 props 形式进行传递配置。目前在 github 上获得 3.3k+ star 。...17.jpg 该插件基于react 16.8+ ,react-router 4+ 开发的 react 缓存组件,可以用于缓存页面组件,类似 vue 的 keepalive 包裹 vue-router 的效果功能

1.1K10

vue源码分析-动态组件

众所周知,组件是贯穿整个Vue设计理念的东西,并且也是指导我们开发的核心思想,所以接下来的几篇文章,重新回到组件的内容去做源码分析,首先会从常用的动态组件开始,包括内联模板的原理,最后会简单的提到内置组件的概念...我们回忆一下之前组件能访问到子组件的情形,从大的方向上有两个:- 1. 采用事件机制,子组件通过$emit事件,组件的状态告知组件,达到访问子的目的。 - 2....利用作用域插槽的方式,子的变量通过props的形式传递给,而通过v-slot的语法糖去接收,而我们之前分析的结果是,这种方式本质上还是通过事件派发的形式去通知组件。...之前分析过程也有提过组件无法访问到子环境的变量,其核心的原因在于: 级模板里的所有内容都是在级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。...因此重新回到概念的理解,内置组件是源码自身提供的组件,所以这一部分内容的重点,会放在内置组件是什么时候注册的,编译时有哪些不同这两个问题上来。

83110

vue源码分析-动态组件_2023-02-27

众所周知,组件是贯穿整个Vue设计理念的东西,并且也是指导我们开发的核心思想,所以接下来的几篇文章,重新回到组件的内容去做源码分析,首先会从常用的动态组件开始,包括内联模板的原理,最后会简单的提到内置组件的概念...我们回忆一下之前组件能访问到子组件的情形,从大的方向上有两个: - 1. 采用事件机制,子组件通过$emit事件,组件的状态告知组件,达到访问子的目的。 - 2....利用作用域插槽的方式,子的变量通过props的形式传递给,而通过v-slot的语法糖去接收,而我们之前分析的结果是,这种方式本质上还是通过事件派发的形式去通知组件。...之前分析过程也有提过组件无法访问到子环境的变量,其核心的原因在于: 级模板里的所有内容都是在级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。...因此重新回到概念的理解,内置组件是源码自身提供的组件,所以这一部分内容的重点,会放在内置组件是什么时候注册的,编译时有哪些不同这两个问题上来。

41430

Vue 嵌套路由使用总结

另外,push这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,可以回到之前的页面 需要注意的是,这里给push方法提供的代表路径的字符串。...个人理解,嵌套路由控制内容子组件内容的展示区:实现组件的内容展示区保持不变,子组件内容展示区动态变化。 2、同this....$router.push("nav1")时,跳转的url为/index/nav1,找不到匹配的路由 3、this....总结 通过router-view实现在当前指定容器中动态加载不同组件,展示不同页面的大致实现思路: 1、 在当前页面(这里称之为页面).vue文件template模板中的指定位置(“包含”子组件内容的容器...),添加元素 2、 router/index.js中给页面路径所在的路由,添加子路由:子组件的加载url对应的路由

1.2K20

「译」一个案例搞懂 Vue.js 的作用域插槽

本文向你展示如何使用作用域插槽构建一个可复用的列表组件。...由于列表中的项目可能有不同的结构,我们将会给 my-list 一个插槽,让组件来定义列表的展示方式。...my-list 本来应该是一个展示列表的组件,但我们却把渲染列表需要的逻辑部分抽象到了组件中,这样一来,子组件在这里只不过是用来包裹列表而已,未免显得大材小用了。...之所以叫做”作用域“插槽,是因为模板虽然是在级作用域中渲染的,却能拿到子组件的数据。...之后普通插槽替换为作用域插槽,这样,my-list 就能够负责迭代列表项目,同时组件依然能够定义每个项目具体的展示方式。

1K10

初探富文本之编辑器引擎

嵌套文档模型,slate文档所使用的模型是一个嵌套的,递归的树,就像DOM一样,这意味着对于高级用例来说,构建像表格或是嵌套引用这样复杂的组件是可能的,当然你也可以使用单一层次的结构来保持简单性。...在quill的文档中有对于框架的设计原则上的描述: API驱动设计,quill所有的功能都是通过API来实现的并且可以直观的通过API来获得数据的变化,以文本为中心的基础上构建的API,不需要解析HTML...其为创建和自定义文本编辑器提供了强大的API,并且旨在易于扩展和与其他库集成,与React结合可以使开发者在进行编辑器开发时既不用操作DOM、也不用单独学习一套构建UI的范式,而是可以直接编写React组件实现编辑器的...参考 draft官方文档https://draftjs.org/docs/overview。 draft官方示例https://draftjs.org/。

1.8K51
领券