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
0
votes
0 answers

display html button in draftjs editor

I am using draftjs for editor. I could parse html code that comes from api to markup. But how can i display a html button so that when clicked on it, it should allow to write html code. How can i do it so? Here is my code. I am using…
milan
  • 2,409
  • 2
  • 34
  • 71
0
votes
1 answer

Draft.js won't react if clicking on 'blank space'.

https://codesandbox.io/s/Op8BoLzQ If you click on the first line, the editor cursor will show, but if you click on blank space below, nothing will happen. I've tried to set min-height to height, now it is acting correctly regarding this issue, but…
Fate Riddle
  • 364
  • 1
  • 3
  • 15
0
votes
0 answers

How do I add an unstyled block with draftjs?

I know this is probably a noob question. I actually got this working by getting the block map from editorState and modifying it. This however feels hacky and I cannot help but think I overlooked something. Essentially all I want to do is have an add…
tnyN
  • 808
  • 6
  • 16
0
votes
1 answer

Own css selectors (import and set)

maybe I don't understand draft-js idea at all but I can't find answer on important question for me. How can I use own css selectors ID's and classes. I know that if I'll create decorators I can add action create-row add there
jaroApp
  • 849
  • 3
  • 13
  • 27
0
votes
1 answer

Updating state in parent with Draft editor state?

I have a Draftjs editor in a form with other fields. The state for all those fields is being controlled in that parent component. How do I get the same behavior from the Draft editor as I do from the regular HTML form fields where it updates the…
humdinger
  • 521
  • 1
  • 3
  • 18
0
votes
2 answers

How to replace character in HTML string with javascript

I'm using sanitize-html to clean pasted text for draftJS editor. Lets say result might be text string like this

President said "Give this man a money" and i agree

Lauri
  • 65
  • 4
  • 12
0
votes
0 answers

Should DraftJS fire a dispatch in Redux for every editor change?

I'm building a simple Markdown editor and I'm currently saving the EditorState as well as the contents of the document to my store (because I want to be able to persist the document the user is editing). The question I'm facing now is wether the…
César Alberca
  • 2,321
  • 2
  • 20
  • 32
0
votes
0 answers

Displaying a React Draft.js editor in a div

I'm still rather new to Javascript, but not programming, and I have been trying to set up a project and can't seem to get off the ground with it. I am trying to use Electron with code from http://photonkit.com/ as a basic template to start from.…
Ryan Bass
  • 1
  • 3
0
votes
1 answer

How to add clicklable padding to Draft js editor

How can I add padding to the Editor of Draft js in a way that when I click on the padding area the Editor is selected? Adding the padding to container div of the Editor will show the padding correctly but it will not be possible to click on the…
Giorgio
  • 13,129
  • 12
  • 48
  • 75
0
votes
1 answer

Custom block using blockRendererFn with DraftJS

Is it possible to render a custom block where some parts of it are editable and some are not? Here is an example of what I am trying to achieve. The ReadOnlyComponent component should be read only, while the WriteComponent contains data that can be…
Alberto Centelles
  • 1,215
  • 11
  • 24
0
votes
1 answer

Update editorState with two operations at once

I am trying to split a word into two words when I enter the space bar. Every word in my text is an entity, so when I split a word in two, I need to update the text and create a new entity. I am using the Modifier module for both updates. const…
Alberto Centelles
  • 1,215
  • 11
  • 24
0
votes
1 answer

How to do drag and drop like medium?

I am new to javascript I am pretty confused with this drag n drop operation .I wanted to like medium.com Like this. GIF I am building an content Editor with draft js , And I don't have any idea how to do this in javascript. Thanks in advance...
Nane
  • 2,370
  • 6
  • 34
  • 74
0
votes
0 answers

How to export and import html div content in draft js?

I use draft-js-export-html and draft-js-import-html to export and import my HTML content to editor. But when I try to export HTML by stateToHTML function, it also remove all my HTML div content. Anyone know solution to keep div tag content when…
Tuan Nguyen
  • 151
  • 1
  • 5
0
votes
2 answers

Draft JS: Atomic Block Floating Component

In the Facebook notes, when you upload an image, you get the hover selection of moving that image from either left, right or center. Center basically insert the atomic render to a new block. What I don't have an idea, is how to render the atomic…
Mr A
  • 1,345
  • 4
  • 22
  • 51
0
votes
1 answer

Accessing draftjs output from parent

I have a site where we are using multiple forms on the same page. I have used Draftjs with react to create rich html text inputs, which I have customized to use only the controls I actually need: class RichEditor extends React.Component { …
Winter
  • 2,407
  • 1
  • 19
  • 28