JavaScript Integrate CKEditor in Html Page

Today, We want to share with you JavaScript Integrate CKEditor in Html Page.In this post we will show you Integrate CKEditor in Html Page using JavaScript, hear for Adding a WYSIWYG HTML Editor using JavaScript we will give you demo and example for implement.
In this post, we will learn about Embed CKEditor In HTML Page Using JavaScript with an example.

The new toolbar utility box like as a all the new ckeditor, which you can more find in your latest CKEditor distribution new package, and makes simple configuring an level accessible toolbar a breeze. and so as well as It is the most right recommended simple way to set up new the editor toolbar. all the You can use it to change all new the order of toolbar groups level, select table and deselect buttons new level, or break the toolbar into rows.

implementation ckeditor in html example

index.html

  
  
 .footer {
    background: #061D25;
    padding: 10px 0;
}

.footer a {
    color: #70726F;
    font-size: 20px;
    padding: 10px;
    border-right: 1px solid #70726F;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.footer a:first-child {
    border-left: 1px solid #70726F;
}

.footer a:hover {
    color: white;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.cdata{text-align:center;}
  


Integrate CKEditor in Html Page using JavaScript
Compare javascript libraries to implement rich text editor,The best web text editor for everyone.
<h1>MY SERVICES </h1>

<p><h2><span class="ez-toc-section" id="Free_Online_Difference_Tools"></span><a class="demo-css" href="https://www.pakainfo.com" target="_blank" rel="nofollow">Free Online Difference Tools</a><span class="ez-toc-section-end"></span></h2></p>

<h3><span class="ez-toc-section" id="Difference_Tools_Compare_Two_texts_Online"></span>Difference Tools : Compare Two texts Online<span class="ez-toc-section-end"></span></h3>
 
<h2><span class="ez-toc-section" id="Free_Crop_and_Resize_Images_Online"></span><a class="demo-css" href="https://www.pakainfo.com" target="_blank" rel="nofollow">Free Crop and Resize Images Online</a><span class="ez-toc-section-end"></span></h2>

<h3><span class="ez-toc-section" id="The_free_online_Fotor_Photo_Cropper_can_help_you_to_crop_image_online_to_the_exact_size_you_want"></span>The free online Fotor Photo Cropper can help you to crop image online to the exact size you want.<span class="ez-toc-section-end"></span></h3>

<h2><span class="ez-toc-section" id="Free_Email_Checker"></span><a class="demo-css" href="https://www.pakainfo.com" target="_blank" rel="nofollow">Free Email Checker</a><span class="ez-toc-section-end"></span></h2>

<p>A simple tool to check whether an email address exists.

Email Verifier - Verify Email Address For Free With Our Verifier Tool : pakainfo Tools</p>

<h2><span class="ez-toc-section" id="HTML_CSS_JavaScript_MinifierMaxifier"></span><a class="demo-css" href="https://www.pakainfo.com" target="_blank" rel="nofollow">HTML, CSS & JavaScript Minifier/Maxifier</a><span class="ez-toc-section-end"></span></h2>

<p>Free web-based tool to minify HTML and any CSS or JS included in your markup.</p>

index.js

[html]
tinymce.init({
selector: ‘textarea’,
height: 200,
theme: ‘modern’,
plugins: [
‘advlist autolink lists link image charmap print preview hr anchor pagebreak’,
‘searchreplace wordcount visualblocks visualchars code fullscreen’,
‘insertdatetime media nonbreaking save table contextmenu directionality’,
’emoticons template paste textcolor colorpicker textpattern imagetools codesample toc’
],
toolbar1: ‘undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image’,
toolbar2: ‘print preview media | forecolor backcolor emoticons | codesample’,
image_advtab: true,
templates: [
{ title: ‘Test template 1’, content: ‘Test 1’ },
{ title: ‘Test template 2’, content: ‘Test 2’ }
],
content_css: [
‘//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’,
‘//www.tinymce.com/css/codepen.min.css’
]
});
[/html]