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 when I key text in the editor I want it to return the in a hidden textarea.
2 I want to be able to save the in my database.
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>

@daniel is there no any other way to archive this please i really need it to get done my work i have no time to learn it now but sure i will do in future — CodeLab
– CodeLab, Commented Jan 28, 2016 at 10:43

Professor Abronsius · Accepted Answer · 2016-01-28 11:24:05Z

2

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>

edited Jan 28, 2016 at 11:24

answered Jan 28, 2016 at 10:54

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

CodeLab Over a year ago

It worked this is pretty good but the default message solution not solved

Professor Abronsius Over a year ago

The default message? I presume you mean placeholder?

CodeLab Over a year ago

Do i need to do it this way to get it inside the textare element.value(outpt-hm(data)); or document.getElementById('outpt-hm').value = data ?

Professor Abronsius Over a year ago

whichever works - the latter is probably just as easy so go for that

CodeLab Over a year ago

I go for this and it worked 1document.getElementById('outpt-hm').value = data`

|

Adrian Mole · Accepted Answer · 2024-03-09 07:22:43Z

-1

I’ve been using this component for my projects:

<html>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<div id="editor" style="width: 480px;"></div>

<p><input type='button' value='Get data' id="btn"></p>

<script>
let editor = jSuites.editor(document.getElementById('editor'), {
    allowToolbar: true,
    value: '<b>This is a basic example...</b><br><br><br><br>'
});

btn.addEventListener('click', () => {
    alert(editor.getData())
})
</script>
</html>

Here's the link if you're interested: https://jsuites.net/docs/javascript-html-editor

edited Mar 9, 2024 at 7:22

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Mar 7, 2024 at 16:31

Gessiel Silva

113 bronze badges

Collectives™ on Stack Overflow

How to get input of Html editor in textarea using javascript

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related