|
49 Projects
|
||||||||||
|
AsteroidsBlackjackBrowsergameChatCoinflipCryptFirst Person ShooterForumHangmanLightboxLogin SystemMath QuizMemoryObject Mouse EvadorPapiJumpPokerQuizRich Text Editor WYSIWYGSnakeSystem ExplorerThe Impossible QuizTic Tac Toe CalculatorCalendarClockColor PickerCustom MessageboxDictionaryImage EditorImage GeneratorImage SlideshowLink ActivationMessage SystemNewsletterNumber ConverterOnline KeyboardPaginationPoker Chance CalculatorProgress BarReaction TimerRSS FeedSearch EngineStarRatingStopwatchSyntax HighlighterText ReplacerURL ShortenerUser Management SystemVisitor Counter
|
||||||||||
 Basic concept For a long time, I thought that making a rich text editor was very difficult as there was few documentation and tutorials on how to do make one. Then I got a question by a user on DaniWeb on how to make one, and I decided to create my own project. Almost 99% of all rich text editors on the web are based on the principle of and inline frame, which is set to be editable. The user can edit this frame, but you need to provide buttons that triggers the events to bold text, add links, underline etc.  Interface The interface of the rich text editor we are going to make is simple and will have the following things:
 Programming We first start off with making our interface, the HTML is kept simple and clean. It has all the above menu elements. The element with the frame_holder id is where the iframe will be loaded using javascript (see next step): Code Snippet (Syntax highlighted) - Toggle Wrap <form action='' method='post' onsubmit='SaveRichTextEdit(); return true;'> <!-- The menu bar //--> <input type='button' value='Bold' onclick='FontEdit("bold");' /> <input type='button' value='Underline' onclick='FontEdit("underline");' /> <input type='button' value='Italic' onclick='FontEdit("italic");' /> <input type='button' value='Align center' onclick='FontEdit("justifycenter");' /> <input type='button' value='Add link' onclick='AddLink()' /> <!-- This is where the actual content (in HTML) of the rich text editor is stored: //--> <input type='hidden' name='rich_text_area_content' id='rich_text_area_content' value='' /> <!-- The edit frame, that the user uses to edit //--> <div id='frame_holder'></div> </form> Now we start off with making the function that load the frame into the frame holder: Code Snippet (Syntax highlighted) - Toggle Wrap function LoadRichTextEditor() { /* Retrieving the frame holder: */ var Frame_Holder = document.getElementById('frame_holder'); /* Creating iFrame element: */ var Frame = document.createElement("iframe"); /* Setting the name and id of the frame */ Frame.name = Frame.id = "RichEditArea"; /* Loading the frame into the frame holder: */ Frame_Holder.appendChild(Frame); /* Now for the most important part: setting the design mode on for the frame: */ /* Setting MTE_Frame design mode active */ RichEditArea.document.designMode="on"; /* Writing the iFrame content */ RichEditArea.document.open(); RichEditArea.document.write('<html><head><style type="text/css">body{ font-family:Arial; font-size:13px; }</style></head><body>'); RichEditArea.document.write('This is some text</body></html>'); RichEditArea.document.close(); /* Focussing the rich edit area when the function is done: */ RichEditArea.focus(); } /* Triggering the load function when the page is loaded: */ window.onload=function(){ LoadRichTextEditor(); } That was the hardest part! Now we only need to write the function that handles the commands (bold, italic etc...): Code Snippet (Syntax highlighted) - Toggle Wrap function FontEdit( Variable, Value ) { /* Executing command: */ RichEditArea.document.execCommand(Variable,"",Value); /* Focussing the rich text editor */ RichEditArea.focus(); } Then the last function, to add a link into the rich edit area: Code Snippet (Syntax highlighted) - Toggle Wrap function AddLink() { var link = prompt('Enter the URL:'); if (link == null) { link = 'http://www.webdevproject.com'; } FontEdit('CreateLink',link); } That was about it, but there are two more things I want to explain that you are probably wondering: How can I send the value of the rich text area with the form? Well, you need to create a function, that is triggered when the form is submitted. That function reads the content of the rich text area and sets that as value for an hidden input in your form, for example: Code Snippet (Syntax highlighted) - Toggle Wrap function SaveRichTextEdit() { /* Retrieving content: */ var content = RichEditArea.document.body.innerHTML; /* Cleaning out all tags (< and >) */ content = content.replace(/</g,"<").replace(/>/g,">"); /* Saving content: */ document.getElementById('rich_text_area_content').value = content; } How can I load text into the rich text area? In the LoadRichTextEditor() function, you need to change the content of the <body></body> tag within the frame, into whatever you want (watch out for double and single quotes!)  Using this code Extending this codeYou can also extend this code, by adding more rich edit options. Here is a full list of all ExecCommand variables: All command identifiers without an argument that do something with the current selection:
All command identifiers with an argument that do something with the current selection:
All command identifiers with an argument that insert something around the current selection:
All command identifiers that changes that do not fit in the above catagories:
DownloadYou can download the full sourcecode here: http://www.webdevproject.com/zips/RichTextEditor.zip  Comments  
 
New project: Math Quiz
2010-11-09 18:07:48 Read more... New project: Custom Messagebox 2010-11-06 19:10:50 Read more... New project: Visitor Counter 2010-11-01 21:39:04 Read more... New project: Image Editor 2010-11-01 21:37:27 Read more... New project: Image Generator 2010-11-01 21:33:05 Read more... |
