当前位置： 技术文章>> magento2中的添加自定义编辑器以及代码示例

文章标题：magento2中的添加自定义编辑器以及代码示例
  • 文章分类: Magento
  • 21393 阅读
文章标签: magento magento教程 magento二次开发 magento中文教程 php
系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》

Magento中文全栈二次开发

本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。

在Magento 2中添加自定义编辑器可以通过以下步骤完成：

在你的Magento 2主题文件夹的下面创建一个新文件夹，例如：app/design/frontend/<Vendor>/<Theme>/web/js/ckeditor

下载和解压CKEditor编辑器的最新版本并将其放在刚刚创建的文件夹中。

在你的Magento 2主题文件夹的下面创建一个新文件夹，例如：app/design/frontend/<Vendor>/<Theme>/web/js/tinymce

下载和解压TinyMCE编辑器的最新版本并将其放在刚刚创建的文件夹中。

在你的Magento 2主题文件夹的下面创建一个新文件夹，例如：app/design/frontend/<Vendor>/<Theme>/web/js/my-editor

在这个新文件夹中创建一个新的JavaScript文件，例如：editor.js

编辑这个JavaScript文件并添加以下代码：

define(['jquery', 'tinymce', 'ckeditor'], function ($) {
    'use strict';
    return function (config, element) {
        if (config.editor === 'tinymce4') {
            tinymce.init({
                selector: '#' + element.id,
                plugins: 'link image code',
                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
                height: 500
            });
        } else if (config.editor === 'ckeditor4') {
            CKEDITOR.replace(element.id, {
                height: 500,
                removeButtons: 'Subscript,Superscript'
            });
        }
    };
});

现在，你可以在Magento 2的CMS页面中使用此自定义编辑器了。在你的CMS页面中，打开要编辑的区域，例如：Content > Pages > Edit，并在WYSIWYG编辑器的设置中选择Custom Editr。接下来，在“Custom Editor”字段中输入“my-editor/editor”（这里的“my-editor”是你在第5步中创建的文件夹的名称，“editor”是你在第6步中创建的JavaScript文件的名称）。保存后，刷新页面并查看结果。


推荐文章