Let contentState = editorState.getCurrentContent() Ĭonst blockMap = contentState. Once we have the contentState object we create an editorState object out of it with EditorState.createWithContent (line 9). Here’s how my App.js now looks like now: import React, = this.state 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). Open a contact in the Contacts folder > double-click the email address > click View more options for interacting with this person > select Outlook properties, In the E-mail Properties dialog that opens, select Send Plain Text only in the Internet format field. I’m just defining two input fields, both update the state so we can share the search text and the replace text. 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. 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. Immutable Editor State The Draft.js model is built with immutable-js, offering an API with functional state updates and aggressively leveraging data persistence for scalable memory usage.
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. 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. Draft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API. I want to allow pasting only plain text without any HTML markup. There are three ways to paste text within the execCommand area: Ctrl + V. Construct content state from the array of block elements and the entityMap, and then update the editor state with it. I have a basic editor based on execCommand following the sample introduced here. The working code for this tutorial is contained within this repo. 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.
In this episode of learning-draft-js we’ll build something usefu - The functionality to search and replace strings.
0 kommentar(er)
