在線文本編輯器控件

在線文本編輯器控件

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 的一個富文本編輯控件]

暫時不在講解···


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章