当前位置: 技术文章>> magento2中的配置 TinyMCE 编辑器

文章标题:magento2中的配置 TinyMCE 编辑器
  • 文章分类: Magento
  • 10848 阅读
系统学习magento二次开发,推荐小册:《Magento中文全栈二次开发 》

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


在Magento 2中,可以使用TinyMCE编辑器来提供更丰富的文本编辑功能。以下是如何配置TinyMCE编辑器以及如何在Magento 2中使用它的代码示例:


在Magento 2中配置TinyMCE编辑器

首先,在Magento 2中启用WYSIWYG编辑器。打开Magento 2的后台,依次单击“Stores”>“Configuration”>“General”>“Content Management”,在“WYSIWYG Options”下,将“Enable WYSIWYG Editor”设置为“Yes”。


然后,将TinyMCE作为默认编辑器。在“WYSIWYG Options”下,将“Editor”设置为“TinyMCE”。


最后,根据需要进行其他设置,例如设置编辑器的宽度和高度,启用/禁用某些按钮等。完成后,单击“Save Config”保存更改。


在Magento 2中使用TinyMCE编辑器

在Magento 2中使用TinyMCE编辑器非常简单。只需在需要使用编辑器的文本区域中添加以下代码:

<textarea id="editor" name="editor"></textarea>
<script>
require(['jquery','mage/adminhtml/wysiwyg/tiny_mce/setup'], function($){
   tinyMceWysiwygSetup.prototype.baseStaticUrl = $('#base-url').attr('href')+'pub/static/frontend/Magento/luma/en_US/Magento_Cms/';
   tinyMceWysiwygSetup.prototype.baseMediaUrl = $('#base-url').attr('href')+'pub/media/';
   tinyMceWysiwygSetup.prototype.settings = {
       theme_advanced_buttons1 : 'bold,italic,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,|,image,media',
       theme_advanced_buttons2 : '',
       theme_advanced_buttons3 : '',
       theme_advanced_buttons4 : '',
       theme_advanced_statusbar_location : 'bottom',
       theme_advanced_resizing : true,
       theme_advanced_resize_horizontal : false,
       apply_source_formatting : true,
       width : '100%',
       height : '250px'
   };
   new tinyMceWysiwygSetup('editor', {});
});
</script>

这将在指定的textarea元素上初始化TinyMCE编辑器,并设置其选项。


请注意,此代码假定您使用Magento 2的默认主题(Luma)。如果您使用的是自定义主题,请相应地更改代码中的路径。此外,如果您要在多个文本区域中使用TinyMCE编辑器,请为每个文本区域指定唯一的id和name。




推荐文章