When working on expanding your Form, many users love how TinyMCE (The default Editor used in all Brilliant Directories forms) covers their needs. Still, you can always extend the flexibility of the BD system by adding your own Editor. On this post I will be giving a step by step tutorial on how to extend your BD system to include other Editors. For our example, we will use the CKEditor but you can use Froala and any other and it will work. So let's begin:




1. On your backend Dashboard go to Toolbox -> File Manager




2. On the File Manager, click on Upload:




3. On the Upload Page, click on the Choose File button and then proceed on looking for the CKEditor zipped file you downloaded from the CKEditor Site. Select the zipped file and Upload it.



4. After it uploads, click on the link to go back and then look for the uploaded ckeditor zipped file on your File Manager. Select the file and then click on Extract.






5. After everything is extracted, you should see the folder called ckeditor on your File Manager. We this, you have finished the uploading part.



6. We now go back to the backend Dashboard and click on Toolbox -> Widget Manager



7. On the Widget Search box, look for footer. You will find a couple of widgets, customize the Website - Main Footer Scripts widget, this is the one we will be editing. After clicking on the customize button and you have it on your My Widgets list, click on the Edit button for it.



8. After the Website - Main Footer Scripts is opened, go to the last Text box called JavaScript Code and add the following code to it:


 

<script src="/ckeditor/ckeditor.js"></script>

 


The value of the SRC mentioned above is a reference to where you uploaded the ckeditor. If we follow this guide, it should be in the same place. Now save the widget and we have finished including the ckeditor to the system. Now we can use it on any form that calls for it.


9. To test the new CKEditor, let's open a Form that uses TinyMCE, for this let's go to Toolbox -> Form Manager.



10. Now let's select the About Details form (First on the list). After selecting it, we should see all the fields it uses to the right.



11. Now, if we scroll down a bit we will find a Field that uses TinyMCE.



12. We modify the DIV Class from tinymce to ckeditor and save the Form by clicking on the Save Changes button at the top of the form field list.




13. If we go to the Contact Details of a member to test this new change, we'll see we are now using the ckeditor like on one of the images below:






And with this, we have now uploaded, setup and integrated CKEditor to our system. We can now use either TinyMCE or CKEditor for any field in a form we wish. You can add as many other Editors as you wish by going through this steps. Up to now, we have learned how to add editors to our system, but, what happens when you want to customize them. What happens when you only want to show an exact amount of buttons on your editor. What happens when you do not want the clients to add images, videos, flash and other, but want them to only have button to edit and customize their text. Some partners do not want to show all buttons on the editor and they are right to think so, since too many buttons confuses members and it looks complicated.


So this is the part where we ask: How can I customize our text editors. For example, for CKEditor, we would go to their Documentation Page and look at the examples mentioned there. All Text editors offer typically two options to configure the buttons, a group button option and a specific button option. The group button option offers a way to show or hide several buttons that are grouped by their functionality. This way, hiding or showing the "File group" for example, would hide or show all buttons related to uploading files, downloading files, searching for files and more. With the following example, we will configure 4 groups for CKEditor to show instead of the full blown options it offers by default. To do this we go to the Website - Main Footer Scripts as mentioned in Step 8 above and then we go to the last Text box called JavaScript Code and add the needed code as mentioned in the CKEditor Documentation page. The code we will add for this example is the following:


 

<script>
CKEDITOR.replace( 'theAbout', {
	toolbarGroups: [
		{ name: 'document',	   groups: [ 'mode', 'document' ] },
 		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
 		'/',
 		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
 		{ name: 'links' }
	]
});
</script>

 


As seen in the image below, we added 4 groups to the CKEditor (document, clipboard, basicstyles and links shown in lines 6 through 10 in the image) for a CKEditor Text box called "theAbout" (Shown in line 4). This basically says "Only show this 4 group buttons on the CKEditor box with ID theAbout". Remember to surround the Javascript code that customizes the CKEditor with the opening and closing <script></script> tags as seen on lines 3 and 13 in the image below.



After saving the changes above, we now proceed to edit the form that will have this changes applied to it. So follow Steps 9 to 11 again on how to setup CKEditor and instead of only changing the DIV Class with the value "ckeditor" as seen in the image below, we will also provide a DIV ID to it. The ID will be "theAbout" in this case. With this new ID, the text editor will not only become a ckeditor but will also take into consideration the custom options you added to the code in the previous step.



The result will be the following:



As you can see, we have now remove many buttons not needed and are only showing the specific buttons we assigned to the text area with ID "theAbout". With this method, you can customize each individual text area for each specific place in your site by simply assigning an ID to that text area and applying the script code mentioned above with the groups or buttons you want to show there. Remember to always see the Documentation Page to know what to add and how to added to be able to customize your CKEditor text areas as you see fit. Also remember that this applies to Froala and any similar editor. So basically the steps are:


1. Download the Editor from your favorite site.

2. Upload the Editor to your site.

3. In your Footer Scripts, set the <script> tags to point to the editor you uploaded.

4. Change the Form fields that use tinymce to the one you want (froala, ckeditor, etc...)