CodeMirror

CodeMirror - is a Magento 2 module that integrates CodeMirror - in-browser code editor into Magento 2.

Current version of module has implementations for Magento Admin only:

• form element for UI components;
• frontend models for Magento System Config.

Installation

composer require swissup/module-codemirror
bin/magento setup:upgrade

Usage

UI Component

Example:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    ...
    <fieldset name="general">
        ...
        <field name="template_text">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="label" xsi:type="string" translate="true">Template Content</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="component" xsi:type="string">Swissup_Codemirror/js/form/element/editor</item>
                    <item name="editorConfig" xsi:type="array">
                        <item name="mode" xsi:type="string">htmlmixed</item>
                    </item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="template_styles">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="label" xsi:type="string" translate="true">Template Styles</item>
                    <item name="formElement" xsi:type="string">textarea</item>
                    <item name="component" xsi:type="string">Swissup_Codemirror/js/form/element/editor</item>
                    <item name="editorConfig" xsi:type="array">
                        <item name="mode" xsi:type="string">css</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Use option editorConfig to pass additional paramenets to editor. mode can be either string or an object. Check CodeMirror Modes itself to find out more.

System Config

Example:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <section id="prolabels" translate="label" type="text" sortOrder="1668" showInDefault="1" showInWebsite="1" showInStore="1">
            ...
            <group id="general" translate="label" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General</label>
                ...
                <field id="css" translate="label" type="textarea" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>CSS</label>
                    <frontend_model>Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Css</frontend_model>
                </field>
                <field id="less" translate="label" type="textarea" sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>LESS</label>
                    <frontend_model>Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Less</frontend_model>
                </field>
                <field id="scss" translate="label" type="textarea" sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>SCSS</label>
                    <frontend_model>Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Scss</frontend_model>
                </field>
                <field id="js" translate="label" type="textarea" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>JS</label>
                    <frontend_model>Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Javascript</frontend_model>
                </field>
                <field id="yaml" translate="label" type="textarea" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>YAML</label>
                    <frontend_model>Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Yaml</frontend_model>
                </field>
                <field id="yaml-frontmatter" translate="label" type="textarea" sortOrder="26" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>YAML Frontmatter</label>
                    <frontend_model>Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Yamlfrontmatter</frontend_model>
                </field>
                <field id="text" translate="label" type="textarea" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Label Text</label>
                    <frontend_model>Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Htmlmixed</frontend_model>
                </field>
                <field id="custom" translate="label" type="textarea" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Label Inline Styles</label>
                    <frontend_model>Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Inlinecss</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

There are 9 frontend models for system config:

• Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Css
• Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Less
• Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Scss
• Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Javascript
• Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Htmlmixed
• Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Inlinecss
• Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Json
• Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Yaml
• Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Yamlfrontmatter