In the previous parts of this series we created a simple widget. The source code can be downloaded here. In this part, we'll create a dialog window which will create a dialog window. The window will provide the ability to insert new configurable widgets or edit existing widgets.
Create Dialg Folder And File
Add a new folder called dialog and create file called box.js inside that folder.
In the previous parts of this series we created a widget plugin that generated the following code.
<div class="simplebox"> <h2 class="simplebox-title">Title</h2> <div class="simplebox-content"> <p>Content...</p> </div> </div>
However switching between the source view and wysiwyg view destroys the widget by stripping out certain classes and tags.
Advance Content Filter
CKeditor 4.1 introduced advanced content filters (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules).
It allows us to determine which element and attribute combinations are allowed or disallowed in the editor's content.
This is achieve by setting the following properties:
Projects that use widgets depends on the Widget Plugin. Download and install it from http://ckeditor.com/addon/widget.
Download And Install The Dependencies for the Widget Plugin
Create The Plugin Folder and Files
File Permission Issues:
If you run into this error while trying to browse the server. The folder permissions have not be properly configured on the server.
Make sure that the $baseUrl set in ckfinder's config.php file is readable by the server.
Add Custom Styles
There are several way to add custom styles to the styles dropdown menu.
Method #1 - Use the default styles.js
We can edit the default styles.js file located in the root of ckeditor.
For more details on the syntax for the styles check out the ckeditor documentation.
You can add or remove styles from the styles.js file.