wysiwyg.js是一款所见即所得的轻量级 jQuery 富文本编辑器插件。wysiwyg.js没有任何依赖,大小只有12k。该富文本编辑器的特点还有:
- 可以将任何HTML元素设置为contenteditable(可编辑)模式。
- 支持选择事件:例如工具条。
- 支持键盘事件:例如处理热键。
- 支持占位符:可以显示和隐藏占位文字。
- 提供众多的方法:.bold(), .forecolor(), .inserthtml()...。
浏览器兼容
- Internet Explorer 6+
- Firefox 3.5+
- Chrome 4+
- Safari 3.1+
如果一个<textarea>
已经被作为“元素”使用,该富文本编辑器插件将:
- 将
<textarea>
保持为同步状态。 - 如果浏览器不支持
contenteditable
则将<textarea>
回退。 - 旧的 iOS 和 Android 2.3-也将回退为
<textarea>
。
该富文本编辑器还有一个大小10k(minified)的jQuery插件-$.wysiwyg(),在加上一个配套的2k CSS文件可以创建全部功能的wysiwyg富文本编辑器。它依赖于:
- wysiwyg.js
- jQuery
- FontAwesome (或 JPG/PNG/GIF/SVG 图片)
wysiwyg.js-API
// 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 );
|
$.wysiwyg()-API
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
(){});
|
更多关于该所见即所得的富文本编辑器的信息请参考:https://github.com/wysiwygjs/wysiwyg.js