Click here to Skip to main content
15,881,898 members
Articles / Programming Languages / Javascript

Building Your Own JavaScript Editor

Rate me:
Please Sign up or sign in to vote.
4.60/5 (3 votes)
25 Mar 2009CPOL3 min read 32.6K   498   12  
A step by step guide for implementing your JavaScript editor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Test RBM Editor - Done By Ramy Mostafa</title>
    <script type="text/javascript" src="RBM/RBM.js" ></script>
   <script type="text/javascript" src="RBM/RbmEditor.js" ></script>
   
    <script type="text/javascript">
    
    var editor;
    RBM.AddListener(window,'load',RbmInit);
    function RbmInit(){
     editor = new RBMEditor.Editor('oDiv')
    }
        function SetEditorCode()
        {
            
            
            var x = RBM.GetElement('oDivArea');
            x.value = editor.ToString();
            //var x = RBM.GetElementsByTagName(document,'div');
            //alert(x);
        }
        function SetEditorHTML()
        {
            
            
            var x = RBM.GetElement('oDivArea');
            editor.controlContent.innerHTML = x.value;
            //var x = RBM.GetElementsByTagName(document,'div');
            //alert(x);
        }
    </script>
</head>
<body>
<strong>
Sample Made By Ramy Mostafa
</strong>
<p><i>This sample is for the RBM Editor It has been test on IE 6,7, Firefox and Google Chrome, Hope you enjoy it</i></p>
<br />
<div id="testDiv">
    <a href="javascript:alert(editor.ToString());">Print Editor HTML</a>
    <a href="javascript:editor.ExecuteCommand(RBMEditor.EditorCommands.BOLD);">BOLD</a>
    <a href="javascript:editor.ExecuteCommand(RBMEditor.EditorCommands.ITALIC);">ITALIC</a>
    <a href="javascript:editor.ExecuteCommand(RBMEditor.EditorCommands.UNDERLINE);">UNDERLINE</a>
    <a href="javascript:editor.ExecuteCommand(RBMEditor.EditorCommands.BIG);">BIG</a>
    
    </div>
    <div id="oDiv" style="width:200px;height:200px;border:solid 2px black;">
    
    </div>
    <a href="javascript:SetEditorCode();">Get Code</a> <a href="javascript:SetEditorHTML();">Send Code To editor</a><br />
    <textarea id="oDivArea" rows="5" cols="5" style="width:200px;height:200px;">
    
    </textarea>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Egypt Egypt
Fun Coder Smile | :) My Job is my Hobby Smile | :)

Comments and Discussions