How To Integrate Rich Text Editor to PHP/HTML Webpages Easily

Written by Pavan Kumar on September 18, 2009

Advertisements

Before writing the post, let me make it clear I am not targeting developers who are already experts in the area, but beginners who strive to insert a cool HTML rich text editor into the web pages they develop. Expert developers may have a look at other best options of free rich text editors at woork.

If you want to get a user input about something, a HTML form is the one which comes to help you and we wish to use a richtext editor when the desired user input is a long paragraph which itself is going to be a main page. You can see usage of such easy text editors in blog – be it any platform, different forums or any CMS would have such editor to make the text editing job easy.

I make use of Yahoo! rich text editor in this example as it could be integrated easily and provided enough functionalities to my need. Let me deal it in steps that can help any beginner without any special coding knowledge in different languages. Here I am not going to add confusion by providing lot of options, just follow the steps and you win.

1. In your HTML page, insert the below code in head section (between <head> and </head>)

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/skin.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>

2. In your body section (between <body> and </body>) open the HTML form where you want to insert this RTE.

<p class="yui-skin-sam">
<textarea name="myrichtext" id="myrichtext" ></textarea>
<script>
var myEditor = new YAHOO.widget.Editor('myrichtext', {
height: '300px',
width: '600px',
dompath: true, //Turns on the bar at the bottom
animate: true, //Animates the opening, closing and moving of Editor windows
handleSubmit: true
});
myEditor.render();
</script>
</p>

Adding the above code, will create a beautiful basic rich text editor as shown below.

easy integration of rich text editor on html webpages

3. Handling this rich text editor is damn easy. Treat it as if you are working with traditional <textarea> – current code above shows that the name used for this editor data is myrichtext. If you want to change, it make sure you are going to change it in all occurrences. The data can be used in forms like any normal html form in POST or GET method.

4. Optional: I did little variations in its actual appearance from above. I do not like to see the text "Text Editing Tools" at the top of the table. The text like Font Name and Size, Font Style etc did not suit well at that bigger size. So I removed the header text and decreased font size of tool names. If you too want to have it done, add the code below in between </script> and </p> in the second code snippet above (or anywhere "below" that should work, but not above). This is the same way as echotopic customization.

<style type="text/css">
.yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar h2 {
display: none;}
.yui-skin-sam .yui-toolbar-container .yui-toolbar-group h3 {
font-size: 62%; }
</style>

The resultant rich text editor layout after adding this code will be as below:

rich text editor for html or php modified

Note 1: I am not a developer and hence your comments for serious help might not be answered. Instead, visit any web developer forums in your arena and discuss with experts. The codes shared above may not be the most optimal ones (there may be minimalistic forms too), but they worked for me very well.

Note 2: Minor doubts can be discussed here, but sharing codes on comment form won’t work. Make use of online whiteboards.

Also read: Simple HTML contact form, Free webpage to pdf conversion, HTML & CSS for beginners

       

Subscribe to RSS Feed or Get updates on your inbox:

People who liked this also read:

7 Readers responded to this post

this one is great .perfectly written. much useful. thanks .keep sharing.

Insert Button is not working.

I used it in one of My PHP page but Insery Button is not working.

This is great present..:) thanks a lot:)

Nice Code…. very simple to learn..thanks…

thanks dear. it really works.

Am so pleased to come across this…. so much thanks. God bless

Leave Your Comments Below / Trackback

About The Author

    Pavan Kumar

    Pavan Kumar completed Engineering in Electronics and Communication in the year 2008. He is very enthusiastic and keen to work on different aspects of computer, internet and mobile related fields. The articles here reflect his creativity. This blog was started as a showcase of solutions for different problems and today it has got a good reputation in the blogosphere. Read More...

© 2014 - TechPavan.com. All rights reserved.

All content provided in this site are the property of TechPavan.com and is free for non-commercial usage. Read our Privacy Policy here.

Any kind content on this site cannot be reproduced in any form without permission of the author. We are not responsible for any loss or damage which may occur due to any of our content.

Site hosted on Bluehost powerful servers.