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

DraftJS: Reset blockType after return

I'm currently building a editor like the one that is used on medium.com. For each unstyled block, I render a custom component that holds edit buttons to change the block type of that section. However, when I for example change the section to a…
n9iels
  • 678
  • 5
  • 17
6
votes
2 answers

Render html saved from draft-js

I'm learning React: totally newbie. If I save in DB the HTML directly from draft.js (or it's variants always based on it) and then in a view page of my React SPA I retrieve HTML from DB through my API: QUESTIONS: how can I render that HTML?…
user4412054
6
votes
2 answers

How to create a selection based on start and end in Draft.js?

I am trying to replace the last insert in Draft.js For example, Orignal string -> aaazzz After inserting 'bbb' in the middle -> aaabbbzzz Replace last insert by 'ccc' -> aaaccczzz Replace last insert by 'ddd' -> aaadddzzz ... One way I thought is…
Hongbo Miao
  • 31,551
  • 46
  • 124
  • 206
6
votes
0 answers

Draft.js rendering selection inside a custom block

Let's go straight to the problem. I have editor full of entities, custom renderers etc and I'm trying to add Background color functionality. I'm looking for a way to render selected block inside custom block. App flow should look like this: User…
Budaa
  • 129
  • 1
  • 11
6
votes
2 answers

Making bullet points in Draft.js

I am using Draft.js to introduce a text editor to my React application. I have made it work for bold, italic and underline but I can't figure out how to change the text to bullet points. I have read the documentation but I couldn't find anything…
Arslan Tariq
  • 2,208
  • 2
  • 17
  • 42
6
votes
3 answers

Best performance method to check if contentState changed in DraftJS, or just editorState

I'm trying to have a function run only when the contentState itself has changed, not just the editorState. My idea right now would be to store the old contentState as a string and compare it to the new contentState as a string, but this seems…
Slbox
  • 5,695
  • 6
  • 30
  • 70
6
votes
1 answer

Draft.js and React Native

Has anyone tried to port DraftJs with React Native. Any ideas how to do it? https://github.com/facebook/draft-js/issues/138
John Paul Manoza
  • 1,694
  • 22
  • 22
6
votes
0 answers

How to add HTML content in DraftJS of React programmatically?

I am new on Draft-JS and able to create a decent enough text editor for my consumption, But I need to add a UL list with LI items at the bottom of my Textarea by coding. I have tried using Import HTML and then adding my HTML into it and then…
Rahul
  • 978
  • 1
  • 18
  • 45
6
votes
2 answers

Handling tab for lists in Draft.js

I have a wrapper around the Editor provided by Draft.js, and I would like to get the tab/shift-tab keys working like they should for the UL and OL. I have the following methods defined: _onChange(editorState) { this.setState({editorState}); …
CodeChimp
  • 7,511
  • 3
  • 35
  • 76
5
votes
1 answer

draft.js - retrieve formatted text from db

My draft.js populates body with the text e.g: '{"blocks":[{"key":"3mont","text":"lorem ipsum","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}' and persists it to the db after using…
Rahni
  • 451
  • 6
  • 20
5
votes
1 answer

Custom Inline Toolbar in draft-js-plugins is not working

Custom Inline Toolbar, as prescribed in their documentation is not working as expected. It keeps showing the default Inline Toolbar, even though custom buttons are added. My code goes below. import Editor from "draft-js-plugins-editor"; import…
Balasubramani M
  • 5,478
  • 1
  • 37
  • 43
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
  • 95
  • 1
  • 8
5
votes
3 answers

How to Access EditorState from Decorated Component

I'm starting to work with the decorators in draft-js and I'm able to render my components defined in the CompositeDecorator. The documented behavior works great. That said, I'm trying to figure out how I can access the editorState from within these…
Blaine Garrett
  • 1,026
  • 11
  • 20
5
votes
2 answers

Draft.js - add link without text selected

How to add a link? I know how to add link to selection const contentState = editorState.getCurrentContent(); const contentStateWithEntity = contentState.createEntity( 'LINK', 'MUTABLE', …
Nick
  • 103
  • 1
  • 2
  • 5
5
votes
6 answers

Draft.js. How to get all entities data from the ContentState

From official docs I know about 2 methods: get entity by its key and get last created entity. In my case, I also need a method to access all entities from current ContentState. Is there any method that could perform this? If not, is there a one that…
Pavel Poberezhnyi
  • 613
  • 10
  • 25
1 2
3
…
41 42