jQuery富文本编辑器插件wysiwyg.js使用攻略

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

2、HTML结构如下图所示：

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

3、// 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 );  

4、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(){});

5、运行效果如下图所示：

6、浏览器兼容性，如下图所示：