Forum LAMS for Tech-Heads - General Forum: FCKeditor: Viewing Source alters Headings and htags

By: katey 1

[ Reply | Forward ]

I'm trying to create new Headings in the Format Combo box, however i am encountering major problems when viewing the source.

I'm running LAMS version 2.3 (within Moodle) integrated with FCKeditor ver2.6.4

I have followed the instructions listed in http://community.contractwebdevelopment.com/changing-fckeditor-font-format-list and updated the files below as specified.

I now have more Headings listed in the Format box (Heading 7,8,9,10) however i have two major issues.

1.) when i apply a newly created heading to a word in the editor -i can see the attributed css applied to the word, but then if i click Source, then click it again (to get back to the editor) it strips the htags and applies random htags. see below

Apply Heading 8 = looks like Heading 8 css

First time click Source =
<h8>Content</h8>

Click Source again - removes look of Heading 8 and reverts to previous style
Source now says=
<h8>&nbsp;</h8>
<div>Content</div>

If i continue to do this, Source continues to change

<h8>&nbsp;</h8>
<div>&nbsp;</div>
<div>Content</div>

2.)The Headings listed in the Format box don't reflect their css styles - even though i have updated the
editor/css/fck_editorarea.css.

Any advice or help would be greatly appreciated!
Thanks.

The files i changed are as follows:

root/fckstyles.xml - Added Headings 7-10 to Style Names
<Style name="Heading 1" element="h1" />
    <Style name="Heading 2" element="h2" />
    <Style name="Heading 3" element="h3" />
    <Style name="Heading 4" element="h4" />
    <Style name="Heading 5" element="h5" />
    <Style name="Heading 6" element="h6" />
    <Style name="Heading 7" element="h7" />
    <Style name="Heading 8" element="h8" />
    <Style name="Heading 9" element="h9" />
    <Style name="Heading 10" element="h10" />



root/fckconfig.js:
FCKConfig.FontFormats    = 'p;h1;h2;h3;h4;h5;h6;h7;h8;h9;h10;pre;address;div' ;


root/editor/js/fckeditorcode_gecko.js:
searched for h1 updated everything with h7,h8,h9,h10 including:


var FCKListsLib={BlockElements:{address:1,blockquote:1,center:1,div:1,dl:1,fieldset:1,form:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,h7:1,h8:1,h9:1,h10:1,hr:1,marquee:1,noscript:1,ol:1,p:1,pre:1,script:1,table:1,ul:1 },
NonEmptyBlockElements:{ p:1,div:1,form:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,h7:1,h8:1,h9:1,h10:1,address:1,pre:1,ol:1,ul:1,li:1,td:1,th:1 },InlineChildReqElements:{ abbr:1,acronym:1,b:1,bdo:1,big:1,cite:1,code:1,del:1,dfn:1,em:1,font:1,i:1,ins:1,label:1,kbd:1,q:1,samp:1,small:1,span:1,strike:1,strong:1,sub:1,sup:1,tt:1,u:1,'var':1 },
PathBlockElements:{ address:1,blockquote:1,dl:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,h7:1,h8:1,h9:1,h10:1,p:1,pre:1,li:1,dt:1,de:1 },PathBlockLimitElements:{ body:1,div:1,td:1,th:1,caption:1,form:1 },StyleBlockElements:{ address:1,div:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,h7:1,h8:1,h9:1,h10:1,p:1,pre:1 },
BlockBoundaries:{ p:1,div:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,h7:1,h8:1,h9:1,h10:1,hr:1,address:1,pre:1,ol:1,ul:1,li:1,dt:1,de:1,table:1,thead:1,tbody:1,tfoot:1,tr:1,th:1,td:1,caption:1,col:1,colgroup:1,blockquote:1,body:1 },
ListBoundaries:{ p:1,div:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,h7:1,h8:1,h9:1,h10:1,hr:1,address:1,pre:1,ol:1,ul:1,li:1,dt:1,de:1,table:1,thead:1,tbody:1,tfoot:1,tr:1,th:1,td:1,caption:1,col:1,colgroup:1,blockquote:1,body:1,br:1 }};

B={input:1,button:1,select:1,textarea:1,label:1};C=X({a:1},B);D=X({iframe:1},C);E={hr:1,ul:1,menu:1,div:1,blockquote:1,noscript:1,table:1,center:1,address:1,dir:1,pre:1,h5:1,dl:1,h4:1,h7:1,h8:1,h9:1,h10:1,noframes:1,h6:1,ol:1,h1:1,h3:1,h2:1};

