diff --git a/modules/backend/assets/js/editorsettings/editorsettings.js b/modules/backend/assets/js/editorsettings/editorsettings.js
index dd5adb1af..0594ba70e 100644
--- a/modules/backend/assets/js/editorsettings/editorsettings.js
+++ b/modules/backend/assets/js/editorsettings/editorsettings.js
@@ -16,27 +16,7 @@ $(document).ready(function(){
     })
 
     $('#Form-form-field-EditorSettings-word_wrap').on('change', function(){
-        switch ($(this).val()) {
-            case "off":
-                session.setUseWrapMode(false)
-                renderer.setPrintMarginColumn(80)
-            break
-            case "40":
-                session.setUseWrapMode(true)
-                session.setWrapLimitRange(40, 40)
-                renderer.setPrintMarginColumn(40)
-            break
-            case "80":
-                session.setUseWrapMode(true)
-                session.setWrapLimitRange(80, 80)
-                renderer.setPrintMarginColumn(80)
-            break
-            case "fluid":
-                session.setUseWrapMode(true)
-                session.setWrapLimitRange(null, null)
-                renderer.setPrintMarginColumn(80)
-            break
-        }
+        editorEl.codeEditor('setWordWrap', $(this).val())
     })
 
     $('#Form-form-field-EditorSettings-code_folding').on('change', function(){
diff --git a/modules/backend/controllers/EditorSettings.php b/modules/backend/controllers/EditorSettings.php
index 2a7f76f9a..ca64b22e3 100644
--- a/modules/backend/controllers/EditorSettings.php
+++ b/modules/backend/controllers/EditorSettings.php
@@ -41,18 +41,27 @@ class EditorSettings extends Controller
         // Load the editor system settings
         $editorSettings = EditorSettingsModel::instance();
 
-        $this->vars['showGutter'] = true;
-        $this->vars['theme'] = $editorSettings->theme;
-        $this->vars['wrapWords'] = $editorSettings->word_wrap !== 'off';
         $this->vars['fontSize'] = $editorSettings->font_size;
+        $this->vars['wordWrap'] = $editorSettings->word_wrap;
+        $this->vars['codeFolding'] = $editorSettings->code_folding;
         $this->vars['tabSize'] = $editorSettings->tab_size;
+        $this->vars['theme'] = $editorSettings->theme;
+        $this->vars['showInvisibles'] = $editorSettings->show_invisibles;
+        $this->vars['highlightActiveLine'] = $this->highlight_active_line;
         $this->vars['useSoftTabs'] = !$editorSettings->use_hard_tabs;
+        $this->vars['showGutter'] = true;
+        $this->vars['language'] = 'css';
         $this->vars['margin'] = 0;
 
         $this->getClassExtension('Backend.Behaviors.FormController')->update();
         $this->pageTitle = Lang::get('backend::lang.editor.menu_label');
     }
 
+    public function index_onSave()
+    {
+        return $this->getClassExtension('Backend.Behaviors.FormController')->update_onSave();
+    }
+
     public function formFindModelObject()
     {
         return EditorSettingsModel::instance();
diff --git a/modules/backend/controllers/editorsettings/index.htm b/modules/backend/controllers/editorsettings/index.htm
index f92368728..66e193bb6 100644
--- a/modules/backend/controllers/editorsettings/index.htm
+++ b/modules/backend/controllers/editorsettings/index.htm
@@ -21,14 +21,17 @@
                     id="editorsettingsCodeeditor"
                     class="field-codeeditor size-large layout-relative"
                     data-control="codeeditor"
-                    data-language="css"
-                    data-show-gutter="<?= $showGutter ? 'true' : 'false' ?>"
-                    data-wrap-mode="<?= $wrapWords ? 'true' : 'false' ?>"
-                    data-theme="<?= $theme ?>"
-                    data-margin="<?= $margin ?>"
                     data-font-size="<?= $fontSize ?>"
+                    data-word-wrap="<?= $wordWrap ?>"
+                    data-code-folding="<?= $codeFolding ?>"
                     data-tab-size="<?= $tabSize ?>"
+                    data-theme="<?= $theme ?>"
+                    data-show-invisibles="<?= $showInvisibles ?>"
+                    data-highlight-active-line="<?= $highlightActiveLine ?>"
                     data-use-soft-tabs="<?= $useSoftTabs ?>"
+                    data-show-gutter="<?= $showGutter ? 'true' : 'false' ?>"
+                    data-language="<?= $language ?>"
+                    data-margin="<?= $margin ?>"
                     data-vendor-path="<?= URL::to('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>/">
                     <textarea name="editorsettings_codeeditor"><?= e($this->makePartial('example_code')) ?></textarea>
                 </div>
diff --git a/modules/backend/formwidgets/CodeEditor.php b/modules/backend/formwidgets/CodeEditor.php
index c15fad0b7..1c5467026 100644
--- a/modules/backend/formwidgets/CodeEditor.php
+++ b/modules/backend/formwidgets/CodeEditor.php
@@ -30,7 +30,7 @@ class CodeEditor extends FormWidgetBase
     /**
      * @var boolean Indicates whether the the word wrapping is enabled
      */
-    public $wrapWords = true;
+    public $wordWrap = true;
 
     /**
      * @var boolean Indicates whether the the editor uses spaces for indentation
@@ -65,13 +65,16 @@ class CodeEditor extends FormWidgetBase
         // Load the editor system settings
         $editorSettings = EditorSettings::instance();
 
-        $this->language = $this->getConfig('language', 'php');
-        $this->showGutter = $this->getConfig('showGutter', true);
-        $this->theme = $this->getConfig('theme', $editorSettings->theme);
-        $this->wrapWords = $this->getConfig('wrapWords', $editorSettings->use_wrap);
         $this->fontSize = $this->getConfig('fontSize', $editorSettings->font_size);
+        $this->wordWrap = $this->getConfig('wordWrap', $editorSettings->word_wrap);
+        $this->codeFolding = $this->getConfig('codeFolding', $editorSettings->code_folding);
         $this->tabSize = $this->getConfig('tabSize', $editorSettings->tab_size);
+        $this->theme = $this->getConfig('theme', $editorSettings->theme);
+        $this->showInvisibles = $this->getConfig('showInvisibles', $editorSettings->show_invisibles);
+        $this->highlightActiveLine = $this->getConfig('highlightActiveLine', $editorSettings->highlight_active_line);
         $this->useSoftTabs = $this->getConfig('useSoftTabs', !$editorSettings->use_hard_tabs);
+        $this->showGutter = $this->getConfig('showGutter', $editorSettings->show_gutter);
+        $this->language = $this->getConfig('language', 'php');
         $this->margin = $this->getConfig('margin', 0);
     }
 
@@ -89,18 +92,21 @@ class CodeEditor extends FormWidgetBase
      */
     public function prepareVars()
     {
+        $this->vars['fontSize'] = $this->fontSize;
+        $this->vars['wordWrap'] = $this->wordWrap;
+        $this->vars['codeFolding'] = $this->codeFolding;
+        $this->vars['tabSize'] = $this->tabSize;
+        $this->vars['theme'] = $this->theme;
+        $this->vars['showInvisibles'] = $this->showInvisibles;
+        $this->vars['highlightActiveLine'] = $this->highlightActiveLine;
+        $this->vars['useSoftTabs'] = $this->useSoftTabs;
+        $this->vars['showGutter'] = $this->showGutter;
+        $this->vars['language'] = $this->language;
+        $this->vars['margin'] = $this->margin;
         $this->vars['stretch'] = $this->formField->stretch;
         $this->vars['size'] = $this->formField->size;
-        $this->vars['language'] = $this->language;
-        $this->vars['showGutter'] = $this->showGutter;
-        $this->vars['wrapWords'] = $this->wrapWords;
-        $this->vars['fontSize'] = $this->fontSize;
-        $this->vars['tabSize'] = $this->tabSize;
-        $this->vars['useSoftTabs'] = $this->useSoftTabs;
-        $this->vars['theme'] = $this->theme;
         $this->vars['name'] = $this->formField->getName();
         $this->vars['value'] = $this->model->{$this->columnName};
-        $this->vars['margin'] = $this->margin;
     }
 
     /**
diff --git a/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js b/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js
index 4c732d0d8..1bd6387c7 100644
--- a/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js
+++ b/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js
@@ -36,22 +36,22 @@
     }
 
     CodeEditor.DEFAULTS = {
-        vendorPath: '/',
+        fontSize: 12,
+        wordWrap: 'off',
+        codeFolding: 'manual',
+        tabSize: 4,
+        theme: 'textmate',
         showInvisibles: true,
         highlightActiveLine: true,
+        useSoftTabs: true,
         showGutter: true,
+        language: 'php',
+        margin: 0,
+        vendorPath: '/',
         showPrintMargin: true,
         highlightSelectedWord: false,
         hScrollBarAlwaysVisible: false,
-        useSoftTabs: true,
-        tabSize: 4,
-        fontSize: 12,
-        wrapMode: false,
-        readOnly: false,
-        theme: 'textmate',
-        folding: 'manual',
-        language: 'php',
-        margin: 0
+        readOnly: false
     }
 
     CodeEditor.prototype.init = function (){
@@ -130,11 +130,11 @@
         editor.getSession().setUseSoftTabs(options.useSoftTabs)
         editor.getSession().setTabSize(options.tabSize)
         editor.setReadOnly(options.readOnly)
-        editor.getSession().setFoldStyle(options.folding)
-        editor.getSession().setUseWrapMode(options.wrapMode)
+        editor.getSession().setFoldStyle(options.codeFolding)
         editor.setFontSize(options.fontSize)
         editor.on('blur', function(){ self.$el.removeClass('editor-focus') })
         editor.on('focus', function(){ self.$el.addClass('editor-focus') })
+        this.setWordWrap(options.wordWrap)
 
         editor.renderer.setScrollMargin(options.margin, options.margin, 0, 0)
         editor.renderer.setPadding(options.margin) 
@@ -178,6 +178,34 @@
         })
     }
 
+    CodeEditor.prototype.setWordWrap = function(mode) {
+        var session = this.editor.getSession(),
+            renderer = this.editor.renderer
+
+        switch (mode + '') {
+            default:
+            case "off":
+                session.setUseWrapMode(false)
+                renderer.setPrintMarginColumn(80)
+            break
+            case "40":
+                session.setUseWrapMode(true)
+                session.setWrapLimitRange(40, 40)
+                renderer.setPrintMarginColumn(40)
+            break
+            case "80":
+                session.setUseWrapMode(true)
+                session.setWrapLimitRange(80, 80)
+                renderer.setPrintMarginColumn(80)
+            break
+            case "fluid":
+                session.setUseWrapMode(true)
+                session.setWrapLimitRange(null, null)
+                renderer.setPrintMarginColumn(80)
+            break
+        }
+    }
+
     CodeEditor.prototype.setTheme = function(theme) {
         var self = this
         assetManager.load({
diff --git a/modules/backend/formwidgets/codeeditor/partials/_codeeditor.htm b/modules/backend/formwidgets/codeeditor/partials/_codeeditor.htm
index 2478c27ed..857fa7cfe 100644
--- a/modules/backend/formwidgets/codeeditor/partials/_codeeditor.htm
+++ b/modules/backend/formwidgets/codeeditor/partials/_codeeditor.htm
@@ -5,14 +5,17 @@
         id="<?= $this->getId() ?>"
         class="field-codeeditor size-<?= $size ?> <?= $stretch?'layout-relative':'' ?>"
         data-control="codeeditor"
-        data-language="<?= $language ?>"
-        data-show-gutter="<?= $showGutter ? 'true' : 'false' ?>"
-        data-wrap-mode="<?= $wrapWords ? 'true' : 'false' ?>"
-        data-theme="<?= $theme ?>"
-        data-margin="<?= $margin ?>"
         data-font-size="<?= $fontSize ?>"
+        data-word-wrap="<?= $wordWrap ?>"
+        data-code-folding="<?= $codeFolding ?>"
         data-tab-size="<?= $tabSize ?>"
+        data-theme="<?= $theme ?>"
+        data-show-invisibles="<?= $showInvisibles ?>"
+        data-highlight-active-line="<?= $highlightActiveLine ?>"
         data-use-soft-tabs="<?= $useSoftTabs ?>"
+        data-show-gutter="<?= $showGutter ? 'true' : 'false' ?>"
+        data-language="<?= $language ?>"
+        data-margin="<?= $margin ?>"
         data-vendor-path="<?= URL::to('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>/">
         <div class="editor-toolbar">
             <ul>
diff --git a/modules/backend/models/EditorSettings.php b/modules/backend/models/EditorSettings.php
index 658dde049..8f9403fcc 100644
--- a/modules/backend/models/EditorSettings.php
+++ b/modules/backend/models/EditorSettings.php
@@ -16,14 +16,14 @@ class EditorSettings extends Model
     {
         $config = App::make('config');
         $this->font_size = $config->get('editor.font_size', 12);
-        $this->tab_size = $config->get('editor.tab_size', 4);
-        $this->use_hard_tabs = $config->get('editor.use_hard_tabs', false);
         $this->word_wrap = $config->get('editor.word_wrap', 'off');
         $this->code_folding = $config->get('editor.code_folding', 'manual');
+        $this->tab_size = $config->get('editor.tab_size', 4);
+        $this->theme = $config->get('editor.theme', static::DEFAULT_THEME);
         $this->show_invisibles = $config->get('editor.show_invisibles', true);
         $this->highlight_active_line = $config->get('editor.highlight_active_line', true);
+        $this->use_hard_tabs = $config->get('editor.use_hard_tabs', false);
         $this->show_gutter = $config->get('editor.show_gutter', true);
-        $this->theme = $config->get('editor.theme', static::DEFAULT_THEME);
     }
 
     public static function applyConfigValues()
@@ -31,14 +31,14 @@ class EditorSettings extends Model
         $config = App::make('config');
         $settings = self::instance();
         $config->set('editor.font_size', $settings->font_size);
-        $config->set('editor.tab_size', $settings->tab_size);
-        $config->set('editor.use_hard_tabs', $settings->use_hard_tabs);
         $config->set('editor.word_wrap', $settings->word_wrap);
         $config->set('editor.code_folding', $settings->code_folding);
+        $config->set('editor.tab_size', $settings->tab_size);
+        $config->set('editor.theme', $settings->theme);
         $config->set('editor.show_invisibles', $settings->show_invisibles);
         $config->set('editor.highlight_active_line', $settings->highlight_active_line);
+        $config->set('editor.use_hard_tabs', $settings->use_hard_tabs);
         $config->set('editor.show_gutter', $settings->show_gutter);
-        $config->set('editor.theme', $settings->theme);
     }
 
     public function getThemeOptions()