2. 程式人生 > >一個文章線上編輯器的實現

一個文章線上編輯器的實現

阿新 • • 發佈：2019-01-17

如圖一個文章線上編輯器OnlineEdit.asp 程式碼如下：

**************************************************************************************

<!--#include file="Edit.asp"-->             ' 如圖的1

<script language="javascript">             ' 如圖的2內嵌一個可被編輯的頁面
document.write ('<iframe src="Text.asp" id="message" width="550" height="350"></iframe>')
frames.message.document.designMode = "On";
</script>

<script src="Edit.js" type="text/javascript"></script>             ' 現實圖1編輯功能所要引用的Js檔案

**************************************************************************************

Edit.asp程式碼如下（另外還需些Html頁面，如程式碼中顯示）：

**************************************************************************************

<select name="selectFont" onChange="FormatText('fontname', selectFont.options[selectFont.selectedIndex].value);document.form1.selectFont.options[0].selected = true;"  style="font-family: 宋體; font-size: 9pt" onMouseOver="window.status='選擇選定文字的字型。';return true;" onMouseOut="window.status='';return true;">
<option selected>選擇字型</option>
<option value="宋體">宋體</option>
<option value="楷體_GB2312">楷體</option>
<option value="新宋體">新宋體</option>
<option value="黑體">黑體</option>
<option value="隸書">隸書</option>
<option value="幼圓">幼圓</option>
<OPTION value="Andale Mono">Andale Mono</OPTION>
<OPTION value=Arial>Arial</OPTION>
<OPTION value="Arial Black">Arial Black</OPTION>
<OPTION value="Book Antiqua">Book Antiqua</OPTION>
<OPTION value="Century Gothic">Century Gothic</OPTION>
<OPTION value="Comic Sans MS">Comic Sans MS</OPTION>
<OPTION value="Courier New">Courier New</OPTION>
<OPTION value=Georgia>Georgia</OPTION>
<OPTION value=Impact>Impact</OPTION>
<OPTION value=Tahoma>Tahoma</OPTION>
<OPTION value="Times New Roman" >Times New Roman</OPTION>
<OPTION value="Trebuchet MS">Trebuchet MS</OPTION>
<OPTION value="Script MT Bold">Script MT Bold</OPTION>
<OPTION value=Stencil>Stencil</OPTION>
<OPTION value=Verdana>Verdana</OPTION>
<OPTION value="Lucida Console">Lucida Console</OPTION>
</select>
<select name="selectColour" onChange="FormatText('ForeColor',selectColour.options[selectColour.selectedIndex].value);document.form1.selectColour.options[0].selected = true;" onMouseOver="window.status='選擇選定文字的顏色。';return true;" onMouseOut="window.status='';return true;">
<option value="0" selected>選擇文字顏色</option>
<option style="background-color:#F0F8FF;color: #F0F8FF" value="#F0F8FF">#F0F8FF</option>
<option style="background-color:#FAEBD7;color: #FAEBD7" value="#FAEBD7">#FAEBD7</option>
<option style="background-color:#00FFFF;color: #00FFFF" value="#00FFFF">#00FFFF</option>
<option style="background-color:#7FFFD4;color: #7FFFD4" value="#7FFFD4">#7FFFD4</option>
<option style="background-color:#F0FFFF;color: #F0FFFF" value="#F0FFFF">#F0FFFF</option>
<option style="background-color:#F5F5DC;color: #F5F5DC" value="#F5F5DC">#F5F5DC</option>
<option style="background-color:#FFE4C4;color: #FFE4C4" value="#FFE4C4">#FFE4C4</option>
<option style="background-color:#000000;color: #000000" value="#000000">#000000</option>
<option style="background-color:#FFEBCD;color: #FFEBCD" value="#FFEBCD">#FFEBCD</option>
<option style="background-color:#0000FF;color: #0000FF" value="#0000FF">#0000FF</option>
<option style="background-color:#8A2BE2;color: #8A2BE2" value="#8A2BE2">#8A2BE2</option>
<option style="background-color:#A52A2A;color: #A52A2A" value="#A52A2A">#A52A2A</option>
<option style="background-color:#DEB887;color: #DEB887" value="#DEB887">#DEB887</option>
<option style="background-color:#5F9EA0;color: #5F9EA0" value="#5F9EA0">#5F9EA0</option>
<option style="background-color:#7FFF00;color: #7FFF00" value="#7FFF00">#7FFF00</option>
<option style="background-color:#D2691E;color: #D2691E" value="#D2691E">#D2691E</option>
<option style="background-color:#FF7F50;color: #FF7F50" value="#FF7F50">#FF7F50</option>
<option style="background-color:#6495ED;color: #6495ED" value="#6495ED">#6495ED</option>
<option style="background-color:#FFF8DC;color: #FFF8DC" value="#FFF8DC">#FFF8DC</option>
<option style="background-color:#DC143C;color: #DC143C" value="#DC143C">#DC143C</option>
<option style="background-color:#00FFFF;color: #00FFFF" value="#00FFFF">#00FFFF</option>
<option style="background-color:#00008B;color: #00008B" value="#00008B">#00008B</option>
<option style="background-color:#008B8B;color: #008B8B" value="#008B8B">#008B8B</option>
<option style="background-color:#B8860B;color: #B8860B" value="#B8860B">#B8860B</option>
<option style="background-color:#A9A9A9;color: #A9A9A9" value="#A9A9A9">#A9A9A9</option>
<option style="background-color:#006400;color: #006400" value="#006400">#006400</option>
<option style="background-color:#BDB76B;color: #BDB76B" value="#BDB76B">#BDB76B</option>
<option style="background-color:#8B008B;color: #8B008B" value="#8B008B">#8B008B</option>
<option style="background-color:#556B2F;color: #556B2F" value="#556B2F">#556B2F</option>
<option style="background-color:#FF8C00;color: #FF8C00" value="#FF8C00">#FF8C00</option>
<option style="background-color:#9932CC;color: #9932CC" value="#9932CC">#9932CC</option>
<option style="background-color:#8B0000;color: #8B0000" value="#8B0000">#8B0000</option>
<option style="background-color:#E9967A;color: #E9967A" value="#E9967A">#E9967A</option>
<option style="background-color:#8FBC8F;color: #8FBC8F" value="#8FBC8F">#8FBC8F</option>
<option style="background-color:#483D8B;color: #483D8B" value="#483D8B">#483D8B</option>
<option style="background-color:#2F4F4F;color: #2F4F4F" value="#2F4F4F">#2F4F4F</option>
<option style="background-color:#00CED1;color: #00CED1" value="#00CED1">#00CED1</option>
<option style="background-color:#9400D3;color: #9400D3" value="#9400D3">#9400D3</option>
<option style="background-color:#FF1493;color: #FF1493" value="#FF1493">#FF1493</option>
<option style="background-color:#00BFFF;color: #00BFFF" value="#00BFFF">#00BFFF</option>
<option style="background-color:#696969;color: #696969" value="#696969">#696969</option>
<option style="background-color:#1E90FF;color: #1E90FF" value="#1E90FF">#1E90FF</option>
<option style="background-color:#B22222;color: #B22222" value="#B22222">#B22222</option>
<option style="background-color:#FFFAF0;color: #FFFAF0" value="#FFFAF0">#FFFAF0</option>
<option style="background-color:#228B22;color: #228B22" value="#228B22">#228B22</option>
<option style="background-color:#FF00FF;color: #FF00FF" value="#FF00FF">#FF00FF</option>
<option style="background-color:#DCDCDC;color: #DCDCDC" value="#DCDCDC">#DCDCDC</option>
<option style="background-color:#F8F8FF;color: #F8F8FF" value="#F8F8FF">#F8F8FF</option>
<option style="background-color:#FFD700;color: #FFD700" value="#FFD700">#FFD700</option>
<option style="background-color:#DAA520;color: #DAA520" value="#DAA520">#DAA520</option>
<option style="background-color:#808080;color: #808080" value="#808080">#808080</option>
<option style="background-color:#008000;color: #008000" value="#008000">#008000</option>
<option style="background-color:#ADFF2F;color: #ADFF2F" value="#ADFF2F">#ADFF2F</option>
<option style="background-color:#F0FFF0;color: #F0FFF0" value="#F0FFF0">#F0FFF0</option>
<option style="background-color:#FF69B4;color: #FF69B4" value="#FF69B4">#FF69B4</option>
<option style="background-color:#CD5C5C;color: #CD5C5C" value="#CD5C5C">#CD5C5C</option>
<option style="background-color:#4B0082;color: #4B0082" value="#4B0082">#4B0082</option>
<option style="background-color:#FFFFF0;color: #FFFFF0" value="#FFFFF0">#FFFFF0</option>
<option style="background-color:#F0E68C;color: #F0E68C" value="#F0E68C">#F0E68C</option>
<option style="background-color:#E6E6FA;color: #E6E6FA" value="#E6E6FA">#E6E6FA</option>
<option style="background-color:#FFF0F5;color: #FFF0F5" value="#FFF0F5">#FFF0F5</option>
<option style="background-color:#7CFC00;color: #7CFC00" value="#7CFC00">#7CFC00</option>
<option style="background-color:#FFFACD;color: #FFFACD" value="#FFFACD">#FFFACD</option>
<option style="background-color:#ADD8E6;color: #ADD8E6" value="#ADD8E6">#ADD8E6</option>
<option style="background-color:#F08080;color: #F08080" value="#F08080">#F08080</option>
<option style="background-color:#E0FFFF;color: #E0FFFF" value="#E0FFFF">#E0FFFF</option>
<option style="background-color:#FAFAD2;color: #FAFAD2" value="#FAFAD2">#FAFAD2</option>
<option style="background-color:#90EE90;color: #90EE90" value="#90EE90">#90EE90</option>
<option style="background-color:#D3D3D3;color: #D3D3D3" value="#D3D3D3">#D3D3D3</option>
<option style="background-color:#FFB6C1;color: #FFB6C1" value="#FFB6C1">#FFB6C1</option>
<option style="background-color:#FFA07A;color: #FFA07A" value="#FFA07A">#FFA07A</option>
<option style="background-color:#20B2AA;color: #20B2AA" value="#20B2AA">#20B2AA</option>
<option style="background-color:#87CEFA;color: #87CEFA" value="#87CEFA">#87CEFA</option>
<option style="background-color:#778899;color: #778899" value="#778899">#778899</option>
<option style="background-color:#B0C4DE;color: #B0C4DE" value="#B0C4DE">#B0C4DE</option>
<option style="background-color:#FFFFE0;color: #FFFFE0" value="#FFFFE0">#FFFFE0</option>
<option style="background-color:#00FF00;color: #00FF00" value="#00FF00">#00FF00</option>
<option style="background-color:#32CD32;color: #32CD32" value="#32CD32">#32CD32</option>
<option style="background-color:#FAF0E6;color: #FAF0E6" value="#FAF0E6">#FAF0E6</option>
<option style="background-color:#FF00FF;color: #FF00FF" value="#FF00FF">#FF00FF</option>
<option style="background-color:#800000;color: #800000" value="#800000">#800000</option>
<option style="background-color:#66CDAA;color: #66CDAA" value="#66CDAA">#66CDAA</option>
<option style="background-color:#0000CD;color: #0000CD" value="#0000CD">#0000CD</option>
<option style="background-color:#BA55D3;color: #BA55D3" value="#BA55D3">#BA55D3</option>
<option style="background-color:#9370DB;color: #9370DB" value="#9370DB">#9370DB</option>
<option style="background-color:#3CB371;color: #3CB371" value="#3CB371">#3CB371</option>
<option style="background-color:#7B68EE;color: #7B68EE" value="#7B68EE">#7B68EE</option>
<option style="background-color:#00FA9A;color: #00FA9A" value="#00FA9A">#00FA9A</option>
<option style="background-color:#48D1CC;color: #48D1CC" value="#48D1CC">#48D1CC</option>
<option style="background-color:#C71585;color: #C71585" value="#C71585">#C71585</option>
<option style="background-color:#191970;color: #191970" value="#191970">#191970</option>
<option style="background-color:#F5FFFA;color: #F5FFFA" value="#F5FFFA">#F5FFFA</option>
<option style="background-color:#FFE4E1;color: #FFE4E1" value="#FFE4E1">#FFE4E1</option>
<option style="background-color:#FFE4B5;color: #FFE4B5" value="#FFE4B5">#FFE4B5</option>
<option style="background-color:#FFDEAD;color: #FFDEAD" value="#FFDEAD">#FFDEAD</option>
<option style="background-color:#000080;color: #000080" value="#000080">#000080</option>
<option style="background-color:#FDF5E6;color: #FDF5E6" value="#FDF5E6">#FDF5E6</option>
<option style="background-color:#808000;color: #808000" value="#808000">#808000</option>
<option style="background-color:#6B8E23;color: #6B8E23" value="#6B8E23">#6B8E23</option>
<option style="background-color:#FFA500;color: #FFA500" value="#FFA500">#FFA500</option>
<option style="background-color:#FF4500;color: #FF4500" value="#FF4500">#FF4500</option>
<option style="background-color:#DA70D6;color: #DA70D6" value="#DA70D6">#DA70D6</option>
<option style="background-color:#EEE8AA;color: #EEE8AA" value="#EEE8AA">#EEE8AA</option>
<option style="background-color:#98FB98;color: #98FB98" value="#98FB98">#98FB98</option>
<option style="background-color:#AFEEEE;color: #AFEEEE" value="#AFEEEE">#AFEEEE</option>
<option style="background-color:#DB7093;color: #DB7093" value="#DB7093">#DB7093</option>
<option style="background-color:#FFEFD5;color: #FFEFD5" value="#FFEFD5">#FFEFD5</option>
<option style="background-color:#FFDAB9;color: #FFDAB9" value="#FFDAB9">#FFDAB9</option>
<option style="background-color:#CD853F;color: #CD853F" value="#CD853F">#CD853F</option>
<option style="background-color:#FFC0CB;color: #FFC0CB" value="#FFC0CB">#FFC0CB</option>
<option style="background-color:#DDA0DD;color: #DDA0DD" value="#DDA0DD">#DDA0DD</option>
<option style="background-color:#B0E0E6;color: #B0E0E6" value="#B0E0E6">#B0E0E6</option>
<option style="background-color:#800080;color: #800080" value="#800080">#800080</option>
<option style="background-color:#FF0000;color: #FF0000" value="#FF0000">#FF0000</option>
<option style="background-color:#BC8F8F;color: #BC8F8F" value="#BC8F8F">#BC8F8F</option>
<option style="background-color:#4169E1;color: #4169E1" value="#4169E1">#4169E1</option>
<option style="background-color:#8B4513;color: #8B4513" value="#8B4513">#8B4513</option>
<option style="background-color:#FA8072;color: #FA8072" value="#FA8072">#FA8072</option>
<option style="background-color:#F4A460;color: #F4A460" value="#F4A460">#F4A460</option>
<option style="background-color:#2E8B57;color: #2E8B57" value="#2E8B57">#2E8B57</option>
<option style="background-color:#FFF5EE;color: #FFF5EE" value="#FFF5EE">#FFF5EE</option>
<option style="background-color:#A0522D;color: #A0522D" value="#A0522D">#A0522D</option>
<option style="background-color:#C0C0C0;color: #C0C0C0" value="#C0C0C0">#C0C0C0</option>
<option style="background-color:#87CEEB;color: #87CEEB" value="#87CEEB">#87CEEB</option>
<option style="background-color:#6A5ACD;color: #6A5ACD" value="#6A5ACD">#6A5ACD</option>
<option style="background-color:#708090;color: #708090" value="#708090">#708090</option>
<option style="background-color:#FFFAFA;color: #FFFAFA" value="#FFFAFA">#FFFAFA</option>
<option style="background-color:#00FF7F;color: #00FF7F" value="#00FF7F">#00FF7F</option>
<option style="background-color:#4682B4;color: #4682B4" value="#4682B4">#4682B4</option>
<option style="background-color:#D2B48C;color: #D2B48C" value="#D2B48C">#D2B48C</option>
<option style="background-color:#008080;color: #008080" value="#008080">#008080</option>
<option style="background-color:#D8BFD8;color: #D8BFD8" value="#D8BFD8">#D8BFD8</option>
<option style="background-color:#FF6347;color: #FF6347" value="#FF6347">#FF6347</option>
<option style="background-color:#40E0D0;color: #40E0D0" value="#40E0D0">#40E0D0</option>
<option style="background-color:#EE82EE;color: #EE82EE" value="#EE82EE">#EE82EE</option>
<option style="background-color:#F5DEB3;color: #F5DEB3" value="#F5DEB3">#F5DEB3</option>
<option style="background-color:#FFFFFF;color: #FFFFFF" value="#FFFFFF">#FFFFFF</option>
<option style="background-color:#F5F5F5;color: #F5F5F5" value="#F5F5F5">#F5F5F5</option>
<option style="background-color:#FFFF00;color: #FFFF00" value="#FFFF00">#FFFF00</option>
<option style="background-color:#9ACD32;color: #9ACD32" value="#9ACD32">#9ACD32</option>
</select>
<select name="selectbgColour" onChange="FormatText('BackColor',selectbgColour.options[selectbgColour.selectedIndex].value);document.form1.selectbgColour.options[0].selected = true;" onMouseOver="window.status='選擇選定文字的背景顏色。';return true;" onMouseOut="window.status='';return true;">
<option value="0" selected>選擇文字背景顏色</option>
<option style="background-color:#F0F8FF;color: #F0F8FF" value="#F0F8FF">#F0F8FF</option>
<option style="background-color:#FAEBD7;color: #FAEBD7" value="#FAEBD7">#FAEBD7</option>
<option style="background-color:#00FFFF;color: #00FFFF" value="#00FFFF">#00FFFF</option>
<option style="background-color:#7FFFD4;color: #7FFFD4" value="#7FFFD4">#7FFFD4</option>
<option style="background-color:#F0FFFF;color: #F0FFFF" value="#F0FFFF">#F0FFFF</option>
<option style="background-color:#F5F5DC;color: #F5F5DC" value="#F5F5DC">#F5F5DC</option>
<option style="background-color:#FFE4C4;color: #FFE4C4" value="#FFE4C4">#FFE4C4</option>
<option style="background-color:#000000;color: #000000" value="#000000">#000000</option>
<option style="background-color:#FFEBCD;color: #FFEBCD" value="#FFEBCD">#FFEBCD</option>
<option style="background-color:#0000FF;color: #0000FF" value="#0000FF">#0000FF</option>
<option style="background-color:#8A2BE2;color: #8A2BE2" value="#8A2BE2">#8A2BE2</option>
<option style="background-color:#A52A2A;color: #A52A2A" value="#A52A2A">#A52A2A</option>
<option style="background-color:#DEB887;color: #DEB887" value="#DEB887">#DEB887</option>
<option style="background-color:#5F9EA0;color: #5F9EA0" value="#5F9EA0">#5F9EA0</option>
<option style="background-color:#7FFF00;color: #7FFF00" value="#7FFF00">#7FFF00</option>
<option style="background-color:#D2691E;color: #D2691E" value="#D2691E">#D2691E</option>
<option style="background-color:#FF7F50;color: #FF7F50" value="#FF7F50">#FF7F50</option>
<option style="background-color:#6495ED;color: #6495ED" value="#6495ED">#6495ED</option>
<option style="background-color:#FFF8DC;color: #FFF8DC" value="#FFF8DC">#FFF8DC</option>
<option style="background-color:#DC143C;color: #DC143C" value="#DC143C">#DC143C</option>
<option style="background-color:#00FFFF;color: #00FFFF" value="#00FFFF">#00FFFF</option>
<option style="background-color:#00008B;color: #00008B" value="#00008B">#00008B</option>
<option style="background-color:#008B8B;color: #008B8B" value="#008B8B">#008B8B</option>
<option style="background-color:#B8860B;color: #B8860B" value="#B8860B">#B8860B</option>
<option style="background-color:#A9A9A9;color: #A9A9A9" value="#A9A9A9">#A9A9A9</option>
<option style="background-color:#006400;color: #006400" value="#006400">#006400</option>
<option style="background-color:#BDB76B;color: #BDB76B" value="#BDB76B">#BDB76B</option>
<option style="background-color:#8B008B;color: #8B008B" value="#8B008B">#8B008B</option>
<option style="background-color:#556B2F;color: #556B2F" value="#556B2F">#556B2F</option>
<option style="background-color:#FF8C00;color: #FF8C00" value="#FF8C00">#FF8C00</option>
<option style="background-color:#9932CC;color: #9932CC" value="#9932CC">#9932CC</option>
<option style="background-color:#8B0000;color: #8B0000" value="#8B0000">#8B0000</option>
<option style="background-color:#E9967A;color: #E9967A" value="#E9967A">#E9967A</option>
<option style="background-color:#8FBC8F;color: #8FBC8F" value="#8FBC8F">#8FBC8F</option>
<option style="background-color:#483D8B;color: #483D8B" value="#483D8B">#483D8B</option>
<option style="background-color:#2F4F4F;color: #2F4F4F" value="#2F4F4F">#2F4F4F</option>
<option style="background-color:#00CED1;color: #00CED1" value="#00CED1">#00CED1</option>
<option style="background-color:#9400D3;color: #9400D3" value="#9400D3">#9400D3</option>
<option style="background-color:#FF1493;color: #FF1493" value="#FF1493">#FF1493</option>
<option style="background-color:#00BFFF;color: #00BFFF" value="#00BFFF">#00BFFF</option>
<option style="background-color:#696969;color: #696969" value="#696969">#696969</option>
<option style="background-color:#1E90FF;color: #1E90FF" value="#1E90FF">#1E90FF</option>
<option style="background-color:#B22222;color: #B22222" value="#B22222">#B22222</option>
<option style="background-color:#FFFAF0;color: #FFFAF0" value="#FFFAF0">#FFFAF0</option>
<option style="background-color:#228B22;color: #228B22" value="#228B22">#228B22</option>
<option style="background-color:#FF00FF;color: #FF00FF" value="#FF00FF">#FF00FF</option>
<option style="background-color:#DCDCDC;color: #DCDCDC" value="#DCDCDC">#DCDCDC</option>
<option style="background-color:#F8F8FF;color: #F8F8FF" value="#F8F8FF">#F8F8FF</option>
<option style="background-color:#FFD700;color: #FFD700" value="#FFD700">#FFD700</option>
<option style="background-color:#DAA520;color: #DAA520" value="#DAA520">#DAA520</option>
<option style="background-color:#808080;color: #808080" value="#808080">#808080</option>
<option style="background-color:#008000;color: #008000" value="#008000">#008000</option>
<option style="background-color:#ADFF2F;color: #ADFF2F" value="#ADFF2F">#ADFF2F</option>
<option style="background-color:#F0FFF0;color: #F0FFF0" value="#F0FFF0">#F0FFF0</option>
<option style="background-color:#FF69B4;color: #FF69B4" value="#FF69B4">#FF69B4</option>
<option style="background-color:#CD5C5C;color: #CD5C5C" value="#CD5C5C">#CD5C5C</option>
<option style="background-color:#4B0082;color: #4B0082" value="#4B0082">#4B0082</option>
<option style="background-color:#FFFFF0;color: #FFFFF0" value="#FFFFF0">#FFFFF0</option>
<option style="background-color:#F0E68C;color: #F0E68C" value="#F0E68C">#F0E68C</option>
<option style="background-color:#E6E6FA;color: #E6E6FA" value="#E6E6FA">#E6E6FA</option>
<option style="background-color:#FFF0F5;color: #FFF0F5" value="#FFF0F5">#FFF0F5</option>
<option style="background-color:#7CFC00;color: #7CFC00" value="#7CFC00">#7CFC00</option>
<option style="background-color:#FFFACD;color: #FFFACD" value="#FFFACD">#FFFACD</option>
<option style="background-color:#ADD8E6;color: #ADD8E6" value="#ADD8E6">#ADD8E6</option>
<option style="background-color:#F08080;color: #F08080" value="#F08080">#F08080</option>
<option style="background-color:#E0FFFF;color: #E0FFFF" value="#E0FFFF">#E0FFFF</option>
<option style="background-color:#FAFAD2;color: #FAFAD2" value="#FAFAD2">#FAFAD2</option>
<option style="background-color:#90EE90;color: #90EE90" value="#90EE90">#90EE90</option>
<option style="background-color:#D3D3D3;color: #D3D3D3" value="#D3D3D3">#D3D3D3</option>
<option style="background-color:#FFB6C1;color: #FFB6C1" value="#FFB6C1">#FFB6C1</option>
<option style="background-color:#FFA07A;color: #FFA07A" value="#FFA07A">#FFA07A</option>
<option style="background-color:#20B2AA;color: #20B2AA" value="#20B2AA">#20B2AA</option>
<option style="background-color:#87CEFA;color: #87CEFA" value="#87CEFA">#87CEFA</option>
<option style="background-color:#778899;color: #778899" value="#778899">#778899</option>
<option style="background-color:#B0C4DE;color: #B0C4DE" value="#B0C4DE">#B0C4DE</option>
<option style="background-color:#FFFFE0;color: #FFFFE0" value="#FFFFE0">#FFFFE0</option>
<option style="background-color:#00FF00;color: #00FF00" value="#00FF00">#00FF00</option>
<option style="background-color:#32CD32;color: #32CD32" value="#32CD32">#32CD32</option>
<option style="background-color:#FAF0E6;color: #FAF0E6" value="#FAF0E6">#FAF0E6</option>
<option style="background-color:#FF00FF;color: #FF00FF" value="#FF00FF">#FF00FF</option>
<option style="background-color:#800000;color: #800000" value="#800000">#800000</option>
<option style="background-color:#66CDAA;color: #66CDAA" value="#66CDAA">#66CDAA</option>
<option style="background-color:#0000CD;color: #0000CD" value="#0000CD">#0000CD</option>
<option style="background-color:#BA55D3;color: #BA55D3" value="#BA55D3">#BA55D3</option>
<option style="background-color:#9370DB;color: #9370DB" value="#9370DB">#9370DB</option>
<option style="background-color:#3CB371;color: #3CB371" value="#3CB371">#3CB371</option>
<option style="background-color:#7B68EE;color: #7B68EE" value="#7B68EE">#7B68EE</option>
<option style="background-color:#00FA9A;color: #00FA9A" value="#00FA9A">#00FA9A</option>
<option style="background-color:#48D1CC;color: #48D1CC" value="#48D1CC">#48D1CC</option>
<option style="background-color:#C71585;color: #C71585" value="#C71585">#C71585</option>
<option style="background-color:#191970;color: #191970" value="#191970">#191970</option>
<option style="background-color:#F5FFFA;color: #F5FFFA" value="#F5FFFA">#F5FFFA</option>
<option style="background-color:#FFE4E1;color: #FFE4E1" value="#FFE4E1">#FFE4E1</option>
<option style="background-color:#FFE4B5;color: #FFE4B5" value="#FFE4B5">#FFE4B5</option>
<option style="background-color:#FFDEAD;color: #FFDEAD" value="#FFDEAD">#FFDEAD</option>
<option style="background-color:#000080;color: #000080" value="#000080">#000080</option>
<option style="background-color:#FDF5E6;color: #FDF5E6" value="#FDF5E6">#FDF5E6</option>
<option style="background-color:#808000;color: #808000" value="#808000">#808000</option>
<option style="background-color:#6B8E23;color: #6B8E23" value="#6B8E23">#6B8E23</option>
<option style="background-color:#FFA500;color: #FFA500" value="#FFA500">#FFA500</option>
<option style="background-color:#FF4500;color: #FF4500" value="#FF4500">#FF4500</option>
<option style="background-color:#DA70D6;color: #DA70D6" value="#DA70D6">#DA70D6</option>
<option style="background-color:#EEE8AA;color: #EEE8AA" value="#EEE8AA">#EEE8AA</option>
<option style="background-color:#98FB98;color: #98FB98" value="#98FB98">#98FB98</option>
<option style="background-color:#AFEEEE;color: #AFEEEE" value="#AFEEEE">#AFEEEE</option>
<option style="background-color:#DB7093;color: #DB7093" value="#DB7093">#DB7093</option>
<option style="background-color:#FFEFD5;color: #FFEFD5" value="#FFEFD5">#FFEFD5</option>
<option style="background-color:#FFDAB9;color: #FFDAB9" value="#FFDAB9">#FFDAB9</option>
<option style="background-color:#CD853F;color: #CD853F" value="#CD853F">#CD853F</option>
<option style="background-color:#FFC0CB;color: #FFC0CB" value="#FFC0CB">#FFC0CB</option>
<option style="background-color:#DDA0DD;color: #DDA0DD" value="#DDA0DD">#DDA0DD</option>
<option style="background-color:#B0E0E6;color: #B0E0E6" value="#B0E0E6">#B0E0E6</option>
<option style="background-color:#800080;color: #800080" value="#800080">#800080</option>
<option style="background-color:#FF0000;color: #FF0000" value="#FF0000">#FF0000</option>
<option style="background-color:#BC8F8F;color: #BC8F8F" value="#BC8F8F">#BC8F8F</option>
<option style="background-color:#4169E1;color: #4169E1" value="#4169E1">#4169E1</option>
<option style="background-color:#8B4513;color: #8B4513" value="#8B4513">#8B4513</option>
<option style="background-color:#FA8072;color: #FA8072" value="#FA8072">#FA8072</option>
<option style="background-color:#F4A460;color: #F4A460" value="#F4A460">#F4A460</option>
<option style="background-color:#2E8B57;color: #2E8B57" value="#2E8B57">#2E8B57</option>
<option style="background-color:#FFF5EE;color: #FFF5EE" value="#FFF5EE">#FFF5EE</option>
<option style="background-color:#A0522D;color: #A0522D" value="#A0522D">#A0522D</option>
<option style="background-color:#C0C0C0;color: #C0C0C0" value="#C0C0C0">#C0C0C0</option>
<option style="background-color:#87CEEB;color: #87CEEB" value="#87CEEB">#87CEEB</option>
<option style="background-color:#6A5ACD;color: #6A5ACD" value="#6A5ACD">#6A5ACD</option>
<option style="background-color:#708090;color: #708090" value="#708090">#708090</option>
<option style="background-color:#FFFAFA;color: #FFFAFA" value="#FFFAFA">#FFFAFA</option>
<option style="background-color:#00FF7F;color: #00FF7F" value="#00FF7F">#00FF7F</option>
<option style="background-color:#4682B4;color: #4682B4" value="#4682B4">#4682B4</option>
<option style="background-color:#D2B48C;color: #D2B48C" value="#D2B48C">#D2B48C</option>
<option style="background-color:#008080;color: #008080" value="#008080">#008080</option>
<option style="background-color:#D8BFD8;color: #D8BFD8" value="#D8BFD8">#D8BFD8</option>
<option style="background-color:#FF6347;color: #FF6347" value="#FF6347">#FF6347</option>
<option style="background-color:#40E0D0;color: #40E0D0" value="#40E0D0">#40E0D0</option>
<option style="background-color:#EE82EE;color: #EE82EE" value="#EE82EE">#EE82EE</option>
<option style="background-color:#F5DEB3;color: #F5DEB3" value="#F5DEB3">#F5DEB3</option>
<option style="background-color:#FFFFFF;color: #FFFFFF" value="#FFFFFF">#FFFFFF</option>
<option style="background-color:#F5F5F5;color: #F5F5F5" value="#F5F5F5">#F5F5F5</option>
<option style="background-color:#FFFF00;color: #FFFF00" value="#FFFF00">#FFFF00</option>
<option style="background-color:#9ACD32;color: #9ACD32" value="#9ACD32">#9ACD32</option>
</select>
<select language="javascript"  id="FontSize" title="字號大小" onChange="FormatText('fontsize',this[this.selectedIndex].value);" name="select" onMouseOver="window.status='選擇選定文字的字號大小。';return true;" onMouseOut="window.status='';return true;">
<option class="heading" selected>字號
<option value="7">一號
<option value="6">二號
<option value="5">三號
<option value="4">四號
<option value="3">五號
<option value="2">六號
<option value="1">七號</option>
</select><%if session("userkey")>2 then%><input onClick="setMode(this.checked);"type="checkbox" name="viewhtml"  value="ON">檢視HTML原始碼<%else%><input onClick="setMode(this.checked);"type="hidden" name="viewhtml"  value="ON"><%end if%> 
<br><img src=image/s.gif><br>
<img src="image/selectall.gif" align="absmiddle" border="0" alt="全部選擇" onClick="FormatText('selectall')" style="cursor: hand;">
<img src="image/cut.gif"  align="absmiddle" onClick="FormatText('cut')" style="cursor: hand;" alt="剪下">
<img src="image/copy.gif"  align="absmiddle" onClick="FormatText('copy')" style="cursor: hand;" alt="複製">
<img src="image/paste.gif"  align="absmiddle" onClick="FormatText('paste')" style="cursor: hand;" alt="貼上">   
<img src="image/del.gif" align="absmiddle" border="0" alt="刪除" onClick="FormatText('DELETE')" style="cursor: hand;">
<img src="image/undo.gif" align="absmiddle" border="0" alt="撤消" onClick="FormatText('undo')" style="cursor: hand;">
<img src="image/redo.gif" align="absmiddle" border="0" alt="恢復" onClick="FormatText('redo')" style="cursor: hand;">
<img src="image/bold.gif" align="absmiddle" alt="粗體" onClick="FormatText('bold', '')" style="cursor: hand;">
<img src="image/italic.gif" align="absmiddle" alt="斜體" onClick="FormatText('italic', '')" style="cursor: hand;">
<img src="image/underline.gif" align="absmiddle" alt="下劃線" onClick="FormatText('underline', '')" style="cursor: hand;">
<img src="image/Aleft.gif" align="absmiddle" onClick="FormatText('Justifyleft', '')" style="cursor: hand;" alt="左對齊">
<img src="image/Acenter.gif" align="absmiddle" border="0" alt="居中" onClick="FormatText('JustifyCenter', '')" style="cursor: hand;">
<img src="image/Aright.gif" align="absmiddle" onClick="FormatText('JustifyRight', '')" style="cursor: hand;" alt="右對齊">
<img src="image/list.gif" align="absmiddle" border="0" alt="專案符號" onClick="FormatText('InsertUnorderedList', '')" style="cursor: hand;">
<img src="image/num.gif" align="absmiddle" alt="編號" border="0" onClick="FormatText('insertorderedlist', '')" style="cursor: hand;">
<img src="image/outdent.gif" align="absmiddle" onClick="FormatText('Outdent', '')" style="cursor: hand;" alt="回退">
<img src="image/indent.gif" align="absmiddle" border="0" alt="縮排" onClick="FormatText('indent', '')" style="cursor: hand;">
<img src="image/line.gif" align="absmiddle" alt="普通水平線" border="0" onClick="FormatText('InsertHorizontalRule', '')"  style="cursor: hand;">
<img src="image/sline.gif" align="absmiddle" alt="特殊水平線" border="0" onClick="hr()"  style="cursor: hand;">
<img src="image/sup.gif" align="absmiddle" border="0" alt="上標" onClick="FormatText('superscript')" style="cursor: hand;">
<img src="image/sub.gif" align="absmiddle" border="0" alt="下標" onClick="FormatText('subscript')" style="cursor: hand;">
<img src="image/clear.gif" align="absmiddle" border="0" alt="刪除文字格式" onClick="FormatText('RemoveFormat')" style="cursor: hand;">
<br><img src=image/s.gif><br>
<img src="image/url.gif" align="absmiddle" border="0" alt="超級連結" onClick="FormatText('createLink')" style="cursor: hand;">
<img src="image/nourl.gif" align="absmiddle" border="0" alt="取消超級連結" onClick="FormatText('unLink')" style="cursor: hand;">
<img src="image/fieldset.gif" align="absmiddle" border="0" style="cursor:hand;" alt="插入欄目框" LANGUAGE="javascript" onclick="FIELDSET()">
<img src="image/htm.gif" align="absmiddle" border="0" style="cursor:hand;" alt="插入網頁" LANGUAGE="javascript" onclick="iframe()">
<img src="image/table.gif" align="absmiddle" border="0" style="cursor:hand;" alt="插入表格" LANGUAGE="javascript" onclick="fortable()">
<img src="image/flash.gif" align="absmiddle" border="0" style="cursor:hand;" alt="插入FLASH" LANGUAGE="javascript" onclick="swf()">
<img src="image/wmv.gif" align="absmiddle" border="0" style="cursor:hand;" alt="插入視訊檔案，支援格式為：avi、wmv、asf" LANGUAGE="javascript" onclick="wmv()">
<img src="image/rm.gif" align="absmiddle" border="0" style="cursor:hand;" alt="插入RealPlay檔案，支援格式為：rm、ra、ram" LANGUAGE="javascript" onclick="rm()">
<img src="image/img.gif" align="absmiddle" border="0" style="cursor:hand;" alt="插入網上圖片，支援格式為：gif、jpg、png、bmp" lANGUAGE="javascript" onclick="pic()"> 
<img src="image/help.gif" align="absmiddle" border="0" style="cursor:hand;" alt="使用幫助" lANGUAGE="javascript" onclick="help()">
<a href="javascript:openWin('upload.asp','upload','toolbar=0,location=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=120')"><img src="image/upload.gif" align="absmiddle" border="0" alt="上傳圖片" style="cursor: hand;" onMouseOver="window.status='使用系統自帶的上傳程式上傳圖片';return true;" onMouseOut="window.status='';return true;"></a>
<br><img src=image/s.gif><br>

