Web / JavaScript

How to create a WYSIWYG Text Editor - Part 2

by Libz
28 Dec 2015 at 08:52hrs | 3572 Views
This tutorial is a follow-up to "How to create a WYSIWYG Text Editor - Part 1".

In part one we created a rich-text editor which mainly uses the execCommand() method/function.

We used a "parent tag (in our case a div tag with the id body_txt) that is going to hold the editable content". The div has an attribute "contenteditable" set to "true".

<div id="editor_buttons">
<i class="fa fa-bold" style="color:#fff;" onclick="doBold()"></i>
<i class="fa fa-code" style="color:#fff" onclick="insertCode()"></i>
<i class="fa fa-italic" style="color:#fff" onclick="doItalic() "></i>
<i class="fa fa-align-left" style="color:#fff" onclick="doJustifyLeft()"></i>
<i class="fa fa-align-justify" style="color:#fff" onclick="doJustifyFull()"></i>
<i class="fa fa-align-center" style="color:#fff" onclick="doCenter()"></i>
<i class="fa fa-align-right" style="color:#fff" onclick="doJustifyRight()"></i>
<i onclick="doImage()" style="color:#fff" class="fa fa-file-image-o"></i>
<i class="fa fa-list-ul" style="color:#fff" onclick="doUl()"></i>
<i class="fa fa-list-ol" style="color:#fff" onclick="doOl()"></i>
<i class="fa fa-link" style="color:#fff" onclick="doLink()"></i>
<i class="fa fa-unlink" style="color:#fff" onclick="doUnLink()"></i>
<i class="fa fa-underline" style="color:#fff" onclick="doUnderline()"></i>
<i class="fa fa-undo" style="color:#fff" onclick="doUndo()"></i>

</div>

<div id="body_txt" contenteditable="true"></div>
Since the code above is from part 1 we are now going to add an input field for Title/Subject, a Save button and a div (<div id="form_response></div>) to hold response messages from JQuery  to complete our form.
We also have to add a hidden input field which we hold the formatted text from body_txt.

<form id="smart_editor">
<div>
Title/Subject <input type="text" name="subject" value="">
</div>
<div id="editor_buttons">
<i class="fa fa-bold" style="color:#fff;" onclick="doBold()"></i>
<i class="fa fa-code" style="color:#fff" onclick="insertCode()"></i>
<i class="fa fa-italic" style="color:#fff" onclick="doItalic() "></i>
<i class="fa fa-align-left" style="color:#fff" onclick="doJustifyLeft()"></i>
<i class="fa fa-align-justify" style="color:#fff" onclick="doJustifyFull()"></i>
<i class="fa fa-align-center" style="color:#fff" onclick="doCenter()"></i>
<i class="fa fa-align-right" style="color:#fff" onclick="doJustifyRight()"></i>
<i onclick="doImage()" style="color:#fff" class="fa fa-file-image-o"></i>
<i class="fa fa-list-ul" style="color:#fff" onclick="doUl()"></i>
<i class="fa fa-list-ol" style="color:#fff" onclick="doOl()"></i>
<i class="fa fa-link" style="color:#fff" onclick="doLink()"></i>
<i class="fa fa-unlink" style="color:#fff" onclick="doUnLink()"></i>
<i class="fa fa-underline" style="color:#fff" onclick="doUnderline()"></i>
<i class="fa fa-undo" style="color:#fff" onclick="doUndo()"></i>

</div>

<div id="body_txt" contenteditable="true"></div>
<input id="body" type="hidden" name="subject" value="">
<div>
<button type="button" class="btn btn-primary" id="save_btn">Primary</button>
</div>
<div id="form_response></div>
</form>

JavaScript for Saving/Submitting the completed form.

Before submitting the form, grab the all the formatted content from the body_txt div and pass it to the hidden input field:

<input id="body" type="hidden" name="subject" value="">

To archive this, use JavaScript as shown below using the JQuery library:

$("#save_btn").click(function(){
var body_html = $("#body_txt").html();
$("#body").val(body_html);
});

Finally submit the form, again using JQuery's serialize() function.
<script>
$(document).ready(function() {
$("#save_btn").click(function(){
var body_html = $(#body_txt).html();
$("#body").val(body_html);

//Evaluate and Submit form
$.post("your_processing_script.php", $("#smart_editor").serialize(), function(data) {
if (data === 'success') {
$("#form_response").html('<div class="success">' + data + '</div>');
} else {
$("#form_response").html('<div class="error">' + data + '</div>');
}
});
});
});
</script>
See: WYSIWYG Demo Source Code.
Source - accessing{Code}
More on: WYSIWYG, JavaScript, HTML



Chat Login

Register | Forgot password