限制Drupal TinyMCE上的图像插入选项

时间:2011-07-28 06:28:09

标签: tinymce drupal-7 wysiwyg

我通过Wysywig模块使用Drupal 7和TinyMCE。

我启用了插入图像选项,但是当弹出插入图像对话框时,会向用户显示许多不合需要的图像选项。此外,没有选项可以向图像添加CSS类。有没有办法可以轻松更改此对话框以删除尺寸,对齐方式,边框等选项并添加类选项?

1 个答案:

答案 0 :(得分:1)

将CSS类应用于图像:通常,“外观”选项卡下有一个选项可通过下拉可用类向图像添加CSS类。如果弹出框中没有选项卡(听起来没有),请转到WYSWIWYG配置文件设置的“按钮和插件”部分(在配置>内容创作下) )并勾选 “高级图片” 框。

默认情况下,这会为您的主题中的每个类提供一个疯狂的长列表。要将其更改为更有用的内容,请转到 CSS 部分并更改“编辑器CSS”下拉菜单。这用于高级图像设置中的图像类以及其他类列表。您可能希望将其设置为“定义CSS ”并创建具有有限选择类的CSS文件,然后在CSS路径中指向此文件。


修剪用户界面以获得更有限,用户友好的选项范围:我不知道通过配置如何做到这一点。但是,有两种暴力方法:

  1. 用CSS隐藏它们display: none;)这就是我使用的。它有点难以理解,因为HTML标记是可怕的 - 所有表都没有类或id在有用的地方 - 但是如果你使用像nth child rules这样的东西并计算多少<tr>个元素,这是相当简单的直到你找到你要删除的那个(这假设你的用户不会管理内容using IE 8 or less, or FF3 - 如果可能的话,写一些jQuery代替)。
  2. 破解TinyMCE代码。我没试过这个。调查sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced中的HTML文件。用它来解决这个看起来并不愉快,打破交互性可能很容易。
  3. 这是我用来获得一个漂亮,简单的一个标签界面,它只有图像URL,替代文本,鼠标悬停文本,预览,尺寸和CSS类下拉列表。我在sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css的末尾添加了以下CSS代码。它会关闭我不想要的功能,杀死标签,然后将它全部整齐地压缩到弹出窗口的大小:

    #appearance_panel.panel { display: block; }
    .tabs { display: none; }
    #appearance_panel tr:nth-child(1), #appearance_panel tr:nth-child(3), #appearance_panel tr:nth-child(4), #appearance_panel tr:nth-child(5), #appearance_panel tr:nth-child(6)#appearance_panel tr:nth-child(4), #appearance_panel tr:nth-child(5), #appearance_panel tr:nth-child(6), #appearance_panel tr:nth-child(8) { display: none; }
    .panel_wrapper #general_panel { height: 270px; }
    .panel_wrapper { padding: 3px 10px 3px;}
    body { margin: 0; }