其他代码

wysiwyg - 富文本编辑器jQuery插件

阿里云


wysiwyg.js 是一款所见即所得的轻量级 jQuery 富文本编辑器插件。wysiwyg.js 没有任何依赖,大小只有 12k。该富文本编辑器的特点还有:

可以将任何 HTML 元素设置为 contenteditable(可编辑)模式

也想出现在这里?联系我们
创客主机

支持选择事件:例如工具条

支持键盘事件:例如处理热键

支持占位符:可以显示和隐藏占位文字

提供众多的方法:.bold(), .forecolor(), .inserthtml()...
如果一个<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

  1. // create wysiwyg:
  2. var wysiwygeditor = wysiwyg({
  3.     element: document.getElementById('editor-id'),
  4.     onkeypress: function( code, character, shiftKey, altKey, ctrlKey, metaKey ) {
  5.         },
  6.     onselection: function( collapsed, rect, nodes, rightclick ) {
  7.         },
  8.     onplaceholder: function( visible ) {
  9.         },
  10.     hijackcontextmenu: false
  11. });
  12.  
  13. // properties:
  14. wysiwygeditor.getElement();
  15. wysiwygeditor.getHTML(); -> 'html'
  16. wysiwygeditor.setHTML( html );
  17. wysiwygeditor.getSelectedHTML(); -> 'html'|false
  18.  
  19. // selection and popup:
  20. wysiwygeditor.collapseSelection();
  21. wysiwygeditor.openPopup(); -> popup-handle
  22. wysiwygeditor.closePopup();
  23.  
  24. // exec commands:
  25. wysiwygeditor.removeFormat();
  26. wysiwygeditor.bold();
  27. wysiwygeditor.italic();
  28. wysiwygeditor.underline();
  29. wysiwygeditor.strikethrough();
  30. wysiwygeditor.forecolor( '#color' );
  31. wysiwygeditor.highlight( '#color' );
  32. wysiwygeditor.fontName( fontname );
  33. wysiwygeditor.fontSize( fontsize );
  34. wysiwygeditor.subscript();
  35. wysiwygeditor.superscript();
  36. wysiwygeditor.align( 'left'|'center'|'right'|'justify' );
  37. wysiwygeditor.format( tagname );
  38. wysiwygeditor.insertLink( 'http://url.com/' );
  39. wysiwygeditor.insertImage( 'http://url.com/' );
  40. wysiwygeditor.insertHTML( 'html' );
  41. wysiwygeditor.insertList( ordered );

$.wysiwyg()-API

  1. var $editor = $('#editor').wysiwyg({
  2.     classes: 'some-more-classes',
  3.     toolbar: 'selection'|'top'|'top-selection'|'bottom'|'bottom-selection',
  4.     buttons = { ... },
  5.     submit = { ... },
  6.     placeholder: 'Type your text here...',
  7.     dropfileclick: 'Click or drop image',
  8.     placeholderUrl: 'www.example.com',
  9.     maxImageSize: [width,height],
  10.     onImageUpload: function( insert_image ){},
  11.     onKeyEnter: function(){}
  12. })
  13. Properties:
  14.     $editor.wysiwyg('container'); -> $(container-div)
  15.     $editor.wysiwyg('shell'); -> wysiwyg.js API
  16. Events:
  17.     .focus(function(){})
  18.     .blur(function(){})
  19.     .change(function(){});

Github 信息:https://github.com/wysiwygjs/wysiwyg.js

wysiwyg - 富文本编辑器 jQuery 插件

已有 694 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!