Htmlarea link



Keywords: htmlarea link
Description: The last couple days I spent time working on a new simple, lightweight, extensible HTML WYSIWYG editor that's built on top of jQuery. I know there are a ton of existing editors, but I couldn't seem

The last couple days I spent time working on a new simple, lightweight, extensible HTML WYSIWYG editor that's built on top of jQuery. I know there are a ton of existing editors, but I couldn't seem to find any with a truely simple, lightweight design that allowed for really easy extensibility. and that's built on top of jQuery to take advantage of the cross-platform capabilities that jQuery has to offer. I feel that I've come up with a really nice HTML editor component that has some pretty usefull extensibility points. Allow me to introduce you to jHTMLArea .

You can download jHtmlArea and some examples of using it over at the official project page on CodePlex: http://jhtmlarea.codeplex.com

To the right there's a screenshot of two instances of jHtmlArea in action. The first one is using the "default" configuration, and the second uses a couple of different custom options, including a completely custom "Save" button that's added using one of jHtmlArea's extensibility points.

It can be as simple as that to use jHtmlArea within your pages to turn any TextArea DOM Elements into nice jHtmlArea WYSIWYG Editors.

jHtmlArea makes it extremely simple to define your own custom set of Toolbar buttons; just in case you don't want to show the full set of "default" buttons.

You can easily specify them by name within an array that's passed in as one of the options specified when you call the "htmlarea" method:

This example will specify the same buttons displayed in the lower screenshot to the right; minus the "Save" button on the far right of the toolbar. I'll show you how to add this button in the next example.

One of the extensibility points that I was wanting to have in an HTML WYSIWYG editor is the ability to easily add any custom buttons to the toolbar. For instance, some times it may be nice to have a "Save" button in the toolbar to allow your users to easily save the contents of the editor.

Once the JavaScript code is entered to add the custom "Save" button, we then need to add the buttons display image to the website, and then include the necessary CSS to allow it to be displayed:

Well, the jHtmlEditor currently only comes with English text for all the button names / tooltips. However, it is extremely simple to specify your own text to use when calling the "htmlarea" to create jHtmlArea editors within the page. You set the Text to be displayed for each button by referencing it by "name". This is the same "name" that is used in the first example to specify which buttons are displayed in the toolbar.

It may be nice in some instances to get notified when the editor has finsihed loading in the page so you can perform some kind of action. This is also really simple to do.

Another thing is that the jQuery object doesn't directly expose the different jHtmlArea object's methods. However, you can use the "htmlarea" method to call any of them you need to. All you need to do is specify the method by name that you want to call and pass any additional parameters to the "htmlarea" method and it'll return the results.

The jHtmlArea object has a few more methods, you can find out what they are by referencing the Visual Studio JavaScript Intellisense File ("jHtmlArea-0.5.0-vsdoc.js") or the un-minified source code itself.

As you can see the jHtmlEditor has some really simple extensibility points. I hope you enjoy using this editor as much as I do. Also, if you have any suggestions/issues, please go to the official jHtmlArea project's Issue Tracker and let me know.






Photogallery Htmlarea link:


richtext_edit.gif


1_Open_form_tab.png


New Generate HTML Area with Direct Link Launched ...


Link Webcam: http://www.awi.de/NM_WebCam/livemovieP.html - Area 51 ...


Kentico CMS 6.0 Developer's Guide


CONTRIB-2730] HTMLAREA Editor custom plugin framework support ...


c# - Add an HTML area to a Winform Application - Stack Overflow


Migrate from Blogger (Blogspot) to WordPress without Losing SEO, Links


HTMLArea in Openbravo | Openbravo Blog


Chedeng's' eye vanishes, speed slows down | Inquirer News


Learning html & dhtml


House of travel mexico : Vufuhob


Bug #21546: htmlArea RTE: RTE fails to load due to security error ...


HTMLArea in Openbravo | Openbravo Blog


Sasank's PeopleSoft Log: Invoke PeopleCode Event from Javascript ...


Jennifer: June 2014


Moodle in English: TinyMCE vs HTMLArea


Erisin ES9007A 7 HD Capacitive 2Din Android 4.4.2 Car DVD GPS SAT ...


Email Folders Related Keywords & Suggestions - Email Folders Long ...


Jennifer: June 2014