Comments (6)
Thanks for using this component!
The MUIRichTextEditor
component expects a stringified Draft.Model.Encoding.RawDraftContentState
object, so you can do the following:
...
import { convertFromHTML, ContentState, convertToRaw } from 'draft-js'
import MUIRichTextEditor from '../../'
const sampleMarkup = '<b>Bold text</b>, <i>Italic text</i><br/ ><br />Other text<br /><br /><a href="http://myurl.com">Some link</a>'
// 1. Convert the HTML
const contentHTML = convertFromHTML(sampleMarkup)
// 2. Create the ContentState object
const state = ContentState.createFromBlockArray(contentHTML.contentBlocks, contentHTML.entityMap)
// 3. Stringify `state` object from a Draft.Model.Encoding.RawDraftContentState object
const content = JSON.stringify(convertToRaw(state))
...
<MUIRichTextEditor
value={content}
/>
I have updated the examples directory as well if you want to take a look. Hope this helps you out!
from mui-rte.
Hi @felipenmoura
You have several alternatives for the task you want to accomplish.
-
If you want to use an external button, please check the ref-save included example.
-
If you want to use the included
onSave
property, note that the handler will receive the stringified content state, so you will have to useconvertFromRaw
to first parse it into aContentState
object, and then treat it accordingly, in this case pass it to the plugin you want to use. -
The last option is creating your own
callback
custom control so when the user clicks you can use thegetCurrentContent
method to get theContentState
and then use the plugin you want to use.
Hope one of this options helps you out!
from mui-rte.
Oh, I see, It worked!
Thanks for the answer, and for updating the documentation :)
from mui-rte.
Great, thanks, it helped a lot.
from mui-rte.
Sorry for bothering again @niuware !
Is there a way I can grab the final HTML content after the user has finished editing?
I see I can listen for each and every change (which gives me an object). I wanted to avoid having to parse it back to HTML on each keystroke just to be able to use it when the user clicks the "Finish" button. Any alternative?
Also, I noticed the onSave icon, I just want to trigger that event from a different button outside the editor.
As for the HTML content, I'm trying to use the module draft-js-export-html
, but it explodes in an internal error! (TypeError: this.contentState.getBlocksAsArray is not a function
)
Thanks once again :)
from mui-rte.
Ops, accidentally reopened the issue!
from mui-rte.
Related Issues (20)
- Autocomplete Atomic inserts the atomic component in a new line and then moves the cursor also to a new line
- Inline toolbar with more than 5 buttons covers selected text
- How to change to base64 and show when uploading images
- How do I convert MUI rich text to Google Docs text??
- How to style the editor when it gains focus? HOT 2
- Table in the toolbar
- Reset Editor HOT 1
- How to add an external value at the cursor position in the editor
- Load Existing RTF file to MUIRichTextEditor
- Title on toolbar icon
- How to auto-save notes HOT 1
- Material ui not compatiable (5.11.5) HOT 1
- Doesn't work with React ^18.2.0 HOT 7
- Question on ongoing contribution plans
- Input field is not appeared
- Autocomplete
- URL popup or media pop not editable HOT 1
- Color Picker???
- Link creation
- The mui/styles peer dependency used in this package is deprecated and can't be used for React v18 HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-rte.