CodeMirror for JSON Config String

Topics: Customizing Orchard
Mar 3, 2015 at 3:08 PM
Edited Mar 3, 2015 at 5:08 PM
Some background information
I am creating a module for CKEditor.
The configuration works basically that the user can define the JavaScript object for the configuration completly free:
CKEDITOR.replace("Body_Text", {CONFIGURATN_STRING});
Since CONFIGURATION_STRING is a normal JavaScript object I would like to use CodeMirror.

The problem is right now that the site.css sets some properties that destroy the layout of codemirror.css. I have CKEditor running with Codemirror without a problem.
But in case of the text area replacement with Codemirror it seems to be tricky.

Any solutions? I heard that there is a new flavour in the backend in the new version for Codemirror?
@using Orchard.ContentManagement;

@{ Layout.Title = T("CustomCK Settings").ToString(); }

@using (Script.Foot()) {
    Script.Require("CodeMirror");
    Style.Require("CodeMirror");
    <script type="text/javascript">
    //<![CDATA[
        var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("CustomCKSettings_ConfigString"), 
            {
                lineNumbers: true,
                mode: { name: "javascript", json: true }
            });
    //]]>
    </script>
}

<fieldset>
    <legend>@T("CKEditor Configuration String")</legend>

    <div>
        @Html.TextAreaFor(m => m.ConfigString, new { cols = 40, rows = 30 })
        @*@Html.TextAreaFor(m => m.ConfigString, new { @class = "html", cols = 40, rows = 30 })*@
        @*@Html.ValidationMessageFor(m => m.ConfigString, "*")*@
    </div>
    <p>@T("When the CKEditor does not load properly: Please check the syntax of this configuration (JavaScript syntax).")</p>
    <p>@T("Options can be found here:")</p>
    <p><a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config" target="_blank">http://docs.ckeditor.com/#!/api/CKEDITOR.config</a></p>
    <p class ="hint">The Configuration string will be injected into the curly brackets of the second parameter: CKEDITOR.replace("Body_Text", {CONFIGURATN_STRING});</p>
    <p>Keyboard Shortcuts: <a href="http://docs.ckeditor.com/#!/guide/dev_shortcuts" target="_blank">http://docs.ckeditor.com/#!/guide/dev_shortcuts</a></p>
</fieldset>
The full source code can be found here: https://github.com/inteno/CustomCK
Mar 4, 2015 at 9:01 AM
Edited Mar 9, 2015 at 8:48 AM
Can anyone help?
Mar 13, 2015 at 11:06 AM
Anyone integrated Codemirror already in Orchard CMS?
Developer
Mar 13, 2015 at 11:41 AM
Mar 13, 2015 at 11:43 AM
Oh. Wow. Thank you!
Mar 16, 2015 at 3:04 PM
@sfmskywalker: Unfortunately I am still having the problem that my site.css adds some nonsene things to the Codemirror instance (like line height)
@model CustomCK.Models.CustomCKSettingsPartRecord
@using Orchard.ContentManagement;

@{
   Layout.Title = T("CustomCK Settings").ToString();
   //Style.Require("CodeMirror");
   
   

    Script.Include("codemirror/codemirror-compressed.js");
    Style.Include("codemirror/codemirror.css");

}

@using (Script.Foot()) {
    //Script.Require("CodeMirror");
   
    <script type="text/javascript">
    //<![CDATA[
        var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("CustomCKSettings_ConfigString"), 
            {
                lineNumbers: true,
                mode: "application/x-ejs",//mode: { name: "javascript", json: true }
            });
    //]]>
    </script>
}

<fieldset>
    <legend>@T("CKEditor Configuration String")</legend>

    <div>
        @Html.TextAreaFor(m => m.ConfigString, new { cols = 40, rows = 30 })
    </div>
    <p>@T("When the CKEditor does not load properly: Please check the syntax of this configuration (JavaScript syntax).")</p>
    <p>@T("Options can be found here:")</p>
    <p><a href="http://docs.ckeditor.com/#!/api/CKEDITOR.config" target="_blank">http://docs.ckeditor.com/#!/api/CKEDITOR.config</a></p>
    <p class ="hint">The Configuration string will be injected into the curly brackets of the second parameter: CKEDITOR.replace("Body_Text", {CONFIGURATN_STRING});</p>
    <p>Keyboard Shortcuts: <a href="http://docs.ckeditor.com/#!/guide/dev_shortcuts" target="_blank">http://docs.ckeditor.com/#!/guide/dev_shortcuts</a></p>
</fieldset>