braft-editor-2
Advanced tools
This version of braft-editor merges a bunch of its dependencies to make maintaining and updating them easier. This is a fork from https://github.com/margox/braft-editor . This was forked because the original repo has been archived
It also changes the React peer dependency to 17.0.2 Merged dependencies
- braft-convert
- braft-extensions
- braft-finder
- braft-utils
other changes
- switched node-sass to sass (no dependecy on node-gyp, which is a pain to install)
- switched mergeclassnames to clsx (better maintained and smaller)
- inlined icon font as base64
- Removed some scss path aliassing
- Updated eslint config and prettier config
Not working yet:
- extensions
Thanks to Google Translate
Braft Editor is an editor based on draft-js. Draft-js does not directly use HTML as the component state. It implements an EditorState type, which is essentially a JS object. In the traditional rich text editor, The piece of HTML content corresponding to EditorState is a block; this can be verified by looking at editorState.toRAW ().
The advantage of using EditorState instead of HTML strings is that a set of EditorState can be used on multiple ends, and the content produced by the editor is no longer limited to being displayed on the web platform (of course, each platform also needs to implement the corresponding EditorState to View conversion function) At the same time, it is more suitable for the component state of React.
However, in the above implementation, the biggest problem is that it cannot perfectly convert external HTML into EditorState, because its supported styles, tags, tag attributes, and so on are extremely limited, and there is no way to convert all the features in HTML to the state in EditorState. , When using third-party or historical HTML strings to initialize the editor content, and when pasting external HTML content, only a small number of styles and tag attributes supported by the editor can be retained, most of the content will be filtered or Ignore it.
Based on the above shortcomings, if your project strongly depends on the original HTML tags and attributes, etc., this editor is not recommended.
The form extension module has been released in a test version. Please upgrade craft-editor and craft-utils to the latest version and install the latest version of craft-extensions. For the usage, please see [form extension module]
Exchange feedback, please add QQ group: 725634541
allowInsertLinkText property, allowing link text to be entered when inserting a link directly, default falsenode_modules/braft-editor/dist/output.css)# Install using yarn
yarn add braft-editor
# Install using npm
npm install braft-editor --save
The editor supports value and onChange properties, which are similar to the native input components in React. In general, you can use this editor in the form of a typical controlled component:
import React from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
export default class EditorDemo extends React.Component {
state = {
editorState: null
}
async componentDidMount () {
// Assume here to get the editor content in html format from the server
const htmlContent = await fetchEditorContent()
// Use BraftEditor.createEditorState to convert html strings to editorState data needed by the editor
this.setState({
editorState: BraftEditor.createEditorState(htmlContent)
})
}
submitContent = async () => {
// Pressing ctrl + s when the editor has focus will execute this method
// Before the editor content is submitted to the server, you can directly call editorState.toHTML () to get the HTML content
const htmlContent = this.state.editorState.toHTML()
const result = await saveEditorContent(htmlContent)
}
handleEditorChange = (editorState) => {
this.setState({ editorState })
}
render () {
const { editorState } = this.state
return (
<div className="my-component">
<BraftEditor
value={editorState}
onChange={this.handleEditorChange}
onSave={this.submitContent}
/>
</div>
)
}
}
If you want to thank this editor for saving time for your project, or simply like this editor, you can scan the code and appreciate a few dollars to invite me for a beer!
FAQs
Rich Text Editor Based On Draft.js
The npm package braft-editor-2 receives a total of 1 weekly downloads. As such, braft-editor-2 popularity was classified as not popular.
We found that braft-editor-2 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.