![]() The tool also requires CSS to style parts of the interface. Then you can reference it and the required jQuery support like this: In order to use this tool, you must download a copy of MarkItUp there isn’t any hosted site. You can add attributes to control the precise number of rows and columns the editor supports like this: For example, when you enter the tags required to format HTML directly, you can see the result of that markup as output from the editor.Ĭreating the editor begins with a tag. You can configure MarkItUp so that it actually acts as a markup editor, so you can create markup and then view the output of that editor. MarkItUp is a jQuery plug-in that provides full text editing capabilities. One of the most popular APIs online is jQuery UI (and the underlying requirement, jQuery). Even if you use a local copy of the API, it does take a while to download to the user’s machine.ĭocumentation: Tiny MCE Wiki Documentation However, the code is a little on the large size. TinyMCE’s main advantages are that it’s self-contained and easy to use. The File menu contains an option for printing the formatted text as a default, but you can add other options to it by using plug-ins. You use standard POST methods to send the formatted output back to the server. Figure 2 shows the output you get for your efforts: You can use the same kinds of selectors that you use with CSS3, so there isn’t really any learning curve. The call to tinymce.init() with a selector value is all you need. Here’s the simplest script you can write to make TinyMCE functional. However, you can obtain a reasonably nice editor without doing much at all. There are all sorts of ways in which you can modify the functionality of TinyMCE, which include the use of plug-ins. As with most APIs, you can download your own copy of the code or use a hosted version as shown here. Adding support for TinyMCE consists of a simple tag in the, much as you would use for any other API. One of these tags is selected as part of the example script, the other isn’t. TinyMCE is easy to add to an application. The user also has access to a host of additional editing features through the menu. The toolbar includes basic editing features. There’s no third party support for this API, but really, it’s not the sort of editor that would attract much third-party support.Īll that many users really want is a simple editor that allows them to add some basics, such as bold type, and to use styles, such as headings. Its main disadvantages are that it may be too simple the API lacks functionality and it’s really hard to add new features without some programming experience of your own. The main advantages of this API are simplicity, small code size, and ease of use. Want to put some of the text in a blockquote? Switch to HTML and do it manually. If your user doesn’t see a required formatting tool, it’s easy to add the HTML to accommodate it by typing in the tags directly. When you click that icon, you switch the HTML view. That icon is unique amongst the editors reviewed in this article. Notice the magnifying glass icon at the end of the buttons. When you load the page, you see an extremely basic editor like the one shown in Figure 1. That’s it! This is all you need to use the widgEditor. ![]() You download the API to your local drive and add links to the required CSS and script as shown here. There’s no hosted site for this API, which makes sense because it’s so incredibly small. You must include this attribute or else the widgEditor won’t do anything. You start with a like the one shown here: Of all the editors in this article, widgEditor is also the simplest to add to your application. The widgEditor is meant to be extremely light (only 33.4 KB), simple to use, and efficient. Sometimes all you really need is the bare minimum. The following five free JavaScript libraries make it much easier to add a text editor to your application And ensure that it’s software that your users want to use. Much of human communication occurs beneath the surface in subliminal ways that bold or italics text can help a user express.īut who wants to create this functionality from scratch? Adding graphics, hyperlinks, and table support only makes the communication that much better.Īdding rich text to your application makes it possible for users to add emphasis or nuance to the meaning of their words. ![]() However, most of us expect to communicate in text or message windows with rich text editing features such as bold, italic, color, and specific font usage. For example, you can use one to add a quick note or a service request. The plain text editors that most APIs provide are fine for some purposes. ![]() These five libraries make it plug-and-play simple to add word processing functionality to your Web applications. Adding rich text editing to your HTML5 or JavaScript application is quite doable and it doesn’t have to cost you a dime.
0 Comments
Leave a Reply. |