**************************************************************************************

Edit.js程式碼如下：

**************************************************************************************

//Function to insert table
function fortable()
{

  var arr = showModalDialog("table1.html", "", "dialogWidth:25em; dialogHeight:12em; status:0");
  if (arr != null){
  var tmp=arr.split("*");
  row=tmp[0];
  col=tmp[1];
  var string;
  string="<table style='WIDTH: "+tmp[2]+"px;' border="+tmp[3]+" bgcolor="+tmp[6]+" cellspacing="+tmp[5]+" cellpadding="+tmp[4]+">";
  for(i=1;i<=row;i++){
  string=string+"<tr>";
  for(j=1;j<=col;j++){
  string=string+"<td>&nbsp;</td>";
  }
  string=string+"</tr>";
  }
  string=string+"</table>";
  content=message.document.body.innerHTML;
  content=content+string;
  message.document.body.innerHTML=content;
  }
  else message.focus();
}

//Function to insert flash
function swf()
{
  var arr = showModalDialog("flash.html", "", "dialogWidth:30em; dialogHeight:10em; status:0;help:0");
 
  if (arr != null){
  var ss;
  ss=arr.split("*")
  path=ss[0];
  row=ss[1];
  col=ss[2];
  var string;
string="<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'  codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width="+row+" height="+col+"><param name=movie value="+path+"><param name=quality value=high><embed src="+path+" pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width="+row+" height="+col+"></embed></object>"
  content=message.document.body.innerHTML;
  content=content+string;
   message.document.body.innerHTML=content;
  }
  else message.focus();
}

