Enable word wrapping and update README

Author: erindru

README.md

@@ -26,7 +26,10 @@ class MyPage extends Page {
     public function getCMSFields() {
         $fields=parent::getCMSFields();
 
-        $fields->addFieldToTab("Root.Main", new MarkdownEditor('MarkdownContent', 'Page Content (Markdown)'));
+        $editor = new MarkdownEditor('MarkdownContent', 'Page Content (Markdown)');
+        $editor->setRows(15); //optional, set number of rows in CMS
+        $editor->setWrapMode(true); //optional, turn on word wrapping
+        $fields->addFieldToTab("Root.Main", $editor);
 
         return $fields;
     }

code/forms/MarkdownEditor.php

@@ -1,6 +1,17 @@
 <?php
 class MarkdownEditor extends TextareaField {
     protected $rows=30;
+
+    protected $wrap_mode=false;
+
+    /**
+     * Sets the "Wrap Mode" on the ACE editor markdown field.
+     * @param boolean $mode True if word wrap should be enabled, false if not
+     */
+    public function setWrapMode($mode = false) {
+        $this->wrap_mode=$mode;
+        return $this;
+    }
 
     /**
      * Returns the field holder used by templates
@@ -29,8 +40,9 @@ public function getAttributes() {
                             parent::getAttributes(),
                             array(
                                 'style'=>'width: 97%; max-width: 100%; height: '.($this->rows * 16).'px; resize: none;', // prevents horizontal scrollbars
+                                'wrap-mode'=>($this->wrap_mode) ? "true" : "false"
                             )
                         );
-    }
+    }    
 }
 ?>

javascript/MarkdownEditor.js

@@ -4,8 +4,7 @@
             TextArea: null,
             Div: null,
             Editor: null,
-            Frame: null,
-            WrapMode: false,
+            Frame: null,            
             SoftTabs: true,
             onmatch: function() {
                 $(this).setFrame({
@@ -18,7 +17,7 @@
 
                 var div=$('<div id="'+$(this).attr('ID')+'_Editor" class="markdowneditor_editor"/>').css('height', $(this).getFrame().height).css('width', $(this).getFrame().width).text($(this).val());
                 div.insertAfter($(this));
-                $(this).setDiv(div);
+                $(this).setDiv(div);                
 
                 var editor=ace.edit(div.get(0));
                 editor.getSession().setMode('ace/mode/markdown');
@@ -31,7 +30,7 @@
                 var code=$(this).val();
                 $(this).setUseSoftTabs($(this).usesSoftTabs(code));
                 $(this).setTabSize($(this).getSoftTabs() ? $(this).guessTabSize(code):8);
-                $(this).setUseWrapMode($(this).getWrapMode());
+                $(this).setUseWrapMode($(this).attr("wrap-mode") == "true");
                 $(this).setupFormBindings();
                 $(this).setupHacks();
             },