Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    hgs
    hgs is online now
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    81
    Thanks
    3
    Thanked 5 Times in 5 Posts

    nanoEditor ; just an other Editor

    Everything you need, except the icons, is down below.
    A working example can be found at http://hgsweb.de
    I tested this with
    IE10,9,8, Opera 12.16, Safari 5.1.7, Firefox 22, Chrome 28


    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>nanoEditor</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        </head>
        <body>
            <b>Just click in a cell and the editor will open <br>
            Everything you need is within the source of this page </b><p>
            <table border='1' id='editTable'>
                <tr><th>------------Head1----------------</th><th >------------------Head2----------------------</th></tr>
                <tr><td>ffffffffffffff</td><td >bbbbbbbbbb</td></tr>
                <tr><td>ffffffffffffff</td><td >bbbbbbbbbb</td></tr>
                <tr><th>On sale today</th><th > Dear Diary </th></tr>
                <tr><td>ffffffffffffff</td><td >bbbbbbbbbb</td></tr>
            </table><p>
            <div id="divdiv">click <b>me</b> here </div>
        </body>
    </html>
    
    <script>
        /*!
         * nanoEditor.js
         * http://hgsweb.de/
         * MIT licensed
         *
         * based on work done in 
         * 
         * openwysiwyg at  http://openwebware.com/ 
         * TyniEditor  at http://www.scriptiny.com/2010/02/javascript-wysiwyg-editor/
         * and documentation found at http://help.dottoro.com/larpvnhw.php
         * 
         * Copyright (C) 2013 Heinrich Schweitzer http://hgsweb.de/
         * 
         */
        function createEditor() {
            'use strict'
    
            var div, docx, d, t, iframe, uidiv, storedSelections, innerHTML = '';
    
            d = new Date();
            t = d.getTime();// used to make ids  somehow 'unique' 
            div = document.createElement('DIV');
            uidiv = div;
            document.body.appendChild(div);
            div.style.border = '1px solid blue';
            div.id = 'Div';
            div.innerHTML = "<table> <tr id=" + t + "saveselect class=menuRow>" +
                    "<td  id=" + t + "save><img src='images/save_on.gif' alt=save title='save&close'></td>\n\
                    <td id=" + t + "bold > <img src='images/bold_on.gif' alt='bold' title='Bold'></td>" +
                    "<td id=" + t + "italic><img src='images/italics_on.gif' alt='italics' title='Italics'></td> " +
                    "<td id=" + t + "under><img src='images/underline_on.gif' alt='underline' title='underline'></td> " +
                    " <td><select id=" + t + "Font name=sel size=1>\n\
                          <option > </option> \n\
                          <option value=Courier selected>Courier</option> \n\
                          <option value=Arial>Arial</option> \n\
                          <option value=Helvetica >Helvetica</option> \n\
                          <option value=Times >Times</option> \n\
                           </select>  \n\</td> \n\
                     <td> <select id=" + t + "Size name=sel size=1>\n\
                           <option > </option> \n\
                          <option value=1>1</option> \n\
                          <option value=2>2</option> \n\
                          <option value=3 selected>3</option> \n\
                          <option value=4>4</option> \n\
                          <option value=5>5</option> \n\
                          <option value=6>6</option> \n\
                          <option value=7>7</option> \n\
                           </select>  \n\
                            </td>\n\
                            <td>\n\
                                <span id=" + t + "-black style='background:black'>&nbsp;&nbsp;&nbsp;</span>\n\
                                <span id=" + t + "-red  style='background:red'>&nbsp;&nbsp;&nbsp;</span>\n\
                                <span id=" + t + "-green style='background:green'>&nbsp;&nbsp;&nbsp;</span>\n\
                                <span id=" + t + "-blue style='background:blue'>&nbsp;&nbsp;&nbsp;</span></td>" +
                    "<td  id=" + t + "close style='color:red;font-weight:bold;'><img src='images/close.jpg' alt=close title='close'></td>" +
                    "</tr>\n\
                    <tr><td colspan = '8'> <iframe id =" + t + "nanoContent src = ''> </iframe></td></tr> </table>";
    
            document.getElementById(t + 'saveselect').onmouseover = SaveSelection;
            document.getElementById(t + 'bold').onclick = bold;
            document.getElementById(t + 'italic').onclick = italic;
            document.getElementById(t + 'under').onclick = under;
            document.getElementById(t + 'save').onclick = saveContent;
            document.getElementById(t + '-black').onclick = foreColor;
            document.getElementById(t + '-red').onclick = foreColor;
            document.getElementById(t + '-green').onclick = foreColor;
            document.getElementById(t + '-blue').onclick = foreColor;
            document.getElementById(t + 'close').onclick = closeEditor;
            document.getElementById(t + 'Size').onchange = fontSize;
            document.getElementById(t + 'Font').onchange = fontName;
    
            iframe = document.getElementById(t + 'nanoContent');
    
    
            docx = iframe.contentDocument;
            docx.open();
            docx.write('');
            docx.close();
            docx.body.contentEditable = true;
            docx.contentEditable = true;
            uidiv = div;
            uidiv.style.display = 'none';
            div.onclick = stopBubble; // keep all (click-)events inside the editor 
    
            function saveContent() {
                var innerHTML = iframe.contentDocument.body.innerHTML;
                var node = uidiv.parentNode;
                uidiv.style.display = 'none';
                document.body.appendChild(uidiv);
                node.innerHTML = innerHTML;
            }
    
            function bold() {
                RestoreSelection();
                iframe.contentDocument.execCommand('bold', false, null);
            }
    
            function italic() {
                RestoreSelection();
                iframe.contentDocument.execCommand('italic', false, null);
    
            }
            function under() {
                RestoreSelection();
                iframe.contentDocument.execCommand('underline', false, null);
            }
            function foreColor() {
                RestoreSelection();
                iframe.contentDocument.execCommand('foreColor', false, this.id.split('-')[1]);
            }
            function fontSize() {
                if (this.selectedIndex >= 0) {
                    iframe.contentDocument.execCommand('fontSize', false, this.options[this.selectedIndex].value);
                }
            }
            function fontName() {
                if (this.selectedIndex >= 0) {
                    iframe.contentDocument.execCommand('fontName', false, this.options[this.selectedIndex].value);
                }
            }
            function stopBubble(e) {
                if (!e) {
                    e = window.event;
                }
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true;
                }
            }
            function SaveSelection() {
                if (iframe.contentDocument.getSelection) {  // all browsers, except IE before version 9
                    var selection = iframe.contentDocument.getSelection();
                    if (selection.rangeCount > 0) {
                        storedSelections = selection.getRangeAt(0);
                    }
                } else if (iframe.contentDocument.selection) {   // Internet Explorer
                    var range = iframe.contentDocument.selection.createRange();
                    storedSelections = range.getBookmark();
                }
            }
            function RestoreSelection() {
                if (iframe.contentDocument.getSelection) {  // all browsers, except IE before version 9
                    iframe.contentDocument.getSelection().removeAllRanges();
                    iframe.contentDocument.getSelection().addRange(storedSelections);
                } else if (iframe.contentDocument.body.createTextRange) {    // Internet Explorer
                    var rangeObj = iframe.contentDocument.body.createTextRange();
                    rangeObj.moveToBookmark(storedSelections);
                    rangeObj.select();
                }
            }
            function closeEditor() {
                var node = uidiv.parentNode;
                if (uidiv.style.display !== 'none') {
                    uidiv.style.display = 'none';
                    document.body.appendChild(uidiv);
                    node.innerHTML = innerHTML;
                }
            }
            function setContent(content) {
                var docx = iframe.contentDocument;
                docx.open();
                docx.write(content);
                docx.close();
                docx.body.contentEditable = true;
                docx.contentEditable = true;
                uidiv.style.display = '';
            }
            function attacheEditor(obj) {
                var val;
                closeEditor();
                val = obj.innerHTML;
                innerHTML = val;
                obj.innerHTML = '';
                obj.appendChild(uidiv);
                setContent(val);
            }
            return {
                closeEditor: closeEditor,
                attacheEditor: attacheEditor
            }
        }
    
    ////////////////////////////////////////////////////////////
    ///////////////////  Main usage ///////////////////////////
    ///////////////////////////////////////////////////////////
    
        nanoEdit = createEditor();
        editTable('editTable', nanoEdit);
    
        divdiv = document.getElementById('divdiv');
        divdiv.onclick = function() {
            nanoEdit.attacheEditor(divdiv)
        };
        /******** 
         *    will glue tabel cells with editor         
         ********/
        function editTable(id, editor) {
            var td, parent, et = document.getElementById(id);
            et.onclick = function(e) {
                if (!e) {
                    e = window.event;
                }
                td = (e.target) ? e.target : e.srcElement;
                function locateTd(td, id) {
                    if (td.tagName !== 'BODY') {
                        if (td.tagName === "TD") {
                            // cell within the right table ?
                            //       td    row         tbody     table
                            parent = td.parentNode.parentNode.parentNode;
                            if (parent.tagName === 'TABLE' && parent.id === id) {
                                return td;
                            }
                        }
                        td = locateTd(td.parentNode, id);
                    } else {
                        td = '';
                    }
                    return td;
                }
                td = locateTd(td, id);
                if (td) {
                    editor.attacheEditor(td);
                }
            }
        }
    </script>

  • #2
    New Coder
    Join Date
    Jul 2013
    Posts
    48
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Wrote it as some sort of assignment or for commercial purposes???

  • #3
    hgs
    hgs is online now
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    81
    Thanks
    3
    Thanked 5 Times in 5 Posts
    I wrote this because I will need something like this and for the fun of it
    and to give back something to the community.

    Use it, as is and have fun

    And a great source for learning was and is also this

    Learning JavaScript Design Patterns

    http://addyosmani.com/resources/esse...patterns/book/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •