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
5
votes
2 answers

How to add custom dropdown menu in react-draft-wysiwyg?

I need to add custom dropdown menu in toolbar section. here attached image similar to want dropdown menu this is possible ? Dropdown menu editor find the detailed image below I used…
itjayaprakash
  • 85
  • 1
  • 9
5
votes
2 answers

How to insert HTML in Draft.js?

I'm using react-draft-wysiwyg editor, which is built on top of Draft.js. I'm trying to figure out, how to programmatically insert HTML, like:

Hey

So far, the closest thing i got is using the insertText() method of the Modifier module.…
i.brod
  • 3,993
  • 11
  • 38
  • 74
5
votes
3 answers

How to programatically add mentions using draft-js-mention-plugin?

The problem: I'm trying to create an edit interface for contents created with draft-js + draft-js-mention-plugin. However, editorState wasn't persisted, only plain text. Mentions were saved as an array of objects. Now I need to recreate the…
Diego Haz
  • 952
  • 1
  • 6
  • 24
5
votes
1 answer

How to change cursor position with draft.js?

I am wondering how you can change the cursor position in draft.js after having done an text insertion on key command. Therefore I am currently using _handleKeyCommand(cmd) to insert a custom text block whenever the user presses a specific button.…
nullmn
  • 557
  • 2
  • 7
  • 19
5
votes
2 answers

Upload and render image in draft-js based editor

I am trying to create a simple editor for writing a storyline. Right now I could show the html to markup in the editor where bold text are shown in bold and etc. I could also send the data in html form to server but I could not show the image in an…
Tushant
  • 1,534
  • 1
  • 14
  • 24
5
votes
1 answer

What are Blocks in Draftjs?

I am going through the draftjs documentation and at a lot of places, 'block' word is used interchangeably. For ex.: Within Editor, some block types are given default CSS styles to limit the amount of basic configuration required to get engineers up…
Omkar
  • 2,274
  • 6
  • 21
  • 34
5
votes
3 answers

How to stop DraftJS cursor jumping to beginning of text?

Code involved using DraftJS and Meteor Js application Task - Make a live preview where text from DraftJS will get saved to DB and from DB it get displayed on another component. But problem is once data comes from DB and I try to edit DraftJS cursor…
Sandeep Chikhale
  • 1,505
  • 2
  • 21
  • 36
5
votes
3 answers

Callback is not working in ajax request?

I am trying to build a contentEditor with draft js. Exactly the feature is Extract the data from url like Facebook. But I am stuck with this part. Callback is not working. First I wrapped my state with compositeDecorator Like this constructor(props)…
Nane
  • 2,370
  • 6
  • 34
  • 74
5
votes
1 answer

Draftjs mention plugin with browserify

I tried to get the mention plugin in draft-js get working with Browserify. This is because of the fact that our application is build with Browserify. It's about this plugin: https://www.draft-js-plugins.com/plugin/mention In the examples they are…
sneeky
  • 1,458
  • 2
  • 13
  • 19
5
votes
2 answers

Using draft js with html in and html out

I would think this is a very very common request but yet, I can't find anything to help me solve it. I've tried various plugins like draft-js-import-html and variations but they never seem to fully work, specially when you add an image or embed a…
denislexic
  • 10,786
  • 23
  • 84
  • 128
5
votes
1 answer

getBoundingClientRect return 0 for top, left, right, bottom in Safari

So, I have a contenteditable div powered by Facebook's draft-js. I needed to get the visual position of the caret inside that div, and I implemented this (which works in Firefox and Chrome): const selection = window.getSelection &&…
Tarun Dugar
  • 8,921
  • 8
  • 42
  • 79
5
votes
2 answers

How can I get draft.js to recognize the escape key?

I would like to cancel input and clear the field in my app when the user types the escape key. We tried testing for e.which === 27 in the keyBindingFn, but that function is never even invoked when the escape key is pressed (it is invoked just fine…
Carl Manaster
  • 39,912
  • 17
  • 102
  • 155
5
votes
2 answers

How can I make custom rendered block readonly in Draft.js editor when its readOnly prop is true?

I'm using Draft.js Editor component. I have a custom block renderer specified correctly via blockRendererFn prop. The component renders the EditorBlock imported from draft-js as advised in the Draft documentation. In the props I get in my custom…
Vilém Jeniš
  • 151
  • 1
  • 7
5
votes
0 answers

Constraining block types in draftjs editor

In draftjs plain paragraphs are given have a block type of unstyled, although draftjs does define a paragraph type. Similarly when pasting, the default block type for p or div tags is unstyled. What is the reason for this design? Is there a way to…
pwray
  • 1,075
  • 1
  • 10
  • 19
4
votes
3 answers

Using DraftJS in a Functional Component

I am trying to implement DraftJS within an existing functional component and I am unable to figure out how to do this. It appears that all of the documentation and user-submitted content refers to class components. I try to set it up using the…
Sam
  • 1,130
  • 12
  • 36
1 2 3
…
49 50