README

CodeMirror - 是一个将CodeMirror - 在浏览器中的代码编辑器集成到Magento 2的模块。

当前模块版本仅对Magento管理后台有实现

• UI组件的表单元素；
• Magento系统配置的前端模型。

安装

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

使用

UI组件

示例

<?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>

使用选项 editorConfig 将额外参数传递给编辑器。 mode 可以是字符串或对象。请检查CodeMirror模式以获取更多信息。

系统配置

示例

<?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>

系统配置有9个前端模型

• 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