Add multible wysiwig editors to use in one page

In this tutorial we will see how to add multible wysiwig editors, converting textareas to wysiwig editors. 

Dependecies: For this we will use CKeditor

CKEditor is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications. Its core code is written in JavaScript and it is developed by CKSource. CKEditor is available under open source and commercial licenses more here

First things first, we will need to import ckeditor so we are able to use it depending on what you are using you can call is as you want like so for example:

<script type="text/javascript" src="{{ asset('plugins/ckeditor-basic/ckeditor.js') }}"></script>

or use the CDN the currect version is 4.10.1

<script src="https://cdn.ckeditor.com/4.10.1/standard/ckeditor.js"></script>

add the textarea like so:

<textarea name="shortProfilePartnerOrganisation" class="form-control ckeditor" rows="5" id="shortProfilePartnerOrganisation"></textarea>

Than the js that makes it posible to add multible ckeditors like so

<script> 
// To make a text area with wysiwyg editor add a class to that textarea with name ckeditor
function transgormToWYSIWYG() {
var ckeditors = $('.ckeditor');
$.each(ckeditors, function (index, ckeditor) {
CKEDITOR.replace(ckeditor, {
wordcount: {
// Whether or not you want to show the Word Count
showWordCount: true,

// Whether or not you want to show the Char Count
showCharCount: true,

// Maximum allowed Word Count
// maxWordCount: 4,
// Maximum allowed Char Count
maxCharCount: 1000
}
});
});
}
</script>

Afterwards just use it we you need it with the js function we made right above.

transgormToWYSIWYG();