I'm using FCKeditor very often, but one feature is missing. Because the editor is working in a CMS. every time the CSS file is different. I made this function to read the data from the CSS file and put it into the drop down box, without the need of editing the config every time! Maybe this is a good idea for the next version?!
This is the code in the file fck_editor.js, the function loadStylesheet is new, in the function initEditor this function is called.
function initEditor()
{
if (! bInitialized)
{
bInitialized = true ;
loadToolbarSet() ;
loadToolbarSourceSet() ;
objContent.BaseURL = config.BaseUrl ;
}
if (! bDataLoaded && ! objContent.Busy)
{
bDataLoaded = true ;
objContent.DOM.body.onpaste = onPaste ;
objContent.DOM.body.ondrop = onDrop ;
objContent.DOM.body.onkeydown = onKeyDown ;
objContent.ShowBorders = config.StartupShowBorders ;
objContent.ShowDetails = config.StartupShowDetails ;
objContent.DOM.createStyleSheet(config.EditorAreaCSS) ;
setLinkedField() ;
// Loads stylesheet data into combobox
// Timeout is to load the stylesheet from te server, this may cost a few seconds
setTimeout("loadStylesheet()",5000);
}
}
// Method: loadStylesheet()
// Description: Loads data from the stylesheet into the combobox
// Author: byFly.net
function loadStylesheet(){
var a,b;
var styleList = new Array();
passedValue = objContent.DOM.styleSheets;
for (var i = 0; passedValue && i < passedValue.length; i++)
{
for (var j = 0; j < passedValue[i].rules.length; j++)
{
// Extract the rule and the rule definition from the passed style
// data.
a = passedValue[i].rules[j].selectorText.toString();
b = passedValue[i].rules[j].style.cssText;
// Ignore non-style entries
if (!a || !b) continue;
// Id: These are added to the document style sheet but are not
// available in the style dropdown
if (a.indexOf("#") != -1) {
continue;
}
// Class: Append a class element to the style list
if (a.indexOf(".") == 0) {
styleList[styleList.length] = [a.substr(1), "Class " + a, 1];
}
// SubClass: Append the sub-class to the style list
else if(a.indexOf(".") > 0) {
l = a.split(".");
styleList[styleList.length] = [l[1], a, 1];
}
// Otherwise, assume it's a tag and select the existing tag entry
// in the style list.
else {
styleList[styleList.length] = [a, a.toLowerCase(), 1];
}
}
}
for (var i = 0; i < styleList.length; i++) {
var oOption = document.createElement("OPTION");
if (styleList[i][0]) oOption.value = styleList[i][0];
oOption.text = styleList[i][1];
oOption.style.backgroundColor = 'white';
// Choose the combobox, in this case cmbFontStyle
if(document.all.cmbFontStyle){
document.all.cmbFontStyle.add(oOption);
}
}
}
I hope anyone can use this and maybe it is a nice feature for this wonderfull editor!
This is the code in the file fck_editor.js, the function loadStylesheet is new, in the function initEditor this function is called.
function initEditor()
{
if (! bInitialized)
{
bInitialized = true ;
loadToolbarSet() ;
loadToolbarSourceSet() ;
objContent.BaseURL = config.BaseUrl ;
}
if (! bDataLoaded && ! objContent.Busy)
{
bDataLoaded = true ;
objContent.DOM.body.onpaste = onPaste ;
objContent.DOM.body.ondrop = onDrop ;
objContent.DOM.body.onkeydown = onKeyDown ;
objContent.ShowBorders = config.StartupShowBorders ;
objContent.ShowDetails = config.StartupShowDetails ;
objContent.DOM.createStyleSheet(config.EditorAreaCSS) ;
setLinkedField() ;
// Loads stylesheet data into combobox
// Timeout is to load the stylesheet from te server, this may cost a few seconds
setTimeout("loadStylesheet()",5000);
}
}
// Method: loadStylesheet()
// Description: Loads data from the stylesheet into the combobox
// Author: byFly.net
function loadStylesheet(){
var a,b;
var styleList = new Array();
passedValue = objContent.DOM.styleSheets;
for (var i = 0; passedValue && i < passedValue.length; i++)
{
for (var j = 0; j < passedValue[i].rules.length; j++)
{
// Extract the rule and the rule definition from the passed style
// data.
a = passedValue[i].rules[j].selectorText.toString();
b = passedValue[i].rules[j].style.cssText;
// Ignore non-style entries
if (!a || !b) continue;
// Id: These are added to the document style sheet but are not
// available in the style dropdown
if (a.indexOf("#") != -1) {
continue;
}
// Class: Append a class element to the style list
if (a.indexOf(".") == 0) {
styleList[styleList.length] = [a.substr(1), "Class " + a, 1];
}
// SubClass: Append the sub-class to the style list
else if(a.indexOf(".") > 0) {
l = a.split(".");
styleList[styleList.length] = [l[1], a, 1];
}
// Otherwise, assume it's a tag and select the existing tag entry
// in the style list.
else {
styleList[styleList.length] = [a, a.toLowerCase(), 1];
}
}
}
for (var i = 0; i < styleList.length; i++) {
var oOption = document.createElement("OPTION");
if (styleList[i][0]) oOption.value = styleList[i][0];
oOption.text = styleList[i][1];
oOption.style.backgroundColor = 'white';
// Choose the combobox, in this case cmbFontStyle
if(document.all.cmbFontStyle){
document.all.cmbFontStyle.add(oOption);
}
}
}
I hope anyone can use this and maybe it is a nice feature for this wonderfull editor!