Let contentState = editorState.getCurrentContent() Ĭonst blockMap = contentState. Declarative Rich Text Draft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API. So far i am able to create the editor and creating the mention tags. We provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media. In this post we will learn how to do just that, by converting our editor state to HTML that can be displayed without Draft.js editor. It can be little unclear though what you should do when you want to display your editor content as plain HTML. Here’s how my App.js now looks like now: import React, = this.state javascript - Draft JS, mention plugin renders as plain text - Stack Overflow Draft JS, mention plugin renders as plain text Ask Question 0 I am implementing React's 'draft js' with mention plugin. Draft.js is a great way to implement rich text editors with React. I’m just defining two input fields, both update the state so we can share the search text and the replace text. Once we have the contentState object we create an editorState object out of it with EditorState.createWithContent (line 9). The first task we’re supposed to tackle is to build an interface for searching an replacing text.īefore we deal with the draft.js implementation, we’ll simply create a search and replace interface. In the render method we create a contentState object by passing the JS object for the state as a parameter for convertFromRaw method (line 8). This post is part of the second installment of a multi-part series about building a Rich Text Editor with React and Draft.js.For an introduction to the Draft.js framework with setup instructions. To start we’ll clone the draft js boilerplate repository, let’s cd into our app folder, run yarn to install all dependencies and get going! Our brief - A way to search for text and replace it. The working code for this tutorial is contained within this repo. Construct content state from the array of block elements and the entityMap, and then update the editor state with it. In this episode of learning-draft-js we’ll build something usefu - The functionality to search and replace strings. convertFromHTML () Given an HTML fragment, convert it to an object with two keys one holding the array of ContentBlock objects, and the other holding a reference to the entityMap.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |