php - How to get input of Html editor in textarea using javascript -

please i'm working on project make html editor. downloaded program online trying modify need, i'm having difficulty inner html of edit using javascript or jquery output in textarea , input type can save database. shows output in html element not in textarea.

more explanation of need

1. 1 when key text in editor want return in hidden textarea.
2. 2 want able save in database.
3. 3 want editor have default text display [please start typing code here]

please have been giving me trouble complete work appreciate if can me or suggest method or program use in archive this. thank guys here 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 uncomment , see result</textarea>-->     </div>   </div> </div> 

j query-libery make 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 try using javasrcipt didn't work  //document.getelementbyid('outpt-hm').value = getelementsbyclassname("ace_text-input").innerhtml;  </script> 

perhaps try changing markdownviewer piece of code - if see alert , data expect can use value like. not tested, having never seen 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 see data here can stuff 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 ( of, not ) can have placeholder value - default value viewed when looking @ form - though not actual value of 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 handly have additions in 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>