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

draftjs how to apply bold from cursor location?

I was wondering how to toggle BOLD to text starting from cursor position. RichUtils allows me to use ctrl-b command to toggle bold, which is what I want but with a button. If i currently click my button (richUtils.toggleInlineStyles()) it only…
Atilla Kita
  • 1
  • 2
0
votes
1 answer

React js implement CKeditor or Draft

I want to implement CKeditor or Draft in React.js, how should I go about it, Can some show me that way?
Myjay1516
  • 197
  • 2
  • 4
  • 12
0
votes
1 answer

Set EditorState without the application state in Draft js

I want to update the Draft js Editor with some initial content. I know we can change EditorState using component state. import React from 'react'; import ReactDOM from 'react-dom'; import {Editor, EditorState} from 'draft-js'; class MyEditor…
Sarath Kumar
  • 1,136
  • 1
  • 18
  • 41
0
votes
1 answer

How to use strategy function Decorator in Draft.js?

I've been playing with the Decorators in Draft.js but when I could not build a custom one I am sending the text to an API which I will get a response with an array of incorrect words that typed in the editor So I am trying to build a Strategory…
Rami Salim
  • 182
  • 2
  • 11
0
votes
1 answer

Adding a horizontal rule button to React Draft Wysiwyg

I'm trying to add a custom button to React Draft Wysiwyg to insert a
tag to my content. Using the demos and documentation I've managed to get the custom button to insert text but not markup. onClick = () => { const { editorState, onChange } =…
Tim Barnett
  • 1,012
  • 5
  • 9
0
votes
1 answer

Adding Entity into its own block in DraftJS

So I'm trying to create a fairly simple WYSIWYG BBCode editor for my project as an opportunity to wrap my mind around DraftJS. I've been following some tutorials and also using react-rte as an example (since it has 99% of the functionality I need…
Almaron
  • 4,127
  • 6
  • 26
  • 48
0
votes
1 answer

How to change order of ContentBlock render in draftjs?

Got an question about draft js. How i can change an order of ContentBlocks? Im trying to add an external link to content and render video inside of Editor. Creating current state: createEditorState(source) { if (!source) { return…
Ashhm
  • 15
  • 3
0
votes
0 answers

Could you inject a script into a React page (with Draft.js editor) to append HTML to the existing contents of the editor?

I'm looking to mash up Chrome Extension's ability to inject scripts with Draft.js's ability to add content to the editor. Would it be possible to inject a script like this into a React/Draft.js page, pass it a string (from the Chrome Extension), and…
11teenth
  • 1,853
  • 1
  • 15
  • 28
0
votes
2 answers

In react, how to use draft-js to work with update/edit?

I am using draft-js to render rich text editor inside my form. Can someone please help me figure out how can I show the value of the state on the Editor that is saved in my database? This is what I have so far: import { convertFromRaw, EditorState…
SamWhite
  • 89
  • 3
  • 11
0
votes
1 answer

Find child of specific type in render() of React component

I am using Draft.js and need to recurse into props.children to find components of type DraftEditorBlock. For some reason, this doesn't really seem to work: import React from 'react'; import { DraftEditorBlock } from 'draft-js'; ... export default…
mzedeler
  • 4,177
  • 4
  • 28
  • 41
0
votes
2 answers

Draft js codeblock text overflow

I am having a hard time trying to prevent the overflowing text inside a codeblock. The problem seem to be only with codeblocks, which ignores its parent container width. As per the example below, when editing using a codeblock the text is not…
adavia
  • 413
  • 5
  • 18
0
votes
1 answer

How can I render html on Draft editor instance?

I have a use case where I have to render an HTML template onto an editor. I am exploring draftjs for the same. I have the basic setup done and have draftjs editor rendering for simple text. But if I pass an HTML string to same Editor component I…
bluefalcon
  • 505
  • 1
  • 5
  • 21
0
votes
0 answers

How can I create a h2 wrapped in a div in Draftail

I would like to allow my content editors to center-align content. To this aim, I want to add a DIV button to Draftail which wraps its children in a div with the centered class. The rendered result should be something like:
Hello…
mnieber
  • 992
  • 9
  • 23
0
votes
1 answer

How do you get the content length from raw DraftJS data?

I am storing the contents of my DraftJS editor in my database as a JSON string after running it through convertToRaw(editorState.getCurrentContent()). An example of what is stored in the database: {"blocks": [{"key": "1m9md", "data": {}, "text":…
speak
  • 5,202
  • 4
  • 36
  • 41
0
votes
2 answers

convertFromHTML returns a null response | draftjs

I am sure I am doing something wrong. However, a simply empty html tag is creating a problem with convertFromHTML call. convertFromHTML("

"); // returns null Where as: convertFromHTML("

empty

"); // returns a valid object. Any thought…
codebased
  • 6,945
  • 9
  • 50
  • 84
1 2 3
…
49 50