//Function to insert Media Wmv
function wmv()
{
  var arr = showModalDialog("media.html", "", "dialogWidth:30em; dialogHeight:10em; status:0;help:0");
 
  if (arr != null){
  var ss;
  ss=arr.split("*")
  path=ss[0];
  row=ss[1];
  col=ss[2];
  var string;
string="<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95' width="+row+" height="+col+"><param name=Filename value="+path+"><param name='BufferingTime' value='5'><param name='AutoSize' value='-1'><param name='AnimationAtStart' value='-1'><param name='AllowChangeDisplaySize' value='-1'><param name='ShowPositionControls' value='0'><param name='TransparentAtStart' value='1'><param name='ShowStatusBar' value='1'></object>"
  content=message.document.body.innerHTML;
  content=content+string;
   message.document.body.innerHTML=content;
  }
  else message.focus();
}

//Function to insert Media Rm
function rm()
{
  var arr = showModalDialog("rm.html", "", "dialogWidth:30em; dialogHeight:10em; status:0;help:0");
 
  if (arr != null){
  var ss;
  ss=arr.split("*")
  path=ss[0];
  row=ss[1];
  col=ss[2];
  var string;
string="<object classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA' width="+row+" height="+col+"><param name='CONTROLS' value='ImageWindow'><param name='CONSOLE' value='Clip1'><param name='AUTOSTART' value='-1'><param name=src value="+path+"></object><br><object classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'  width="+row+" height=60><param name='CONTROLS' value='ControlPanel,StatusBar'><param name='CONSOLE' value='Clip1'></object>"
  content=message.document.body.innerHTML;
  content=content+string;
   message.document.body.innerHTML=content;
  }
  else message.focus();
}

