在線文本編輯器控件
1. 第一款:widgEditor[一款及簡的文本編輯器]
[1]效果例圖:
[2]使用方法:
複製css[widgContent.css,widgEditor.css],js[widgEditor.js],img三個文件夾,並在HTML的<head>中寫下面兩句:
<link rel="stylesheet" type="text/css" href="css/widgEditor.css"> <script type="text/javascript" src="js/widgEditor.js"></script>
在<body>中寫下面一句:
<textarea id="noise" name="noise" class="widgEditor nothing"></textarea>
2. 第二款:TinyMCE
[1]效果例圖:
[2]使用方法:
將壓縮包中的tinymce文件夾全部複製到js文件夾中,並在HTML的<head>中寫下面兩句:
<script src="js/tinymce/tinymce.min.js"></script> <script>tinymce.init({ selector:'textarea' });</script>
在<body>中寫下面一句:
<textarea>Easy (and free!) You should check out our premium features.</textarea>
3. 第三款:MarkItUp[基於jQuery]
[1]效果例圖
[2]使用方法
將壓縮包中的markitup文件夾全部複製到工程中,並在HTML的<head>中寫下面幾句:
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css"> <!-- markItUp! toolbar skin --> <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css"> <!-- jQuery --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <!-- markItUp! --> <script type="text/javascript" src="markitup/jquery.markitup.js"></script> <!-- markItUp! toolbar settings --> <script type="text/javascript" src="markitup/sets/default/set.js"></script>
在<body>中寫下面幾句:
<textarea id="markItUp" cols="80" rows="20">Hello,world!</textarea> <script type="text/javascript"> $(function() { // 必須的響應事件 $('#markItUp').markItUp(mySettings); }); </script>
4. 第四款:NicEdit[提供了多種形式]
[1]效果例圖
[2]使用方法
將壓縮包中的img文件夾和js文件夾複製到工程中,並在HTML的<head>中寫下面幾句:
<script src="js/nicEdit.js" type="text/javascript"></script> <script type="text/javascript"> bkLib.onDomLoaded(function() { var myNicEditor = new nicEditor(); myNicEditor.setPanel('myNicPanel'); myNicEditor.addInstance('myInstance1'); }); </script>
在<body>中寫下面幾句:
<div id="sample"> <div id="myNicPanel" style="width: 350px;"></div> <br /> <div id="myInstance1" style="font-size: 16px; background-color: #ccc; padding: 3px; width: 400px;"> Hello world! </div> </div>
5. 第五款:Rich Text Editor[支持 iPhone 和 iPad 的一個富文本編輯控件]
暫時不在講解···