Piranha CMS TinyMCE 为图像添加类

Posted 2023-04-01

【中文标题】Piranha CMS TinyMCE 为图像添加类

【英文标题】：Piranha CMS TinyMCE add class to image

【发布时间】：2015-04-20 15:46:22

【问题描述】：

我正在使用 Piranha CMS 构建一个 Web 应用程序，并且我正在尝试更改 TinyMCE 编辑器以允许向图像添加类。我看过相关的 TinyMCE 配置文档

http://www.tinymce.com/wiki.php/Configuration:image_class_list

但是，即使更新了相关的 tinymce.init

https://github.com/PiranhaCMS/Piranha/blob/013ed850636a299c71f860f9ae769572e768af26/Core/Piranha/Areas/Manager/Views/Shared/Partial/TinyMCE.cshtml

成为

<script type="text/javascript" src="~/res.ashx/areas/manager/content/js/ext/tiny_mce/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init(
        mode: 'specific_textareas',
        editor_selector: "editor",
        convert_urls: false,
        plugins: [
            "autoresize autolink code hr paste piranhaimage link"
        ],
        image_class_list: [
            title: 'None', value: '',
            title: 'img-left', value: 'img-left',
            title: 'img-border', value: 'img-border',
            title: 'img-responsive', value: 'img-responsive'
        ],
        width: "100%",
        height: "340",
        autoresize_min_height: 340,
        @if (File.Exists(Server.MapPath("~/areas/manager/content/css/editor.css"))) 
        <text>content_css: "@Url.Content("~/areas/manager/content/css/editor.css")",</text>
        
        toolbar: "bold italic underline | bullist numlist hr | formatselect removeformat | cut copy paste | link piranhaimage | code"
    );
</script>

我发现没有效果（我确实清除了浏览器缓存）。我注意到 Piranha CMS 中的 TinyMCE 正在使用的插件是 piranhaimage 而不是 TinyMCE 文档中的普通 image。如果是这个原因，那piranhaimage怎么配置呢？

【参考方案1】：

piranhaimage 的插件代码可以在这里找到：

https://github.com/PiranhaCMS/Piranha/blob/master/Core/Piranha/Areas/Manager/Content/Js/Ext/tiny_mce/plugins/piranhaimage/plugin.min.js

不幸的是，当前版本不支持覆盖资产，仅支持管理器界面中的视图，但添加对核心插件的支持以进行对齐可能是一个不错的功能。

在本地项目中试用的一种方法是下载 TinyMCE 并将其放置在本地项目中，然后将 piranhaimage 插件复制到本地 TinyMCE 目录。之后，您可以在您已经覆盖的 TinyMCE.cshtml 中更改以下行：

<script type="text/javascript" 
  src="~/res.ashx/areas/manager/content/js/ext/tiny_mce/tinymce.min.js">  
</script>

而是让它指向您的本地 URL！然后，您可以将其更改为您想要的任何内容！

问候