//Function to insert Picture
function pic()
{
  var arr = showModalDialog("pic.html", "", "dialogWidth:30em; dialogHeight:15em; status:0;help:0");
 
  if (arr != null){
  var ss;
  ss=arr.split("*")
  a=ss[0];
  b=ss[1];
  c=ss[2];
  d=ss[3];
  e=ss[4];
  f=ss[5];
  g=ss[6];
  h=ss[7];
  i=ss[8];
 
  var str1;
str1="<img src='"+a+"' alt='"+b+"'"
if(d.value!='')str1=str1+"width='"+d+"'"
if(e.value!='')str1=str1+"height='"+e+"' "
str1=str1+" border='"+i+"' align='"+h+"' vspace='"+f+"' hspace='"+g+"'  style='"+c+"'"
str1=str1+">"
  content=message.document.body.innerHTML;
  content=content+str1;
   message.document.body.innerHTML=content;
  }
  else message.focus();
}


//Function to insert  欄目框
function FIELDSET()
{
  var arr = showModalDialog("fieldset.htm", "", "dialogWidth:25em; dialogHeight:10em; status:0;help:0");
 
  if (arr != null){
  var ss;
  ss=arr.split("*")
  a=ss[0];
  b=ss[1];
  c=ss[2];
  d=ss[3];
  var str1;
str1="<FIELDSET "
str1=str1+"align="+a+""
str1=str1+" style='"
if(c.value!='')str1=str1+"color:"+c+";"
if(d.value!='')str1=str1+"background-color:"+d+";"
str1=str1+"'><Legend"
str1=str1+" align="+b+""
str1=str1+">標題</Legend>內容</FIELDSET>"
  content=message.document.body.innerHTML;
  content=content+str1;
   message.document.body.innerHTML=content;
  }
  else message.focus();
}


