React Draft Wysiwyg 使用教程

最新推荐文章于 2024-08-10 08:04:09 发布

阮然阳Ian

最新推荐文章于 2024-08-10 08:04:09 发布

阅读量485

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01057/article/details/141078728

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 是一个基于 React 和 Draft.js 的富文本编辑器组件。它提供了丰富的文本编辑功能，如加粗、斜体、链接插入、列表创建等，并且支持自定义工具栏和插件扩展。该项目的目的是为开发者提供一个易于集成和高度可定制的富文本编辑器解决方案。

项目快速启动

安装

首先，你需要在你的项目中安装 React Draft Wysiwyg 及其依赖项：

npm install react-draft-wysiwyg draft-js

基本使用

以下是一个简单的示例，展示如何在 React 应用中使用 React Draft Wysiwyg：

import React, { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState } from 'draft-js';

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

  return (
    <Editor
      editorState={editorState}
      onEditorStateChange={setEditorState}
      wrapperClassName="demo-wrapper"
      editorClassName="demo-editor"
    />
  );
}

export default MyEditor;