├── Tiny-editor.js ├── README.md ├── editor.html └── Tiny-editor.css /Tiny-editor.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lipten/Tiny-editor/HEAD/Tiny-editor.js -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | demo案例： 2 | http://codeasily.net/editor 3 | 4 | ### -update v0.1- 5 | 1.测试版，目前有个别功能不稳定。 6 | 7 | ----- 8 | ### Usage 9 | 10 | #### 1、下载Tiny-editor 11 | ``` 12 | git clone https://github.com/lipten/Tiny-editor.git 13 | ``` 14 | 15 | 16 | #### 2、引用相关文件 17 | ``` 18 | 19 | ``` 20 | 21 | #### 3、引用js文件 22 | ``` 23 | 24 | 25 | 26 | ``` 27 | 28 | #### 4、html结构 29 | ``` 30 | //--html结构比较复杂，看下载后的editor.html比较完整 31 | ``` 32 | 33 | 34 | #### 5、初始化代码 35 | ``` 36 | var Tiny = new TinyEditor() 37 | ``` 38 | 39 | ------- 40 | 41 | ## Method 42 | 43 | #### Tiny.tab(num) 44 | tab显示第几个面板，num传序号，从1开始 45 | 46 | #### Tiny.run() 47 | 运行结果并跳到result面板 48 | 49 | #### Tiny.save() 50 | 保存代码至缓存 51 | 52 | #### Tiny.fullScreen() 53 | 全屏模式开启或关闭 54 | 55 | #### Tiny.dockMode() 56 | dock边栏模式开启或关闭 57 | 58 | #### Tiny.liveMode() 59 | 实时运行模式，发生change事件时执行一次，仅开启dock模式的前提下才能开启 60 | 61 | -------------------------------------------------------------------------------- /editor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Tiny Editor

12 | 13 | 14 | 15 |

16 |

HTML
CSS
JavaScript
Result

22 | Run 23 | Save 24 | Full-Screen 25 | Dock-Mode 26 | 27 | 28 |

29 |

30 | <h1>
31 |     Hello~
32 | </h1>
33 |

34 |

35 | 36 |

37 |

38 | h1{
39 |     color:red;
40 | }
41 |

42 |

43 | 44 | 45 |

46 |

47 | 
48 | document.getElementsByTagName('h1')[0].innerHTML='Hello World!'
49 | 
50 |

51 | 52 |

53 |

54 |

55 | 57 |

58 |

59 | 60 | 61 | 62 | 63 | 64 | 65 | 70 | 71 | -------------------------------------------------------------------------------- /Tiny-editor.css: -------------------------------------------------------------------------------- 1 | body,html{ 2 | margin:0; 3 | padding: 10px; 4 | -webkit-box-sizing: border-box; 5 | -moz-box-sizing: border-box; 6 | box-sizing: border-box; 7 | height:100%; 8 | width:100%; 9 | } 10 | ul{ 11 | list-style: none; 12 | 13 | } 14 | 15 | .hide{ 16 | display: none; 17 | } 18 | 19 | .tabPlugin{ 20 | width:100%; 21 | height:460px; 22 | position: relative; 23 | padding-top: 40px; 24 | -webkit-box-sizing: border-box; 25 | -moz-box-sizing: border-box; 26 | box-sizing: border-box; 27 | } 28 | .tabPlugin.full{ 29 | height:100%; 30 | position: fixed; 31 | z-index:10; 32 | top:0; 33 | left:0; 34 | width: 100%; 35 | } 36 | 37 | .tabPlugin ul{ 38 | padding: 0; 39 | margin: 0; 40 | width:100%; 41 | background: #ccc; 42 | height: 40px; 43 | margin-top:-40px; 44 | } 45 | .tabPlugin li{ 46 | width:100px; 47 | height:40px; 48 | text-align: center; 49 | background: #ccc; 50 | float: left; 51 | line-height: 40px; 52 | cursor: pointer; 53 | } 54 | .tabPlugin li.active{ 55 | background: #272822; 56 | color: #fff; 57 | } 58 | 59 | 60 | .tabPlugin .tabContainer{ 61 | position: absolute; 62 | top: 40px; 63 | left: 0 ; 64 | z-index: 0; 65 | width:100%; 66 | height:100%; 67 | -webkit-transition: opacity .3s; 68 | -moz-transition: opacity .3s; 69 | -ms-transition: opacity .3s; 70 | -o-transition: opacity .3s; 71 | transition: opacity .3s; 72 | opacity: 0; 73 | } 74 | 75 | .tabPlugin .tabContainer.dockMode{ 76 | opacity: 1; 77 | z-index: 1; 78 | right: 0; 79 | left: auto; 80 | width: 300px; 81 | } 82 | 83 | .tabPlugin .tabContainer.current{ 84 | z-index:1; 85 | opacity:1; 86 | } 87 | 88 | .tabPlugin .tabContainer.dockMode .split-line{ 89 | position: absolute; 90 | width:20px; 91 | height:100%; 92 | left: -10px; 93 | text-align: center; 94 | } 95 | 96 | .tabPlugin .tabContainer.dockMode .split-line:after{ 97 | content:""; 98 | width:2px; 99 | height:100%; 100 | background: #fff; 101 | display: inline-block; 102 | } 103 | 104 | .tabPlugin .tabContainer.dockMode .split-line:hover{ 105 | cursor: e-resize; 106 | } 107 | 108 | .tabContainer pre{ 109 | width:100%; 110 | height:100%; 111 | margin:0; 112 | } 113 | 114 | .button{ 115 | position: absolute; 116 | right: 10px ; 117 | display: inline-block; 118 | padding:0px 15px; 119 | height:30px; 120 | line-height: 30px; 121 | text-align: center; 122 | top:5px; 123 | background: #272822; 124 | color:#fff; 125 | z-index:1; 126 | cursor: pointer; 127 | } 128 | .button:hover{ 129 | background: #44463d; 130 | } 131 | 132 | .button.active{ 133 | background: #717368; 134 | } 135 | 136 | .save{ 137 | right:80px; 138 | } 139 | .full{ 140 | right:160px; 141 | } 142 | .dock{ 143 | right:295px; 144 | } 145 | 146 | .live{ 147 | right:396px; 148 | height:25px; 149 | line-height: 25px; 150 | top: 8px; 151 | } 152 | .live.hide{ 153 | display: none; 154 | } 155 | 156 | .iframe.fullScreen{ 157 | position: fixed; 158 | width:100%; 159 | height: 100%; 160 | top: 0; 161 | left: 0; 162 | } 163 | 164 | .iframe{ 165 | width:100%;height: 100%;background: #272822; 166 | } 167 | 168 | 169 | select{ 170 | position: absolute; 171 | top: -37px; 172 | right: 0; 173 | } --------------------------------------------------------------------------------