//Function to insert Web
function iframe()
{
  var arr = showModalDialog("iframe.htm", "", "dialogWidth:30em; dialogHeight:13em; status:0;help:0");
 
  if (arr != null){
  var ss;
  ss=arr.split("*")
  a=ss[0];
  b=ss[1];
  c=ss[2];
  d=ss[3];
  e=ss[4];
  f=ss[5];
  g=ss[6];
  var str1;
str1="<iframe src='"+a+"'"
str1+=" scrolling="+b+""
str1+=" frameborder="+c+""
if(d!='')str1+=" marginheight="+d
if(e!='')str1+=" marginwidth="+e
if(f!='')str1+=" width="+f
if(g!='')str1+=" height="+g
str1=str1+"></iframe>"
  content=message.document.body.innerHTML;
  content=content+str1;
   message.document.body.innerHTML=content;
  }
  else message.focus();
}


//Function to insert 特殊水平線
function hr()
{
  var arr = showModalDialog("hr.htm", "", "dialogWidth:30em; dialogHeight:12em; status:0;help:0");
 
  if (arr != null){
  var ss;
  ss=arr.split("*")
  a=ss[0];
  b=ss[1];
  c=ss[2];
  d=ss[3];
  e=ss[4];
  var str1;
str1="<hr"
str1=str1+" color='"+a+"'"
str1=str1+" size="+b+"'"
str1=str1+" "+c+""
str1=str1+" align="+d+""
str1=str1+" width="+e
str1=str1+">"
  content=message.document.body.innerHTML;
  content=content+str1;
   message.document.body.innerHTML=content;
  }
  else message.focus();
}


