Editors
Quilljs Editor Offical link Preview link
<div class="toolbar-box">
<div id="toolbar7"><span class="ql-formats">
<select class="ql-size">
<option value="small">Small</option>
<option selected="">Normal</option>
<option value="large">Large</option>
<option value="huge">Huge</option>
</select></span><span class="ql-formats">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
<button class="ql-underline">Underline</button>
<button class="ql-strike">Strike</button>
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button></span><span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button></span><span class="ql-formats">
<button class="ql-list" value="ordered">List</button>
<button class="ql-list" value="bullet">Bullet</button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button></span><span class="ql-formats">
<button class="ql-link">Link</button>
<button class="ql-image">Image</button>
<button class="ql-video">Video</button>
<select class="ql-color"></select>
<select class="ql-background"></select></span>
<!-- Add more options here--><span class="ql-formats">
<button class="ql-blockquote">Blockquote</button>
<button class="ql-code-block"></button></span><span class="ql-formats">
<button class="ql-align" value=""></button>
<button class="ql-align" value="center"></button>
<button class="ql-align" value="right"></button>
<button class="ql-align" value="justify"></button></span><span class="ql-formats">
<button class="ql-clean"></button></span>
</div>
<div class="quill-paragraph" id="editor7">
<p>There was a road along with that open place. When the tiger saw any man passing by he said to him, “Brother, here is a good bangle. I wish to give it to you. Don’t fear. lam old and infirm now. I now pray to God five times a day and doing it will be useful to you. Don’t fear, come to me and take other religious acts. This bangle is useless to me. It will be useful to you. Don’t fear, come to me and take this.”</p>
</div>
</div>
To use ace code you have to add the following script files
<!-- quill js -->
<script src="../assets/js/custom-quill.js"></script>
<script src="../assets/js/vendors/quill/dist/quill.min.js"></script>
<script src="../assets/js/vendors/quill/dist/quill.js"></script>
To use simple mde you have to add the following style files
<!-- quill-css -->
<link rel="stylesheet prefetch" href="../assets/css/vendors/quill/dist/quill.snow.css">
<link rel="stylesheet prefetch" href="../assets/css/vendors/quill/dist/quill.bubble.css">
CKeditor Offical link Preview link
<!-- Html code for display ckeditor -->
<textarea id="editor1" name="editor1" cols="30"
rows="10"><h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
<table align="right" border="1" cellpadding="5" cellspacing="0">
<caption><strong>Mission crew</strong></caption>
<thead>
<tr>
<th scope="col">Position</th>
<th scope="col">Astronaut</th>
</tr>
</thead>
<tbody>
<tr>
<td>Commander</td>
<td>Neil A. Armstrong</td>
</tr>
</tbody>
</table>
<p>Launched by a <strong>Saturn V</strong> rocket from <a href="#">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="#">NASA</a>'s Apollo program. The Apollo spacecraft had three parts:</p>
<ol>
<li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
<li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
<li><strong>Lunar Module</strong> for landing on the Moon.</li>
</ol>
<p>After being sent to the Moon by the Saturn V's upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="#">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="#">Pacific Ocean</a> on July 24.</p>
</textarea>
To use ck editor you have to add the following script files
<!--ckeditor js-->
<script src="../assets/js/ckeditor/ckeditor.js"></script>
<script src="../assets/js/ckeditor/styles.js"></script>
<script src="../assets/js/ckeditor/adapters/jquery.js"></script>
<script src="../assets/js/ckeditor/ckeditor.custom.js"></script>
Ace code Offical link Preview link
<div class="ace-editor" id="editor">
/* Sample JavaScript edit source */
// Define a module
var app = angular.module('app', ['ui.bootstrap']);
// Define a conroller.
app.controller('GrokController', ['$scope', '$filter',
function($scope, $filter) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.isOpened = false;
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.isOpened = true;
};
}]);
/* End of sample edit source */
</div>
To use ace code you have to add the following script files
<!-- ace code editor js -->
<script src="../assets/js/ace-editor/ace.js"></script>
<script src="../assets/js/ace-editor/ace-custom.js"></script>