I was recently contacted by a client asking me whether there was a way to use markItUp editor (http://markitup.jaysalvat.com) with Couch.

Now, as you might be already aware, markItUp is a lightweight jQuery plugin that can turn a textarea into a quicktag editor (not Wysiwyg).

I replied that I cannot promise but I'll give it a shot.
As it turned out, it was a simple affair to get markItUp integrated to Couch admin. I was apprehensive about jQuery and MooTools (Couch's native JavaScript library) working together but the 'noconflict' setting of jQuery made it a non-issue.

The solution:
Once again the unassuming editable region of type 'message' came to the rescue. This region can be used to inject arbitrary markup code into the admin panel.
I used it to put in the JavaScript code that attaches markitup to any desired editable region of type 'textarea'.

I am pasting in here the complete solution hoping it might help somebody.

Code: Select all
Suppose this is the portion of a template where the editable regions are defined -

   <cms:template clonable='1'>
      <cms:editable name='desc' label='Description' type='textarea' />
      <cms:editable name='location' label='Location' type='textarea' height='100' />
   </cms:template>
   
In our example, we have two textareas (named 'desc' and 'location'). We'll add markitup into both of these.
Please follow the following three steps -

1. Extract the attached 'src.zip'. You'll get a folder named 'markitup'.
Upload this 'markitup' folder into the root of your site (mind you - NOT within 'couch' folder).

2. Modify your template to add one more editable region (of type 'message') as shown below. The modified template now becomes -

   <cms:template clonable='1'>
      <cms:editable name='desc' label='Description' type='textarea' />
      <cms:editable name='location' label='Location' type='textarea' height='100' />

      <cms:editable name='custom_markitup' type='message'>
         <!-- jQuery -->
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
         <script type="text/javascript">
            jQuery.noConflict();
         </script>
         <!-- markItUp! -->
         <script type="text/javascript" src="<cms:show k_site_link />markitup/jquery.markitup.js"></script>
         <!-- markItUp! toolbar settings -->
         <script type="text/javascript" src="<cms:show k_site_link />markitup/sets/couch/set.js"></script>
         <!-- markItUp! skin -->
         <link rel="stylesheet" type="text/css" href="<cms:show k_site_link />markitup/skins/markitup/style.css" />
         <!--  markItUp! toolbar skin -->
         <link rel="stylesheet" type="text/css" href="<cms:show k_site_link />markitup/sets/couch/style.css" />
         
         <script type="text/javascript">
            <!--
            jQuery(document).ready(function()   {
               // Add markItUp! to your textarea in one line for each textarea
               // jQuery('textarea').markItUp( { Settings }, { OptionalExtraSettings } );
               jQuery('#f_desc').markItUp(mySettings);
               jQuery('#f_location').markItUp(mySettings);

            });
            -->
         </script>
      </cms:editable>     
     
   </cms:template>

   V.IMP:
   A. Please note these two lines in the code above - 
      jQuery('#f_desc').markItUp(mySettings);
      jQuery('#f_location').markItUp(mySettings);
     
   With the above lines we are adding the markitup editor to both of our textarea editable regions.
   Please note that the names of the textarea editable regions were 'desc' and 'location' but we add the 'f_' prefix to
   both of them so that they become 'f_desc' and 'f_location' respectively.
   Make sure to do the same with the textareas of your template.

   B. Even if you have multiple textareas that need to have markitup added, you need to add the
      <cms:editable name='custom_markitup' type='message'> .. </cms:editable>
   editable region only ONCE and them add the
   jQuery('#f_xxx').markItUp(mySettings);
   line for each of the textareas (where 'f_xxx' is the name of the textarea as explained above).

3. Finally, visit your template though your browser while logged in as super-admin for the changes to be
picked up by Couch.
Visit the admin-panel of the template should now show the markitup editor attached to the textareas.


I am also attaching a sample template 'test.php' that can be used to understand the method better.
src.zip
(66.64 KiB) Downloaded 219 times

test.zip
(722 Bytes) Downloaded 267 times

Please feel free to ask any questions that you might have.