Changeset 932

Timestamp:

2007-10-01 13:54:06 (14 months ago)

Author:

fredck

Message:

Fixed #1313 : Completed the XHTML 1.1 sample.

Location:

FCKeditor/trunk/_samples/html

Files:

• sample14.config.js (modified) (1 diff)
• sample14.html (modified) (2 diffs)
• sample14.styles.css (modified) (3 diffs)

FCKeditor/trunk/_samples/html/sample14.config.js

@@ -31 +31 @@
 FCKConfig.EditorAreaCSS = FCKConfig.BasePath + '../_samples/html/sample14.styles.css' ;
 
-// Define the CSS classes used for the alignment commands.
-FCKConfig.JustifyLeftClass              = 'JustifyLeft' ;
-FCKConfig.JustifyRightClass             = 'JustifyRight' ;
-FCKConfig.JustifyCenterClass    = 'JustifyCenter' ;
-FCKConfig.JustifyFullClass              = 'JustifyFull' ;
+/**
+ * Core styles.
+ */
+FCKConfig.CoreStyles.Bold                       = { Element : 'span', Attributes : { 'class' : 'Bold' } } ;
+FCKConfig.CoreStyles.Italic                     = { Element : 'span', Attributes : { 'class' : 'Italic' } } ;
+FCKConfig.CoreStyles.Underline          = { Element : 'span', Attributes : { 'class' : 'Underline' } } ;
+FCKConfig.CoreStyles.StrikeThrough      = { Element : 'span', Attributes : { 'class' : 'StrikeThrough' } } ;
 
-// Some buttons, like form elements, have been removed from the default toolbar
-// to make the sample simpler, but others have been removed also for XHTML 1.1
-// compliance, like the color selectors.
-FCKConfig.ToolbarSets["XHTML11"] = [
-        ['Source','-','Save','NewPage','Preview'],
-        ['Cut','Copy','Paste','-','Print','SpellCheck'],
-        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
-        '/',
-        ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
-        ['OrderedList','UnorderedList','-','Outdent','Indent'],
-        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
-        ['Link','Unlink','Anchor'],
-        ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
-        '/',
-        ['Style','FontFormat','FontName','FontSize'],
-        ['FitWindow','ShowBlocks','-','About']          // No comma for the last row.
-] ;
+/**
+ * Font face
+ */
+// List of fonts available in the toolbar combo. Each font definition is
+// separated by a semi-colon (;). We are using class names here, so each font
+// is defined by {Class Name}/{Combo Label}.
+FCKConfig.FontNames = 'FontComic/Comic Sans MS;FontCourier/Courier New;FontTimes/Times New Roman' ;
+
+// Define the way font elements will be applied to the document. The "span"
+// element will be used. When a font is selected, the font name defined in the
+// above list is passed to this definition with the name "Font", being it
+// injected in the "class" attribute.
+// We must also instruct the editor to replace span elements that are used to
+// set the font (Overrides).
+FCKConfig.CoreStyles.FontFace =
+        {
+                Element         : 'span',
+                Attributes      : { 'class' : '#("Font")' },
+                Overrides       : [ { Element : 'span', Attributes : { 'class' : /^Font(?:Comic|Courier|Times)$/ } } ]
+        } ;
+
+/**
+ * Font sizes.
+ */
+FCKConfig.FontSizes             = 'FontSmaller/Smaller;FontLarger/Larger;FontSmall/8pt;FontBig/14pt;FontDouble/Double Size' ;
+FCKConfig.CoreStyles.Size =
+        {
+                Element         : 'span',
+                Attributes      : { 'class' : '#("Size")' },
+                Overrides       : [ { Element : 'span', Attributes : { 'class' : /^Font(?:Smaller|Larger|Small|Big|Double)$/ } } ]
+        } ;
+
+/**
+ * Font colors.
+ */
+FCKConfig.EnableMoreFontColors = false ;
+FCKConfig.FontColors = 'ff9900/FontColor1,0066cc/FontColor2,ff0000/FontColor3' ;
+FCKConfig.CoreStyles.Color =
+        {
+                Element         : 'span',
+                Attributes      : { 'class' : '#("Color")' },
+                Overrides       : [ { Element : 'span', Attributes : { 'class' : /^FontColor(?:1|2|3)$/ } } ]
+        } ;
+
+FCKConfig.CoreStyles.BackColor =
+        {
+                Element         : 'span',
+                Attributes      : { 'class' : '#("Color")BG' },
+                Overrides       : [ { Element : 'span', Attributes : { 'class' : /^FontColor(?:1|2|3)BG$/ } } ]
+        } ;
+
+/**
+ * Indentation.
+ */
+FCKConfig.IndentClasses = [ 'Indent1', 'Indent2', 'Indent3' ] ;
+
+/**
+ * Paragraph justification.
+ */
+FCKConfig.JustifyClasses = [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ] ;
+
+/**
+ * Styles combo.
+ */
+FCKConfig.StylesXmlPath = '' ;
+FCKConfig.CustomStyles =
+        {
+                'Strong Emphasis' : { Element : 'strong' },
+                'Emphasis' : { Element : 'em' },
+
+                'Computer Code' : { Element : 'code' },
+                'Keyboard Phrase' : { Element : 'kbd' },
+                'Sample Text' : { Element : 'samp' },
+                'Variable' : { Element : 'var' },
+
+                'Deleted Text' : { Element : 'del' },
+                'Inserted Text' : { Element : 'ins' },
+
+                'Cited Work' : { Element : 'cite' },
+                'Inline Quotation' : { Element : 'q' }
+        } ;

