在线文本编辑器控件

在线文本编辑器控件

1.        第一款：widgEditor[一款及简的文本编辑器]

[1]效果例图：

[2]使用方法：

复制css[widgContent.css，widgEditor.css]，js[widgEditor.js]，img三个文件夹，并在HTML的中写下面两句：

<link rel="stylesheet" type="text/css" href="css/widgEditor.css">
<script type="text/javascript" src="js/widgEditor.js">script>

在中写下面一句：

<textarea id="noise" name="noise" class="widgEditor nothing">textarea>

 

2.        第二款：TinyMCE

[1]效果例图：

[2]使用方法：

将压缩包中的tinymce文件夹全部复制到js文件夹中，并在HTML的中写下面两句：

<script src="js/tinymce/tinymce.min.js">script>
<script>tinymce.init({ selector:'textarea' });script>

在中写下面一句：

<textarea>Easy (and free!) You should check out our premium features.textarea>

 

3.        第三款：MarkItUp[基于jQuery]

[1]效果例图

 

[2]使用方法

将压缩包中的markitup文件夹全部复制到工程中，并在HTML的中写下面几句：

<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css">

<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js">

<script type="text/javascript" src="markitup/jquery.markitup.js">

<script type="text/javascript" src="markitup/sets/default/set.js">

在中写下面几句：

<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的中写下面几句：

<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>

在中写下面几句：

<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 的一个富文本编辑控件]

暂时不在讲解···