Comments (17)
This would be a great to have, would make easier on the migration process from other text editors specially when there is already saved content
from draft-js.
There is now a convertFromHtml method so initializing with default html could be done like:
const {Editor, EditorState, ContentState, convertFromHTML} = Draft;
const processedHTML = convertFromHTML('<div><p>Hello <b>world!</b></p><ul><li>again</li></ul></div>');
class PlainTextEditorExample extends React.Component {
constructor(props) {
super(props);
const initialState = ContentState.createFromBlockArray(processedHTML);
this.state = {editorState: EditorState.createWithContent(initialState)};
...
from draft-js.
Hi @hobenkr88 ,
I have done it in this way while saving data in database I converted it to RAW as this
var content = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent()))
For Editing content
you can initialize editor with content as below code
this.setState({editorState:EditorState.createWithContent(convertFromRaw(JSON.parse(content)))})
For displaying data on html web page you can convert it to html as below code
<p dangerouslySetInnerHTML={{__html: stateToHTML(convertFromRaw(JSON.parse(content)))}}>
You need to import stateToHTML from plugin draft-js-export-html
Please let me know if this answers to your query or you can chat with me on [email protected]
from draft-js.
Yep, this makes sense. We hadn't needed this since we've never needed to initialize the editor from HTML at FB, but I certainly see the usefulness.
Since your use case demonstrates that HTML-to-BlockMap is relevant outside of paste behavior, I should probably even rename the utility. (It should also export a single function. I want to remove processText
from this module, since it's independent of anything else happening in the module.)
Then the utility could be exported from the top-level module along with the convert
functions.
from draft-js.
cc @CLowbrow
from draft-js.
+1
from draft-js.
On a related note, at present the pasteProcessor relies on a browser implementation at two points (expects global document
object, and global HTMLEntity
class). I was testing a process of converting existing HTML content into draft-ready objects on the server and quickly ran into this limitation.
One can of course get around it with something like jsdom:
import jsdom from 'jsdom';
let window = jsdom.jsdom().defaultView;
global.document = window.document;
global.HTMLElement = window.HTMLElement;
import DraftPasteProcessor from 'draft-js/lib/DraftPasteProcessor';
DraftPasteProcessor.processHTML(...) //etc
That suffices for my conversion process on the server for now, though I wondered whether a tighter module for converting HTML to draft content without a full browser / document implementation might be worth having.
from draft-js.
any PR's on the way for this feature ?
from draft-js.
Yep I'm going to do this sometime this week.
from draft-js.
As an exploration I wrote something that exposes the paste handler at the top level with an api that's something like:
import Draft from 'draft-js';
const {getBlocksFromHTML, getSafeBodyFromHTML} = Draft;
// getSafeBodyFromHTML is how we generate a dom tree that won't auto-run JS in the browser
let myBlocks = getBlocksFromHTML('<p> hello! </p>', getSafeBodyFromHTML);
This add two things to the main Draft object, which I don't like so much, but I feel like if I don't expose our internal way of generating the dom tree I'm setting people up to do this in a way that isn't secure in the browser. (I'm putting that second argument in getBlocksFromHTML so that people can write a JSDom generator, for example, and plug it in).
It might be best to put these things draft-js/lib/ so as not to make Draft super complicated.
Thoughts?
from draft-js.
That is exactly what we also need, @CLowbrow.
from draft-js.
That approach looks good, and particularly the helpful option to pass a custom getSafeBody function so that I can use jsdom or something similar on the server. I might suggest that this second argument just default to the internal getSafeBodyFromHTML
when not provided, so that users doing this in the browser have no need to worry about that complication, but either way it seems very reasonable to me.
from draft-js.
Thanks for looking into this. We're still blocked from adopting DraftJS due to this, a release would be awesome. :)
from draft-js.
@omerts
Hi,
This do not works if html contains img tag.
from draft-js.
Hey @akshaygoyal88 , I'm having the same trouble with img tags being stripped (as are <hr />
tags). Were you able to find a workaround? I tried extending the block render map. This seems to work for defining new tags if you wanted to extend html using the web components (for example, polyfills like polymer and xtags), but it seems there's some distinction between existing html tags and custom ones.
I realize i could emulate a horizontal rule and image relatively simply, but part of me cries at this thought since a large part of what thrilled me about draft was how it fixed contenteditable (allowing for more semantic WYSIWYG).
As a side note, since this thread seems to address some of what FB didn't intend with this library, I'd like to bring up what might be a somewhat strange use-case, but mabe not all that uncommon.
I would kind of like to use draft as a means to edit content for site where draft isn't used to render the content. For this it would be desirable to save the content directly as HTML rather than in a raw format as is kind of suggested by the draft js docs. I understand the motivation for the convertToRaw
means of storage. It is certainly appealing, but i also consider storing a page without dependency on a js library a valuable attribute.
Seeing as you've addressed the worthiness of converting HTML to a block array, would you consider adding the conversion of a block array to HTML as part of the core? Please forgive me it I've overlooked where this functionality already exists, but as far as I can tell, it's been filled in by some 3rd party libraries (they do the job well, but add their own level of configuration, and it would be nice to see this as part of the core library).
I recognize that this library isn't going away anytime soon, so storing as raw is not really a practical issue, but I would love to see the ability to convert back to HTML. What those of you at FB have created and opened up to the open source community is really great. That said, ideas on the internet are expressed in HTML.
Are there any plans to support converting a raw state back to HTML? It's supported relatively well already through related libraries, but is there any thought to support this functionality?
Thanks for sharing the amazing work you're doing and sharing :)
from draft-js.
yes, converting to HTML exists in the plugin @akshaygoyal88 mentioned and can basically be considered the canonical solution; there is an interest to keep the core Draft.js code as slim as possible. having a plugin ecosystem where consumers can cherry pick what they want is generally better than bloating the codebase with all sorts of functionality that isn't core and could live elsewhere.
while the web is expressed in HTML, native apps are not :)
from draft-js.
Thanks for the explanation :)
from draft-js.
Related Issues (20)
- read-only font size not working
- Ctrl+A selection doesn't work in Firefox when there are action items
- Bug in demo text editor on website HOT 4
- created by DraftEditorTextNode
- state in decorator are memorised
- Add custom classes
- Ordered and unordered lists don't work
- Is/should convertToRaw be based on some kind of open standard? HOT 1
- How to insert texts via google chrome extension to an input created by DraftJS HOT 1
- Pressing return jumps to start of line in Android API 33 HOT 1
- How to change blockType by pressing keyboard
- why draftInlineStyleType only can be default type? HOT 1
- How to get the cursor position? HOT 4
- URGENT :: How to update words arrays in handleStrategy of decorator?
- how to stop the style i add in replaceText?
- pre select inline style, then input in composition mode, the selected inlinestyle not work
- when input some IME punctuation, the editor crashs
- wrong return value of getInlineStyleForCollapsedSelection and getInlineStyleForNonCollapsedSelection
- http://localhost:8000/
- InvalidStateError: 'extend' requires a Range to be added to the Selection HOT 1
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 draft-js.