FCKeditor/trunk/_samples/html/sample14.html

@@ -35 +35 @@
         </h1>
         <div>
-                This sample shows FCKeditor configured for <strong>XHTML 1.1</strong> compliance.
+                This sample shows FCKeditor configured to produce <strong>XHTML 1.1</strong> compliant
+                HTML. Deprecated elements or attributes, like the &lt;font&gt; and &lt;u&gt; elements
+                or the "style" attribute, are avoided.
+        </div>
         <hr />
-        </div>
         <form action="sampleposteddata.asp" method="post" target="_blank">
                 <script type="text/javascript">
@@ -54 +56 @@
 
 oFCKeditor.Height = 300 ;
-oFCKeditor.Value = '<p>This is some <strong>sample text<\/strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor<\/a>.<\/p>' ;
+oFCKeditor.Value = '<p>This is some <span class="Bold">sample text<\/span>. You are using <a href="http://www.fckeditor.net/">FCKeditor<\/a>.<\/p>' ;
 oFCKeditor.Create() ;
 //-->

FCKeditor/trunk/_samples/html/sample14.styles.css

@@ -40 +40 @@
 a[href]
 {
-        color: #0000FF !important;      /* For Firefox... mark as important, otherwise it becomes black */
-}
-
-/**
- * Alignment command classes.
+        color: #0000FF !important; /* For Firefox... mark as important, otherwise it becomes black */
+}
+
+/**
+ * Core styles.
+ */
+
+.Bold
+{
+        font-weight: bold;
+}
+
+.Italic
+{
+        font-style: italic;
+}
+
+.Underline
+{
+        text-decoration: underline;
+}
+
+.StrikeThrough
+{
+        text-decoration: line-through;
+}
+
+.Subscript
+{
+        vertical-align: sub;
+        font-size: smaller;
+}
+
+.Superscript
+{
+        vertical-align: super;
+        font-size: smaller;
+}
+
+/**
+ * Font faces.
+ */
+
+.FontComic
+{
+        font-family: 'Comic Sans MS';
+}
+
+.FontCourier
+{
+        font-family: 'Courier New';
+}
+
+.FontTimes
+{
+        font-family: 'Times New Roman';
+}
+
+/**
+ * Font sizes.
+ */
+
+.FontSmaller
+{
+        font-size: smaller;
+}
+
+.FontLarger
+{
+        font-size: larger;
+}
+
+.FontSmall
+{
+        font-size: 8pt;
+}
+
+.FontBig
+{
+        font-size: 14pt;
+}
+
+.FontDouble
+{
+        font-size: 200%;
+}
+
+/**
+ * Font colors.
+ */
+.FontColor1
+{
+        color: #ff9900;
+}
+
+.FontColor2
+{
+        color: #0066cc;
+}
+
+.FontColor3
+{
+        color: #ff0000;
+}
+
+.FontColor1BG
+{
+        background-color: #ff9900;
+}
+
+.FontColor2BG
+{
+        background-color: #0066cc;
+}
+
+.FontColor3BG
+{
+        background-color: #ff0000;
+}
+
+/**
+ * Indentation.
+ */
+
+.Indent1
+{
+        margin-left: 40px;
+}
+
+.Indent2
+{
+        margin-left: 80px;
+}
+
+.Indent3
+{
+        margin-left: 120px;
+}
+
+/**
+ * Alignment.
  */
 
@@ -60 +196 @@
 {
         text-align: center;
-        background-color:Red;
 }
 
@@ -67 +202 @@
         text-align: justify;
 }
+
+/**
+ * Other.
+ */
+
+code
+{
+        font-family: courier, monospace;
+        background-color: #eeeeee;
+        padding-left: 1px;
+        padding-right: 1px;
+        border: #c0c0c0 1px solid;
+}
+
+kbd
+{
+        padding: 0px 1px 0px 1px;
+        border-width: 1px 2px 2px 1px;
+        border-style: solid;
+}
+
+blockquote
+{
+        color: #808080;
+}