I have developed a small script, where you can insert formats to the text and spaces between others and all the actions of the buttons are applied to the container div editable
where it is there where the texts / article will be written.
Everything I type in div editable
, goes to textarea
, which will allow me to later insert that information into the database.
Note: The
textarea
will always remain hidden, applying the classdisplay none
for practice and development reasons is visible, it is important to remember that it is in the `editable div' where the articles/texts etc. are written.
This whole process works wonderfully from the div editable
to the textarea
.
Now, the problem that you presented, is that the data that I receive in the textarea
is not automatically displayed in real time in the div
preview.
It is not displayed at the same time, I have to write something in it textarea
to display the data in the preview, apparently there is a blockage when passing this information to div
the preview container.
The process that I want to apply is the following: The information from the information that he has must div editable
pass in the same automatic way and in real time to where it is going to be displayed how his writing is turning out, similar to what happens here on StackOverflow, which shows a preview of what you're asking about.textarea
textarea
div -> preview
This is my jQuery code:
$(function() {
let htmlDiv = $("#editor");
htmlDiv.on("keyup", function(e) {
$("#textarea").html(htmlDiv.html());
});
$("#textarea").html(htmlDiv.html());
$('.editor-preview').keyup(function(){
var value = $(this).val();
var contentAttr = $(this).attr( 'class' );
$( '.' + contentAttr + '' ).html(value);
})
});
How do I fix this clog that exists in the data output of the . preview div class="editor-preview></div>
?
Running code: http://jsfiddle.net/rpvthc4u/4/
When you change the text of
#editor
only the text of changes#textarea
because there is no event ofkeyup()
.You could force that when you change the value in the
#editor
execute the function of thekeyup()
.I have created this snippet so that you can see that if you write in
#editor
it, it will copy the text both in it#textarea
and in it.editor-preview
.