DotKernel PSR-7 Middleware Applications

WYSIWYG Editor with Dojo

As you all know, we are using Dojo as a JavaScript library in our quick-start framework.

The entire Dojo JavaScript library is build into a single file dojo.xd.js. This is a compiled version of Dojo, built for deployment and not for development. This file speeds up the load of the page in the browser. You should use the Dojo library and Dojo CSS only where needed.

We used the Dojo CSS for the editor to have a pretty display.

<style type="text/css">                                                             
 @import "{SITE_URL}/externals/dojo-1.4.1/dijit/themes/tundra/tundra.css";   
<script type="text/javascript" src="{SITE_URL}/externals/dojo-1.4.1/dojo.xd.js" djConfig="parseOnLoad:true, isDebug:true, extraLocale: ['en-us']">

For editing the content in the admin module, we are using Dijit – a component of Dojo. When we built the WYSIWYG editor, we encountered an issue:

The Dijit editor must be in a div tag. So, the question was: how do we make changes to the content? We can’t use $_POST for the div content to use it in PHP. So we used a hidden input field and before submitting, we copied the content of the Dijit editor from the div into this hidden field.

<script type="text/javascript">
 if (dojo.byId('content') == '')
 alert ('Please enter the Content');
 document.course.content.value = dijit.byId('content').attr('value');
<input type="hidden" name="content" value="">                                       
<div dojoType="dijit.Editor" id="content">                           

The idea to implement this solution come from Matthew Weier O’Phinney blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>