How to get input of Html editor in textarea using javascript

Question

Please I'm working on a project to make html editor. I downloaded a program online trying to modify it to my need, I'm having difficulty to get the inner html of the edit using javascript or jquery output it in textarea and input type so I can save it to my database. It only shows the output in html element but not in textarea.

MORE EXPLANATION OF WHAT I NEED

1. 1 when I key text in the editor I want it to return the in a hidden textarea.
2. 2 I want to be able to save the in my database.
3. 3 I want the editor the have default text to display LIKE [please start typing your code here]

Please this is what have been giving me trouble to complete my work I will appreciate if anyone can help me or suggest another method or program to use in archive this. Thank you guys here is the program

HTML

<link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/monokai_sublime.min.css">
<style class="cp-pen-styles">.ace-md{
  height: 300px;
}</style>

<div ng-app="app" class="container-fluid">
  <div ng-controller="ctrl" class="row">
    <div class="col-md-6">
      <h1>Markdown Editor</h1>

      <div ace-code-editor class="ace-md"></div>
    </div>
    <div class="col-md-6">
      <h1>Markdown Preview</h1>
      <div markdown-viewer></div>
<input type="text" markdown-viewer id="outpt-hm"></input>
<--!<textarea markdown-viewer id="outpt-hm"> TRY TO UNCOMMENT THIS AND SEE THE RESULT</textarea>-->
    </div>
  </div>
</div>

J QUERY-LIBERY TO MAKE IT WORK

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js"></script>

J QUERY SCRIPT

<script>
var app = angular.module('app', []);
app.controller('ctrl', [
    '$scope',
    function ($scope) {
        ace.config.set('basePath', '//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/');
    }
]);
app.directive('aceCodeEditor', [function () {
        return {
            link: function (scope, element, attrs) {
                scope.editor = ace.edit(element[0]);
                scope.editor.getSession().setMode('ace/mode/markdown');
                scope.editor.setTheme('ace/theme/monokai');
                scope.editor.getSession().on('change', function (e) {
                    scope.$emit('ace.editor.change');
                });
            }
        };
    }]);
app.directive('markdownViewer', [function () {
        return {
            link: function (scope, element, attrs) {
                scope.$on('ace.editor.change', function () {
                    element.html(marked(scope.editor.getValue()));
                    element.find('pre code').each(function (i, block) {
                        hljs.highlightBlock(block);
                    });
                    element.find('table').addClass('table');
                });
            }
        };
    }]);//HERE I TRY USING JAVASRCIPT BUT IT DIDN'T WORK  //document.getElementById('outpt-hm').value = getElementsByClassName("ace_text-input").innerHTML;  </script>

Answer 1

Perhaps you could try changing the markdownViewer piece of code like this - if you see an alert and the data is what you expect then you can use that value however you like. This is not tested, having never seen the editor before.

app.directive('markdownViewer', [function () {
    return {
        link: function (scope, element, attrs) {
            scope.$on('ace.editor.change', function () {

                var data=scope.editor.getValue();
                alert( 'If you see data here then you can do stuff with it!!!\n\n'+data );

                element.html(marked(data));
                element.find('pre code').each(function (i, block) {
                    hljs.highlightBlock(block);
                });
                element.find('table').addClass('table');
            });
        }
    };
}]);

HTML form elements ( some of, not all ) can have a placeholder value - the default value viewed when looking at the form - though it is not the actual value of the field.

examples:

<textarea id='bob' name='bob' cols=80 rows=10 placeholder='The placeholder text here'></textarea>

<input type='text' id='sue' name='sue' placeholder='another placeholder' />

You might find it handly to have additions in your stylesheet also.

<style>
    ::-webkit-input-placeholder {
        font-size:1em;
        font-style:italic;
        font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
       color:black
    }
    :focus::-webkit-input-placeholder{ 
        color:transparent;
    }
    :-moz-placeholder {
        font-size:1em;
        font-style:italic;
        font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
       color:black 
    }
    :focus:-moz-placeholder{
        color:transparent;
    }
    ::-moz-placeholder {
        font-size:1em;
        font-style:italic;
        font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
       color:black
    }
    :focus::-moz-placeholder {
        color:transparent;
    }
    :-ms-input-placeholder {
        font-size:1em;
        font-style:italic;
        font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
       color:black
    }
    :focus:-ms-input-placeholder {  
        color:transparent;
    }
</style>