1

我使用一个使用TinyMCE编辑器作为可视化编辑器的 CMS。它的 CSS 进行了奇怪的编辑，因此 ul-lists 不会显示项目符号，并且段落之间没有任何空格。

是否有一种简单方便的方法来更改在我无权访问的服务器上特定 CSS 文件中定义的外观？我需要覆盖这些属性www.site.com/global.css：

ul { list-style-type: square; }
p { margin: 10 px; }

我相信使用 Greasemonkey 有一种简单的方法，但我不擅长编写脚本。哦，我正在使用谷歌浏览器。

4

3 回答 3

3

因为您使用 TinyMCE，所以您需要将 CSS 文件加载到 TinyMCE iframe 头部而不是主页面中。

为此使用content_css设置。这是一种覆盖 TinyMCE 默认 CSS 的方法。

更新：无需访问服务器文件或 TinyMCE 配置，您仍然可以访问 TinyMCE API。查看此选项以将 CSS 加载到您需要的位置。您应该将 CSS 文件放在 Internet/Intranet 上可以访问的某个位置。

// Loads a CSS file dynamically into the current document
tinymce.DOM.loadCSS('somepath/some.css');

// Loads a CSS file into the currently active editor instance
tinyMCE.activeEditor.dom.loadCSS('somepath/some.css');

// Loads a CSS file into an editor instance by id
tinyMCE.get('someid').dom.loadCSS('somepath/some.css');

// Loads multiple CSS files into the current document
tinymce.DOM.loadCSS('somepath/some.css,somepath/someother.css');

更新 2：可以将 CSS 字符串加载到 iframe 头部。为此，请使用以下用户脚本：

// ==UserScript==
// @name    YOUR_SCRIPT_NAME
// @match   http://YOUR_SERVER.COM/YOUR_PATH/*
// ==/UserScript==

var css_to_add = 'p { margin: 10 px; }'; // example
var iframe_id = 'your_editor_id' + '_ifr'; // place your editor id here+'_ifr'
with(document.getElementById(iframe_id).contentWindow) {
    var h = document.getElementsByTagName("head");
    if (!h.length) return;
    var newStyleSheet = document.createElement("style");
    newStyleSheet.type = "text/css";
    h[0].appendChild (newStyleSheet);
    try {
        if ( typeof newStyleSheet.styleSheet !== "undefined" ) {
            newStyleSheet.styleSheet.cssText = css_to_add;
        }
        else {
            newStyleSheet.appendChild( document.createTextNode ( css_to_add ) );
            newStyleSheet.innerHTML = css_to_add;
        }
    }
    catch(e){}
}


将代码另存为并按照这些说明MyCSSFix.user.js将其安装在 Chrome 中（在为您的详细信息编辑指示的位置之后）。

于 2013-01-18T09:53:39.270 回答
0

添加到标记内联的属性应该覆盖以前加载的样式表声明。

<p style="margin:0px;"></p>

应该覆盖 global.css 中的任何 p-margin 样式

于 2013-01-18T09:40:25.490 回答
0

在您的 css 文件上使用!important

ul { list-style-type: square !important; }
于 2013-01-18T09:41:17.730 回答