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.

620 questions
52
votes
8 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,291
  • 2
  • 17
  • 29
32
votes
5 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,759
  • 1
  • 16
  • 35
27
votes
5 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,163
  • 6
  • 29
  • 61
26
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,630
  • 4
  • 17
  • 26
20
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
  • 4,717
  • 12
  • 48
  • 81
19
votes
1 answer

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
  • 311
  • 2
  • 7
17
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
  • 11,135
  • 16
  • 65
  • 128
15
votes
4 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,588
  • 1
  • 15
  • 32
15
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
  • 177,284
  • 143
  • 381
  • 649
13
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
  • 785
  • 2
  • 10
  • 24
13
votes
2 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
  • 2,852
  • 2
  • 26
  • 37
12
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
  • 407
  • 3
  • 15
12
votes
3 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
  • 35,491
  • 52
  • 174
  • 313
11
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
  • 3,661
  • 5
  • 14
  • 22
11
votes
3 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
  • 484
  • 1
  • 5
  • 11
1
2 3
…
41 42