function IsDigit()
{
  return ((event.keyCode >= 48) && (event.keyCode <= 57));
}

//Function to format text in the text box
function FormatText(command, option){
 
   frames.message.document.execCommand(command, true, option);
   frames.message.focus();
}

//Function to add image
function AddImage(){ 
 imagePath = prompt('請輸入圖片地址', 'http://');    
 
 if ((imagePath != null) && (imagePath != "")){     
  frames.message.document.execCommand('InsertImage', false, imagePath);
    frames.message.focus();
 }
 frames.message.focus();   
}

//Function to clear form
function ResetForm(){

 if (window.confirm('確認要清空對話方塊內容?')){
   frames.message.document.body.innerHTML = '';
   return true;
  }
  return false;  
}

//Function to open pop up window
function openWin(theURL,winName,features) {
   window.open(theURL,winName,features);
}

//Function to view Html Code
function setMode(newMode)
{
  bTextMode = newMode;
  var cont;
  if (bTextMode) {
    cleanHtml();
    cleanHtml();

    cont=message.document.body.innerHTML;
    message.document.body.innerText=cont;
  } else {
    cont=message.document.body.innerText;
    message.document.body.innerHTML=cont;
  }
  message.focus();
}

function cleanHtml()
{
  var fonts = message.document.body.all.tags("FONT");
  var curr;
  for (var i = fonts.length - 1; i >= 0; i--) {
    curr = fonts[i];
    if (curr.style.backgroundColor == "#ffffff") curr.outerHTML = curr.innerHTML;
  }

}


