empiricompany/openmage-mm_monacoeditor

OpenMage / Magento 1.9 扩展模块,将 Monaco 编辑器与 Emmet 和 Tailwindcss Intellisense 集成到 CMS 静态块/页面中

安装: 5

依赖: 0

建议: 0

安全: 0

星标: 4

关注者: 3

分支: 2

开放问题: 1

语言:HTML

类型:magento-module

v1.0.0 2024-05-10 08:07 UTC

This package is auto-updated.

Last update: 2024-09-18 10:38:29 UTC


README

  • OpenMage / Magento 1.9.x
  • PHP 7.4 / 8.x

描述

Monaco Editor 是微软开发的一款高度先进且功能丰富的代码编辑器,用于流行的代码编辑器 VSCode

此扩展允许您使用 Monaco 来编辑 CMS 内容和 Design Update XML,而不是使用文本框,同时保持缩进,并享有所有有用的功能。

此外,您可以为特定的静态块和页面禁用 TinyMCE WYSIWYG 编辑器。添加此选项是因为 TinyMCE 会删除不符合 HTML5 架构的代码,例如 Alpine.js。

这是 CMSContentFileMode 的一个侧项目,它集成了 Tailwind CSS 编译器,用于 OpenMage 中的 CMS 内容。查看它!

Monaco 功能

  • 智能 IntelliSense
  • 语法高亮
  • 代码格式化/折叠
  • 多个光标和选择
  • 等等

附加功能

  • Emmet 是一个快速高效的 HTML 和 CSS 编码工具包,提供缩写词以快速扩展代码。
  • Tailwindcss Intellisense 为 Tailwind CSS 类提供智能自动完成、建议和工具提示

配置

Monaco 编辑器默认在所有支持的内容中启用。

系统 -> 内容管理 -> Monaco 编辑器选项

  • 启用/禁用 Monaco 编辑器 [启用]
  • 启用/禁用 Tailwindcss Intellisense [启用]
  • 配置 Tailwindcss 前缀 [禁用]
    • 设置自定义 Tailwindcss 前缀 ['tw-']
  • 为特定静态块和页面禁用 WYSYWYG 编辑器

已知问题

  • Monaco 中没有同步 TinyMCE 内容。

  • 存在与 prototypejs 相关的问题,它插入 Array.prototype.include 方法并与 Monaco 冲突。虽然这不是最佳解决方案,但它确实有效!

DEMO

demo-monacoeditor configs

支持

如果您对此扩展有任何问题,请在 GitHub 上提交问题。

贡献

任何贡献都备受赞赏。贡献代码的最佳方式是在 GitHub 上提交一个 pull request

许可证

OSL - 开放软件许可证 3.0