Stack Overflow
Stack Overflow

Questions tagged [draftjs]

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.

In Draft.js, everything is customizable – it provides the building blocks so that you have full control over the user interface.

You can learn more about Draft.js here.

746 questions
72
votes
10 answers

draftjs how to initiate an editor with content

Stumbled on this cool text editor, draft.js by Facebook. I tried to follow the example in Github, but I want to create an editor with content instead of an empty editor. var EditorState = Draft.EditorState; var RichEditor = React.createClass({ …
vdj4y
  • 2,649
  • 2
  • 21
  • 31
35
votes
6 answers

Draft js. Persist EditorContent to database

I'm trying to persist draft-js's EditorContent to database then read and recreate the EditorContent object again. But EditorContent.getPlainText() strips away rich text content. I don't know how else to do it. How do I properly persist…
Dulguun Otgon
  • 1,925
  • 1
  • 19
  • 38
33
votes
7 answers

React JS Server side issue - window not found

Hi I'm trying to use react-rte in my reactJS project. I have server side rendering and every time I want to use this package I get: return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase()); …
Jan Omacka
  • 1,810
  • 4
  • 20
  • 27
33
votes
6 answers

I can't get the html output from draft-js?

I've been playing around with draft-js by Facebook, but I can't actually figure out how to get the html output of the editor. The console.log in the following example outputs some _map properties, but they don't seem to contain my actual…
Ewan Valentine
  • 3,741
  • 7
  • 43
  • 68
22
votes
4 answers

How retrieve text from draftjs

I'm trying to edit a text and then retrieve it and update the database on the server side this is the code I'm using constructor(props,context){ super(props,context); this.handleOnClick = this.handleOnClick.bind(this); const…
JoseCarlosPB
  • 933
  • 2
  • 14
  • 29
21
votes
2 answers

Draftjs styling in React

I want to use draft.js in my project. It has its own css which I also need to import. In the documentation it is said: This CSS should be included when rendering the editor, as these styles set defaults for text alignment, spacing, and other…
Robin
  • 5,366
  • 17
  • 57
  • 87
20
votes
2 answers

draft-js Cannot read property 'getIn' of undefined ( getUpdatedSelectionState )

I have this error with draft-js with draft-js-plugins-editor STRANGE BEHAVIOR: it only happens, when I refocus to first line of editor after writing, when trying to set for eg. the header of first line to H1 it changes previous focused line ERROR:…
Andrej Lacko
  • 319
  • 2
  • 9
20
votes
5 answers

How to limit Max Length of Draft js

How to limit max characters in draft js? I can get length of the state like that, but how to stop updating component? var length = editorState.getCurrentContent().getPlainText('').length;
Firanolfind
  • 1,559
  • 2
  • 17
  • 36
18
votes
4 answers

Can't figure out why draft-js is not shown

I followed draft-js document to create a very simple demo of draft-js. Everything seems work well, but when I open the url in Chrome, I can only see a white blank page (there is a hidden editor component there but is not visible) There is no error…
Freewind
  • 193,756
  • 157
  • 432
  • 708
16
votes
1 answer

Implement Autocomplete in Draft JS but without a "trigger" like "@"

I want to implement something like a tag editor. However, it's meant just for those tags so I want the user to see the autocomplete suggestions popup without having to type something like @ or #, just the text itself. I have something that kinda…
Victor
  • 13,914
  • 19
  • 78
  • 147
16
votes
4 answers

Draft.js editor is empty

How to test if the content of draftjs editor is empty? The only idea that I have now is an object comparison against the object returned from this function : EditorState.createEmpty().getCurrentContent()
zianwar
  • 3,642
  • 3
  • 28
  • 37
15
votes
4 answers

How to clear input field in Draft-js

None of the demos that I've seen for Draft-js (by Facebook, built on React) show how to clear the input field after submit. For example, see this code pen linked to from awesome-draft-js where the value you submit remains in the input field after…
Leahcim
  • 40,649
  • 59
  • 195
  • 334
14
votes
4 answers

How to align text in Draft.js

I'm wondering how to align text in Draft.js just like on the picture below. I have searched this several days, but I haven't found the solution.
zhuscat
  • 604
  • 1
  • 6
  • 12
13
votes
1 answer

React & Draft.js - convertFromRaw not working

I'm using Draft.js to implement a text editor. I want to save the content of the editor to a DB and later retrieve it and inject it in an editor again, e.g. when revisiting the editor page. First, these are the relevant imports import {…
gisderdube
  • 477
  • 1
  • 3
  • 16
12
votes
1 answer

Create "Karaoke" Type Functionality in DraftJS

I am attempting to implement a DraftJS editor that highlights words in a transcription while its recorded audio is playing (kind of like karaoke). I receive the data in this format: [ { transcript: "This is the first block", timestamps:…
Alek Hurst
  • 4,527
  • 5
  • 19
  • 24
1
2 3
…
49 50