To apply CSS classes to images: Normally, there is an option under the "Appearance" tab to add a CSS class to the image by a drop-down of available classes. If there are no tabs in the pop-up box (sounds like there aren't), go to the "Buttons and Plugins" section of the settings for your WYSWIWYG profile (under Configuration > Content Authoring) and tick the "Advanced image" box.
This by default gives a crazy long list of every class in your theme. To change this to something more useful, go to the CSS section and change the "Editor CSS" drop down. This is used for the image classes in Advanced Image settings as well as other lists of classes. You probably want to set it to "Define CSS" and create a CSS file with a limited selection of classes, then point to this in CSS Path.
To prune the user interface to get a more limited, user-friendly range of options: I don't know of any way to do this through configuration. There are, however, two brute-force methods:
Hide them with CSS (display: none;) This is what I use. It's a little harder than it should be because the HTML markup is ghastly - all tables with no classes or ids in useful places - but it's reasonably straightforward if you use things like nth child rules and count how many <tr> elements there are until you reach the one(s) you want to remove (this assumes your users won't be administrating content using IE 8 or less, or FF3 - if they might, write some jQuery instead).
Hack the TinyMCE code. I haven't tried this. Investigate the HTML files in sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced. Messing around with this doesn't look pleasant, it's probably very easy to break the interactivity.
Here's what I use to get a nice, simple, one tab interface which has nothing but Image URL, alt text, mouseover text, preview, dimensions, and a CSS class dropdown. I have the following CSS code added to the end of sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css. It turns off the features I don't want, kills the tabs, and squeezes it all neatly into the size of the popup:
发布评论
评论(1)
将 CSS 类应用于图像: 通常,“外观”选项卡下有一个选项,可通过可用类的下拉列表将 CSS 类添加到图像。如果弹出框中没有选项卡(听起来好像没有),请转到 WYSWIWYG 配置文件设置的“按钮和插件”部分(在“配置”>“内容创作”下) )并勾选“高级图像”框。
默认情况下,这会给出主题中每个类的疯狂长列表。要将其更改为更有用的内容,请转到 CSS 部分并更改“编辑器 CSS”下拉列表。这用于高级图像设置中的图像类以及其他类列表。您可能希望将其设置为“定义 CSS”并创建一个包含有限选择的类的 CSS 文件,然后在 CSS 路径中指向该文件。
修剪用户界面以获得更有限的、用户友好的选项范围:我不知道有什么方法可以通过配置来做到这一点。然而,有两种强力方法:
display: none;
) 这就是我使用的方法。这比应有的要困难一些,因为 HTML 标记非常糟糕 - 所有表格在有用的地方都没有类或 id - 但如果您使用 第 n 个子规则 并计算有多少个元素,直到到达所需的元素删除(这个假设您的用户不会使用 IE 8 或更低版本或 FF3 管理内容 - 如果他们也许,写一些 jQuery 来代替)。
sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced
中的 HTML 文件。摆弄这个看起来并不令人愉快,它可能很容易破坏交互性。下面是我用来获得一个漂亮、简单的单选项卡界面的方法,该界面除了图像 URL、替代文本、鼠标悬停文本、预览、尺寸和 CSS 类下拉列表之外什么都没有。我将以下 CSS 代码添加到
sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css
的末尾。它关闭了我不想要的功能,杀死了选项卡,并将其全部压缩到弹出窗口的大小中:To apply CSS classes to images: Normally, there is an option under the "Appearance" tab to add a CSS class to the image by a drop-down of available classes. If there are no tabs in the pop-up box (sounds like there aren't), go to the "Buttons and Plugins" section of the settings for your WYSWIWYG profile (under Configuration > Content Authoring) and tick the "Advanced image" box.
This by default gives a crazy long list of every class in your theme. To change this to something more useful, go to the CSS section and change the "Editor CSS" drop down. This is used for the image classes in Advanced Image settings as well as other lists of classes. You probably want to set it to "Define CSS" and create a CSS file with a limited selection of classes, then point to this in CSS Path.
To prune the user interface to get a more limited, user-friendly range of options: I don't know of any way to do this through configuration. There are, however, two brute-force methods:
display: none;
) This is what I use. It's a little harder than it should be because the HTML markup is ghastly - all tables with no classes or ids in useful places - but it's reasonably straightforward if you use things like nth child rules and count how many<tr>
elements there are until you reach the one(s) you want to remove (this assumes your users won't be administrating content using IE 8 or less, or FF3 - if they might, write some jQuery instead).sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced
. Messing around with this doesn't look pleasant, it's probably very easy to break the interactivity.Here's what I use to get a nice, simple, one tab interface which has nothing but Image URL, alt text, mouseover text, preview, dimensions, and a CSS class dropdown. I have the following CSS code added to the end of
sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/dialog.css
. It turns off the features I don't want, kills the tabs, and squeezes it all neatly into the size of the popup: