如何禁用 CKEditor 对话框皮肤？

发布于 2024-12-05 17:57:35 字数 316 浏览 2 评论 0原文

我希望有人能给我一些关于这个的想法。我有一个 CKEditor 3.6 对话框，其中包含 html 类型的单个元素并加载外部页面（或者实际上是正文 html 内容）。该页面的样式表由 MediaWiki 1.17 资源加载器加载。我的问题是 CKEditor 皮肤优先于我的样式表。在 firebug 中，我什至可以禁用 CKEditor 样式并查看页面如何获得其原始形状。有没有办法禁用此对话框的 CKEditor 样式表或降低其优先级？或者有其他方法可以解决这个问题吗？任何想法将不胜感激。

更新：更简单的问题是如何删除破坏我的设计的继承 CSS 属性？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三月梨花 2024-12-12 17:57:35

请使用 Firebug 检查某些内容：

打开对话框窗口，右键单击包含外部内容的 HTML 元素，然后选择“检查元素”。

在 Firebug 中，选择 HTML 面板，然后选择右侧的样式窗格并确保“仅显示应用的样式”选项未选中。

查看显示每个样式块的源文件的样式窗格的右侧，您是否看到您的样式表（来自资源loader）正在提供一些样式？

样式表中的样式是否都带有线条来表明它们已被覆盖？

过去，我使用 HTML 和样式窗格中的信息来创建更有针对性的选择器对于样式，您可以使用该方法覆盖编辑器样式。

请提供正在使用的代码：

外部 HTML 内容的结构是什么（包括任何类和 id 或样式）？

整个块是否包含在一个容器（div 或 table）中？

您的任何样式是否通过外部页面的标记定位？

对于对话框代码，您可以删除任何功能，除非它与 .addClass() 等相关。只需显示选项卡的结构，如下所示：

CKEDITOR.dialog.add( 'Plugin Name', function( editor )
{
  return {
    title : Plugin.title,
    minWidth : 350,
    minHeight : 230,
    contents : [
      {
        id : 'TabId',
        label : Lang.TabId,
        title : Lang.TabId,
        elements :
        [
          {
            id : 'ElementId',
            type : 'html',
            label : Lang.ElementId,
            title : Lang.ElementId,
            style : 'text-align: center;',
            html : '<div>' + Some Content + '</div>',
            children :
            [

查看代码将使您更容易回答您的问题。

祝你好运，
乔

Please check something with Firebug:

Open your dialog window and right click in the HTML element that contains the external content, then select "Inspect Element".

In Firebug, select the HTML panel, then select the Style pane on the right side and make sure that the "Only Show Applied Styles" option is Not checked.

Look at the right side of the style pane where the source file for each style block is shown, do you see that your style sheet (from the resource loader) is providing some of the styles?

Do the styles from your style sheet all have lines through them to indicate that they've been overridden?

In the past, I've used the information from the HTML and Style panes to create more targeted selectors for the styles, you may be able to over-ride the editor styles using that approach.

Please provide the code being used:

What is the structure of the external HTML content (including any classes and ids or styles)?

Is the entire block enclosed in a container (div or table)?

Are any of your styles targeted through the <body> tag of the external page?

For the dialog code, you can strip out any functionality, unless it's pertinent like .addClass(). Just show the structure of the tab like so:

CKEDITOR.dialog.add( 'Plugin Name', function( editor )
{
  return {
    title : Plugin.title,
    minWidth : 350,
    minHeight : 230,
    contents : [
      {
        id : 'TabId',
        label : Lang.TabId,
        title : Lang.TabId,
        elements :
        [
          {
            id : 'ElementId',
            type : 'html',
            label : Lang.ElementId,
            title : Lang.ElementId,
            style : 'text-align: center;',
            html : '<div>' + Some Content + '</div>',
            children :
            [

Viewing the code will make it easier to answer your question.

Be Well,
Joe

回复收藏 0 原文

~没有更多了~