1 /**
  2  * Heading plugin for KISSY.
  3  * @author yiminghe@gmail.com
  4  */
  5 KISSY.add("editor/plugin/heading/index", function (S, Editor, headingCmd) {
  6 
  7     function HeadingPlugin() {
  8 
  9     }
 10 
 11     S.augment(HeadingPlugin, {
 12         renderUI:function (editor) {
 13             headingCmd.init(editor);
 14 
 15             var FORMAT_SELECTION_ITEMS = [],
 16                 FORMATS = {
 17                     普通文本:"p",
 18                     标题1:"h1",
 19                     标题2:"h2",
 20                     标题3:"h3",
 21                     标题4:"h4",
 22                     标题5:"h5",
 23                     标题6:"h6"
 24                 },
 25                 FORMAT_SIZES = {
 26                     p:"1em",
 27                     h1:"2em",
 28                     h2:"1.5em",
 29                     h3:"1.17em",
 30                     h4:"1em",
 31                     h5:"0.83em",
 32                     h6:"0.67em"
 33                 };
 34 
 35             for (var p in FORMATS) {
 36                 if (FORMATS.hasOwnProperty(p)) {
 37                     FORMAT_SELECTION_ITEMS.push({
 38                         content:p,
 39                         value:FORMATS[p],
 40                         elAttrs:{
 41                             style:"font-size:" + FORMAT_SIZES[FORMATS[p]]
 42                         }
 43                     });
 44                 }
 45             }
 46 
 47             editor.addSelect("heading", {
 48                 defaultCaption:"标题",
 49                 width:"120px",
 50                 menu:{
 51                     children:FORMAT_SELECTION_ITEMS
 52                 },
 53                 mode:Editor.WYSIWYG_MODE,
 54                 listeners:{
 55                     click:function (ev) {
 56                         var v = ev.target.get("value")
 57                         editor.execCommand("heading", v);
 58                     },
 59                     afterSyncUI:function () {
 60                         var self = this;
 61                         editor.on("selectionChange", function () {
 62                             if (editor.get("mode") == Editor.SOURCE_MODE) {
 63                                 return;
 64                             }
 65                             // For each element into the elements path.
 66                             // Check if the element is removable by any of
 67                             // the styles.
 68                             var headingValue = editor.queryCommandValue("heading");
 69                             for (var value in FORMAT_SIZES) {
 70                                 if (FORMAT_SIZES.hasOwnProperty(value) && value == headingValue) {
 71                                     self.set("value", value);
 72                                     return;
 73                                 }
 74                             }
 75                             self.set("value", null);
 76                         });
 77                     }
 78 
 79                 }
 80             });
 81         }
 82     });
 83 
 84     return HeadingPlugin;
 85 }, {
 86     requires:['editor', './cmd']
 87 });