FCK.DTD=(function(){var X=FCKTools.Merge;var A,L,J,M,N,O,D,H,P,K,Q,F,G,C,B,E,I;A={isindex:1,fieldset:1};B={input:1,button:1,select:1,textarea:1,label:1};C=X({a:1},B);D=X({iframe:1},C);E={hr:1,ul:1,menu:1,div:1,blockquote:1,noscript:1,table:1,center:1,address:1,dir:1,pre:1,h5:1,dl:1,h4:1,h7:1,h8:1,h9:1,h10:1,noframes:1,h6:1,ol:1,h1:1,h3:1,h2:1}

A.BlocksOpener=/\<(P|DIV|H1|H2|H3|H4|H5|H6|H7|H8|H9|H10|ADDRESS|PRE|OL|UL|LI|DL|DT|DD|TITLE|META|LINK|BASE|SCRIPT|LINK|TD|TH|AREA|OPTION)[^\>]*\>/gi;A.BlocksCloser=/\<\/(P|DIV|H1|H2|H3|H4|H5|H6|H7|H8|H9|H10|ADDRESS|PRE|OL|UL|LI|DL|DT|DD|TITLE|META|LINK|BASE|SCRIPT|LINK|TD|TH|AREA|OPTION)[^\>]*\>/gi;

basefont:{},h5:L,h4:L,h7:L,h8:L,h9:L,h10:L,samp:L,h6:L,ol:Q,h1:L,h3:L,option:N,h2:L,form:X

FCK.DTD=(function(){var X=FCKTools.Merge;var A,L,J,M,N,O,D,H,P,K,Q,F,G,C,B,E,I;A={isindex:1,fieldset:1};B={input:1,button:1,select:1,textarea:1,label:1};C=X({a:1},B);D=X({iframe:1},C);E={hr:1,ul:1,menu:1,div:1,blockquote:1,noscript:1,table:1,center:1,address:1,dir:1,pre:1,h5:1,dl:1,h4:1,h7:1,h8:1,h9:1,h10:1,noframes:1,h6:1,ol:1,h1:1,h3:1,h2:1};F={ins:1,del:1,script:1};G=X({b:1,acronym:1,bdo:1,'var':1,'#':1,abbr:1,code:1,br:1,i:1,cite:1,kbd:1,u:1,strike:1,s:1,tt:1,strong:1,q:1,samp:1,em:1,dfn:1,span:1},F);H=X({sub:1,img:1,object:1,sup:1,basefont:1,map:1,applet:1,font:1,big:1,small:1},G);I=X({p:1},H);J=X({iframe:1},H,B);K={img:1,noscript:1,br:1,kbd:1,center:1,button:1,basefont:1,h5:1,h4:1,h7:1,h8:1,h9:1,h10:1,samp:1,h6:1,ol:1,h1:1,h3:1,h2:1,form:1,font:1,'#':1,

var C={p:B[0],pre:B[1],address:B[2],h1:B[3],h2:B[4],h3:B[5],h4:B[6],h5:B[7],h6:B[8],h7:B[9],h8:B[10],h9:B[11],h10:B[12],div:B[13]||(B[0]+' (DIV)')};



root/editor/js/fckeditorcode_ie.js: same as above


root/editor/lang/en.js:

FontFormats            : "Normal;Formatted;Address;Heading 1;Heading 2;Heading 3;Heading 4;Heading 5;Heading 6;Heading 7;Heading 8;Heading 9;Heading10;Normal (DIV)",


root/editor/_source/classes/fcktoolbarfontformatcombo.js:(as we are running LAMS through Moodle - it is suggested in the integration notes that we remove the _source folder.  I re-implemeneted this folder to see if there was a file that may resolve my problem, however this causes LAMS to not be able to be accessed as normal through Moodle. I have therefore just placed a folder called _source with the suggested file to be changed and nothing else.

    var aNames = FCKLang['FontFormats'].split(';') ;
    var oNames = {
        p        : aNames[0],
        pre        : aNames[1],
        address        : aNames[2],
        h1        : aNames[3],
        h2        : aNames[4],
        h3        : aNames[5],
        h4        : aNames[6],
        h5        : aNames[7],
        h6        : aNames[8],
        h7        : aNames[9],
        h8        : aNames[10],
        h9        : aNames[11],
        h10        : aNames[12],
        div        : aNames[13] || ( aNames[0] + ' (DIV)')
    } ;

root/fckconfig.js:
// Basic Block Styles (Font Format Combo).
    'p'            : { Element : 'p' },
    'div'            : { Element : 'div' },
    'pre'            : { Element : 'pre' },
    'address'        : { Element : 'address' },
    'h1'            : { Element : 'h1' },
    'h2'            : { Element : 'h2' },
    'h3'            : { Element : 'h3' },
    'h4'            : { Element : 'h4' },
    'h5'            : { Element : 'h5' },
    'h6'            : { Element : 'h6' },
    'h7'            : { Element : 'h7' },
    'h8'            : { Element : 'h8' },
    'h9'            : { Element : 'h9' },
    'h10'            : { Element : 'h10' },


root/editor/js/fckeditorcode_gecko.js:removed the following:

else alert("The FCKConfig.CoreStyles['"+E+"'] setting was not found. Please check the fckconfig.js file");


root/editor/js/fckeditorcode_ie.js:
same as above


and in LAMS
lams_central/includes/javascript/fckconfig_custom.js:
FCKConfig.FontFormats    = 'div;h1;h2;h3;h4;h5;h6;h7;h8;h9;h10;pre;address;p' ;

Posted by katey 1