jQuery富文本編輯器插件wysiwyg.js使用攻略

wysiwyg.js是一款十分強大的、所見即所得的jQuery富文本編輯器插件。wysiwyg.js富文本編輯器體積小,支持選擇、鍵盤、占位等眾多事件。而且該富文本編輯器的兼容性十分好,甚至兼容IE6。

wysiwyg.js沒有任何依賴,大小只有12k。該富文本編輯器的特點還有:

(1)可以將任何HTML元素設置為contenteditable(可編輯)模式。

(2)支持選擇事件:例如工具條。

(3)支持鍵盤事件:例如處理熱鍵。

(4)支持占位符:可以顯示和隱藏占位文字。

(5)提供眾多的方法:.bold(), .forecolor(), .inserthtml()...。

工具/原料

筆記本電腦或是台式機
網際網路
jQuery
wysiwyg.js

方法/步驟

<link rel="stylesheet" type="text/css" href="css/wysiwyg-editor.css" />

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

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

<script type="text/javascript" src="js/wysiwyg-editor.js"></script>

HTML結構如下圖所示:

<textarea id="editor1" name="editor" placeholder="Type your text here..."></textarea>

// create wysiwyg:

var wysiwygeditor = wysiwyg({

element: document.getElementById('editor-id'),

onkeypress: function( code, character, shiftKey, altKey, ctrlKey, metaKey ) {

},

onselection: function( collapsed, rect, nodes, rightclick ) {

},

onplaceholder: function( visible ) {

},

hijackcontextmenu: false

});

// properties:

wysiwygeditor.getElement();

wysiwygeditor.getHTML(); -> 'html'

wysiwygeditor.setHTML( html );

wysiwygeditor.getSelectedHTML(); -> 'html'|false

// selection and popup:

wysiwygeditor.collapseSelection();

wysiwygeditor.openPopup(); -> popup-handle

wysiwygeditor.closePopup();

// exec commands:

wysiwygeditor.removeFormat();

wysiwygeditor.bold();

wysiwygeditor.italic();

wysiwygeditor.underline();

wysiwygeditor.strikethrough();

wysiwygeditor.forecolor( '#color' );

wysiwygeditor.highlight( '#color' );

wysiwygeditor.fontName( fontname );

wysiwygeditor.fontSize( fontsize );

wysiwygeditor.subscript();

wysiwygeditor.superscript();

wysiwygeditor.align( 'left'|'center'|'right'|'justify' );

wysiwygeditor.format( tagname );

wysiwygeditor.insertLink( 'http://url.com/' );

wysiwygeditor.insertImage( 'http://url.com/' );

wysiwygeditor.insertHTML( 'html' );

wysiwygeditor.insertList( ordered );

var $editor = $('#editor').wysiwyg({

classes: 'some-more-classes',

toolbar: 'selection'|'top'|'top-selection'|'bottom'|'bottom-selection',

buttons = { ... },

submit = { ... },

placeholder: 'Type your text here...',

dropfileclick: 'Click or drop image',

placeholderUrl: 'www.example.com',

maxImageSize: [width,height],

onImageUpload: function( insert_image ){},

onKeyEnter: function(){}

})

Properties:

$editor.wysiwyg('container'); -> $(container-div)

$editor.wysiwyg('shell'); -> wysiwyg.js API

Events:

.focus(function(){})

.blur(function(){})

.change(function(){});

運行效果如下圖所示:

瀏覽器兼容性,如下圖所示:

注意事項

該插件依賴於JQuery庫

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場