CKEditor - 樣式表分析器 - 有效的選擇器

我正在過渡我的CMS以使用CKEditor。我目前正在嘗試使用Stylesheet Parser。我有大量的網站編輯風格已經定義。定義用簡單的類聲明進行：.[class]。默認情況下，選擇器找到[element].[class]聲明。CKEditor - 樣式表分析器 - 有效的選擇器

我試過設置爲stylesheetParser_validSelectors：

config.stylesheetParser_validSelectors = /\.\w+/;

...但款式選擇是空的。

我正在使用Firebug，並且在控制檯中看不到任何錯誤。

我的解決方案

我結束了使用stylesSet配置選項，原因有二：

它給我了，顯示了一個樣式選擇
我的名字控制可以設置默認值，但允許覆蓋

代碼：

if ((typeof EditorStyleSet === 'undefined') 
     || (typeof EditorStyleSet !== 'object') 
     || !(EditorStyleSet instanceof Array)) { 
    // Allow this variable to be set at the site level 
    EditorStyleSet = [ 
     {name:'Title', element:'span', attributes:{'class':'title'}}, 
     {name:'Subtitle', element:'span', attributes:{'class':'subTitle'}}, 
     {name:'Header Text', element:'span', attributes:{'class':'headerText'}}, 
     {name:'Red', element:'span', attributes:{'class':'red'}}, 
     {name:'Small', element:'span', attributes:{'class':'small'}}, 
     {name:'Hi-Lite', element:'span', attributes:{'class':'hi-lite'}} 
    ]; 
} 
config.stylesSet = EditorStyleSet;

來源

2013-01-08 Sonny

你選擇默認skipSelectors（^\.）阻止：

config.stylesheetParser_skipSelectors = /(^body\.|^\.)/i

這是因爲stylesheetparser插件不是設計用來處理這類案件。你可以，但是，將其覆蓋：

config.stylesheetParser_skipSelectors: /^body\./i

你的風格將在名單上看到，但它會在視覺上打破。現在看stylesheedparser插件的代碼（也登錄aClasses變量）：

for (i = 0; i < aClasses.length; i++) { 
    var oElement = aClasses[ i ].split('.'), 
     element = oElement[ 0 ].toLowerCase(), 
     sClassName = oElement[ 1 ]; 

    styles.push({ 
     name: element + '.' + sClassName, 
     element: element, 
     attributes: { 'class': sClassName } 
    }); 
}

補丁一點點：

for (i = 0; i < aClasses.length; i++) { 
    var oElement = aClasses[ i ].split('.'), 
     element, sClassName; 

    if (!oElement.length) { 
     element = '', 
     sClassName = oElement; 
    } else { 
     element = oElement[ 0 ].toLowerCase(), 
     sClassName = oElement[ 1 ]; 
    } 

    styles.push({ 
     name: element + '.' + sClassName, 
     element: !element.length ? 'span' : element, 
     attributes: { 'class': sClassName } 
    }); 
}

，這是它！

編輯：創建a ticket這個問題。

來源

2013-01-08 22:34:27 oleq

我接受你的解決方案，但我最終沒有使用Stylesheet Parser。我會將我的解決方案添加到OP中。 – Sonny

CKEditor - 樣式表分析器 - 有效的選擇器

回答

相關問題