text-editor.php

File Type: php File Location: monofiles/ File name: text-editor.php
<?php
    
include_once 'data_connect.php'
?>
<!-- text editor controls -->
            
            <div id="editControls">
                <div id="disable" class="hide"></div>
                <span id="toggle-code" title="Show html code" class="">‹ / › html</span>
                <span id="update" class="hide" title="Show text">› \ ‹ html</span>
                <a data-role="bold" href="javascript:void(0)" class="ed-control" title="bold"><span class="ed ed-bold">B</span></a>
                <a data-role="italic" href="javascript:void(0)" class="ed-control" title="italic"><span class="ed ed-italic">I</span></a>
                <a data-role="underline" href="javascript:void(0)" class="ed-control" title="underline"><span class="ed ed-underline">U</span></a>
                <a data-role="h1" href="javascript:void(0)" class="ed-control" title="heading 1"><span class="ed">h1</span></a>
                <a data-role="insertUnorderedList" href="javascript:void(0)" class="ed-control" title="unordered list"><span class="ed ed-list-ul">ul</span></a>
                <a data-role="p" href="javascript:void(0)" class="ed-control" title="paragraph"><span class="ed">p</span></a>
    <a data-role="createLink" href="javascript:void(0)" class="ed-control" title="link"><img class="ed-img" src="images/link.png"></a>
    <a data-role="unlink" href="javascript:void(0)" class="ed-control" title="unlink"><img class="ed-img" src="images/unlink.png"></a>
    <a data-role="foreColor" href="javascript:void(0)" class="ed-control" title="font color"><span class="ed ed-color">A</span></a>
    <a data-role="insertImage" href="javascript:void(0)" class="ed-control" title="image"><img class="ed-img" src="images/img.png"></a>
                <a data-role="removeFormat" href="javascript:void(0)" class="ed-control" title="format remove"><span class="ed"><i>T</i><sub style="font-size:11px">x</sub></span></a>
                <?php if (isset($oscategory)) : ?><a data-role="insertHorizontalRule" href="javascript:void(0)" class="ed-control" title="excerpt limit"><img class="ed-img" src="images/excerpt.png"></a>
    <?php endif ?>
            </div>
        </div>
        
                
        <div id="page" class="nocontent">
            
            
            <!-- Text editor -->
            <div class="newpageleft">
                <div id="editor-container">
                    <div id="editor" contenteditable></div>
                <script type="text/javascript">
                    window.onload = function() {
                        var _code = document.getElementById("output").value;
                        document.getElementById("editor").innerHTML = _code;
                    }
                </script>
                <script type="text/javascript">
                        function update_output() {
                        var editable_content = document.getElementById("editor").innerHTML;
                        document.getElementById("output").value = editable_content;
                    }
                    
                    var edtr = document.getElementById("editor");
                    edtr.onkeyup = function() { update_output(); warning(); }
                    edtr.onpaste = function() {warning();}
                    edtr.onblur = function() {update_output();}
                    edtr.ondrop = function(event) {event.preventDefault();}
                            
                        var elem = document.getElementsByClassName("ed-control");

                        for(var i = 0; i < elem.length; i++){ 
                        elem[i].onclick = function(){
                        var th = this.getAttribute("data-role");
                        switch(th) {
                        case "h1":
                        case "p":
                          document.execCommand("formatBlock", false, th);
                          break;
                        case "createLink":
                            document.execCommand(th, false, prompt("Link url:","http://"));
                        break;
                        case "insertImage":
                            document.execCommand(th, false, prompt("Insert image url:","http://"));
                        break;
                        case "foreColor":
                            document.execCommand("styleWithCSS",false,true);
                            document.execCommand(th, false, prompt("Font color:","yellow"));
                        break;
                       default:
                        document.execCommand("styleWithCSS",false,false);
                        document.execCommand(th, false, null);
                        warning();
                        break;
                            }
                      update_output();
                      
                        }
                    }    
                    </script>                              
        <script type="text/javascript">
            document.getElementById("toggle-code").onclick = function()    {
                
                document.getElementById("output-container").setAttribute("class","");
                document.getElementById("editor").setAttribute("class","hide");
                this.setAttribute("class","hide");
                document.getElementById("disable").setAttribute("class","");
                document.getElementById("update").setAttribute("class","");
            }

            document.getElementById("update").onclick = function() {
                
            var content = document.getElementById("output").value;
            document.getElementById("editor").innerHTML = content;
            this.setAttribute("class","hide");
            document.getElementById("output-container").setAttribute("class","hide");
            document.getElementById("editor").setAttribute("class","");
            document.getElementById("disable").setAttribute("class","hide");
            document.getElementById("toggle-code").setAttribute("class","");
        }
        </script>
        <div id="output-container" class="hide">
        <textarea name="content" id="output" form="mainform"><?php
         
print (isset($html_content)) ? load_htm($html_content) : load_xml($xmlcontent)
        
?></textarea>
    </div>
</div>