//Function to open Help Document
function help()
{
    var helpmess;
    helpmess="---------------填寫幫助---------------/r/n/r/n"+
         "1.請不要發表有危險性的指令碼。/r/n/r/n"+
         "2.如果要書寫原始碼，請選中/r/n/r/n"+
         "　檢視HTML原始碼書寫./r/n/r/n"+
         "3.需要你自己執行,才能看效果./r/n/r/n"+
         "4.如果書寫js，儘量不要在這兒書寫./r/n/r/n";
    alert(helpmess);
}

相關推薦

一個文章線上編輯器的實現

如圖一個文章線上編輯器OnlineEdit.asp 程式碼如下： ************************************************************************************** <!--#include

RichEditeText——android圖文混排富文字文章編輯器實現詳解

需求：android 實現富文字編輯器，並且實現html解析和生成。 功能點： 字型加粗，斜體，下劃線，刪除線 字型設定大小   預設大（18px），中（16px）,小（14px） 字型設定顏色 換行插入圖片 編輯內容生成html 解析html並且顯示 主要實現

發現一個很好用的 SVG 線上編輯器-Method Draw

Method Draw 是一款線上 SVG 編輯器，是 SVG Edit 的一個分支。Method Draw 的目的是改進 SVG Edit 的可用性和使用者體驗。它移除了 line-caps/corners 等功能以提供一個簡單愉悅操作體驗。

