HTML div text to save and display

问题

The following is my editor code, when the user presses 'show editor text' button, the text in the div tag has to be saved and the same has to be displayed on the same page. How can I achieve this in HTML?

<!DOCTYPE html>
<html>
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 7%;
        left: 0;
    }
</style>
</head>
<body>

<div id="editor">
blah blah blah!
</div>

<script src="U:\hyd\code\JS\ace-builds-master\ace-builds-master\src-noconflict\ace.js"       type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/cobalt");
    editor.getSession().setMode("ace/mode/gc");
</script>


<button type= "button" style="position: absolute; left: 10%; bottom: 2%;" id="execute"  onclick="window.open('http://149.77.164.100:8180/FirstServlet/mygeco','_top','resizable=yes')">Click  to execute</button>

<button type= "button" style="position: absolute; left: 25%; bottom: 2%;" id="editortxt"     onclick="showstuff('editor');">Show editor text
</button>

</body>
</html>

----------------------------------EDIT---------------------------------

var edit = ace.edit("editor");
var code = edit.getSession().getValue();
window.open(code, _top);

added the above code, yet no output. I want to display the code on a new window, and then save it.

回答1:

Couldn't Understand the way your editor behave

Considering that you want to save the text on one button click & display the test latter on

add the below button to you html on click of this button your editor content would be saved in a variable and editor will be blank

    <input type='button' style="position: absolute; left: 20%; bottom: 2%;" id='save' value="Save"/>

Onclick of the below button the saved content would be displayed back

    <button type= "button" style="position: absolute; left: 25%; bottom: 2%;" id="editortxt"  >Show editor text
    </button>



    <script type='text/javascript'> 
     var StoreEditorContent;  //declare a variable to save Content

      document.getElementById('save').addEventListener("click", SaveText);  // adding event listner for onclick for Saving text

    function SaveText(){

       StoreEditorContent = document.getElementById('editor').innerHTML; // Save the Content into 
       document.getElementById('editor').innerHTML = ""; // to blank the editor Content

    }





      document.getElementById('editortxt').addEventListener("click", ShowText);  // adding event listner for onclick for Saving text

    function ShowText(){

       document.getElementById('editor').innerHTML = StoreEditorContent ; // Display  the Content into  editor

    }

    </script>

来源：https://stackoverflow.com/questions/21745712/html-div-text-to-save-and-display

标签

javascript

html

css

ace-editor