線上文字編輯器實現原理

from: https://io-meter.com/2014/09/01/contenteditable-and-selection/ 最近研究了一下在瀏覽器中實現的 WYSIWYG 文字編輯器的原理， 在瞭解基本原理並瀏覽了 zenpen 這個相對簡單的線上編輯器

HTML線上文字編輯器實現原理

相信很多人都使用過多種富文字編輯器，富文字編輯器常用於編輯部落格、使用者互動，富文字編輯器分為兩種：所見即所得和非所見即所得 兩種富文字編輯器的實現原理是不相同的。 1. 非所見即所得編輯器 這種編輯器的實現原理很簡單，用textarea元素就可以實現，假如要實現粗體、斜體

QT實現一個簡易文字編輯器

setFixedSize(640,480);//設定視窗介面大小 //選單欄 newaction1=newQAction(QIcon("newfile.png"),"新建",this);//actio

用純js實現一個文本編輯器

padding lang style cti lists justify amp def copy 效果圖 代碼 <!DOCTYPE html> <html lang="en"> <head> <meta chars

使用Egret粒子編輯器實現煙霧效果

目錄 粒子 type shadow .com 文件配置 docs 狀態欄 困難 今天這篇文章主要是記錄我自己使用Egret Feather做的一個煙霧效果，分享給初學Egret的小夥伴。 Egret Feather下載地址: https://www.egret.com/pr

summernote富文字編輯器實現圖片新增上傳和刪除圖片

summernote的基本使用 HTML程式碼 //div添加個id就可以 <div id="summernote" ></div> 然後JS操作 //例項化呼叫 var $summernote = $('#summernote').summernote(

kindeditor線上編輯器的使用心得

轉自 http://blog.csdn.net/chongxin1/article/details/53615354 1、 如何宣告引用？ <!DOCTYPE html> <html> &n

圖片線上編輯器怎麼使用教程

如今幾乎每個人都會使用到PS，不管是手機中簡單的修圖還是電腦上的Photoshop，因為修圖已經是拍照後必做的一件事，也是為了每張照片都更加精緻，但是在電腦上使用PS，很多人會安裝不了，會出現各種各樣的問題，導致無法使用，那這時候就需要使用到線上PS，可以幫助解決Photoshop安裝不了的難題，那有沒有線上

bbs專案富文字編輯器實現上傳檔案到media目錄

media目錄是在project的settings中設定的，static目錄是django自己使用的靜態檔案的上傳目錄，media目錄是使用者自定義上傳檔案的目錄 # Django使用者上傳的檔案都放在media目錄下 MEDIA_URL = "/media/" MEDIA_ROOT = os.pat

YAML、YML線上編輯器(格式化校驗)解析工具-toolfk.com

    本文要推薦的[ToolFk]是一款程式設計師經常使用的線上免費測試工具箱，ToolFk 特色是專注於程式設計師日常的開發工具，不用安裝任何軟體，只要把內容貼上按一個執行按鈕,就能獲取到想要的內容結果。ToolFk還支援  BarCode條形碼線上生

Qt中文字編輯器實現語法高亮功能（Qscitinlla）

Qt中文字編輯器實現語法高亮功能（Qscitinlla） Scintilla是一個免費、跨平臺、支援語法高亮的編輯控制元件。它完整支援原始碼的編輯和除錯，包括語法高亮、錯誤指示、程式碼完成（code completion）和呼叫提示(call tips)。能包含標記（marker）的頁邊（mar

RichEditor——一款基於RecyclerView實現的富文字編輯器實現方案(支援圖文、轉義生成MarkDown、粗體、斜體、下劃線、刪除線、超連結、標題等)

前言 對於富文字編輯器的實現，首先我們肯定會想到實現的編輯器需要支援的幾個必要特性： 1.涉及大量文字，圖片，文字樣式的展示與編輯。 2.涉及極其複雜的使用者互動。 目前Github上我所瞭解的富文字編輯器基本上實現方式基於兩種： * 1.基於WebView

線上編輯器(WangEditor)

　　自己之前寫了一篇關於POI 相關的部落格， 想了想在公司中一般常用的不就是上傳下載，poi，分頁，定時等。好像還有個線上編輯器， 於是自己就花了兩個多小時把編輯器相關的程式碼擼了遍，當然了是先百度找了找資料，看了看實現的邏輯，然後自己擼的。 編輯器自己使用的是WangEditor，網上也有很多關於Edit

MindMaster-腦圖與其他架構圖和流程圖線上編輯器

http://mm.edrawsoft.cn/files MindMaster線上網頁編輯 現如今很多人都在學習使用思維導圖，它可以幫助我們發散思維理清思路。面對市場上琳琅滿目的腦圖軟體，很多人都不知道怎麼選。 Mindmaster下載地址：http://www.edrawso

HTML MarkDown編輯器實現

HTML MarkDown編輯器實現 先看效果 我們可以看到只需要在左邊綠色區域輸入，右邊藍色區域就會實時輸入內容。 這樣一個簡單的MarkDown就實現了 程式碼也很簡單： 使用到的js markdown.js https:

dedecms新增文章時提示標題為空，編輯文章時編輯器空白的解決辦法

dedecms出現這個問題與程式碼無關，主要是和PHP的版本有關，用的PHP5.4，更換成PHP5.2之後就不會有這個問題了。問題原因是：php5.4版本中htmlspecialchars在php5.4預設為utf8編碼，gbk編碼的字串經過 htmlspecialchars

Laravel5.2中使用xheditor編輯器實現上傳圖片功能

安裝xheditor 去官網下載一個安裝包（有詳細的安裝辦法），簡單說就是把xheditor_emot，xheditor_lang，xheditor_plugins，xheditor_skin四個資料夾放到你的js目錄下，把xheditor.js也要放在js資料夾下 但是，