wysiwyg.js是一款所见即所得的轻量级富文本编辑器插件。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.js`是一款基于jQuery的富文本编辑器插件,它以其高效和稳定性能受到开发者青睐。这款插件的主要目标是提供一个快速、无错误并且对页面其他功能无干扰的编辑体验。 在网页开发中,`<textarea>`元素通常被...
react-froala-wysiwyg, Froala所见即所得HTML富文本编辑器的反应组件 反应 JS Froala所见即所得编辑器 react-froala-wyswiyg为 Froala WYSIWYG编辑器版本 2提供了响应绑定。安装npm install react-froala-wysiwyg --
**jQuery富文本编辑器插件-wysiwyg.js** 在Web开发中,富文本编辑器是一种常见的组件,它允许用户以类似Word的方式编辑HTML内容。`wysiwyg.js`是一款基于jQuery的富文本编辑器插件,为网页提供了一种高效、功能强大...
Vue-froala-wysiwyg是一款基于Vue.js的富文本编辑器插件,提供了丰富的功能和良好的用户体验。这款编辑器支持多种样式配置和自定义,能够满足开发者在不同项目中的需求。 安装Vue-froala-wysiwyg可以通过npm命令...
wysiwyg.js是一款十分强大的、所见即所得的jQuery富文本编辑器插件。wysiwyg.js富文本编辑器体积小,支持选择、键盘、占位等众多事件。而且该富文本编辑器的兼容性十分好,甚至兼容IE6。
gMA-Wysiwyg是一款集成于各种应用程序和平台的富文本编辑器,支持多种格式的内容创建和编辑,包括HTML、CSS、JavaScript等。该插件的2.900和6.800版本可能分别代表了软件的主要功能更新和次要bug修复,而v1.220则是...
Vue JS Froala 所见即所得编辑器 vue-froala-wyswiyg 为 Froala WYSIWYG 编辑器版本 3 提供了 Vue 绑定。兼容性v1 以后@legacy Vue.js 1.x v2以后Vue.js 2.x安装从npm安装vue-froala-wysiwyg npm install vue-froala...
富文本编辑器bootstrap-wysiwyg.min.js。可以充分发挥编辑器的优势
这个编辑器的主要目标是简化富文本编辑器的集成,使其在各种项目中更加灵活和自定义化。下面将详细介绍这款编辑器的工作原理、关键功能和如何进行学习与应用。 一、工作原理 Bootstrap-WYSIWYG利用HTML5的...
Bootstrap3-wysiwyg-0.3.3.zip是一个包含富文本编辑器组件的压缩包,主要用于网页开发,便于用户在网页上创建和编辑复杂的文本内容。这个编辑器是基于Bootstrap 3框架构建的,因此它具有良好的响应式设计,能够适应...
富文本编辑器的工作原理通常基于WYSIWYG(What You See Is What You Get)概念,即用户在界面上看到的即为最终生成的HTML代码。编辑器通过捕获用户在界面上的操作,实时将这些操作转化为对应的HTML标签,从而在...
通过整合其他开源工具,如图像处理库或富文本过滤器,可以进一步增强编辑器的功能和安全性。 总的来说,【Azexo-Composer-WYSIWYG-master】是面向PHP开发者的强大工具,它简化了网页内容编辑的过程,同时也保持了...
本文教大家如何使用bootstrap-wysiwyg文本编辑器,充分发挥编辑器的优势,希望大家可以有所收获。 主要特性: 超小5kb 自动的热键支持(MAC和windows) 拖放的插入图片,支持图片上传(支持手机拍照) 支持...
3. **使用组件**:在 Vue 组件的模板部分,可以直接使用 `<froala>` 标签来创建富文本编辑器。通过 `:tag` 属性指定编辑器的根元素标签(默认为 `div`),`:config` 属性用于设置编辑器配置,`v-model` 用于双向数据...
富文本编辑器是一种在线文本编辑工具,用户在浏览器上可以像使用Word那样编辑内容,并实时预览效果,这就是“所见即所得”(WYSIWYG)的概念。它极大地简化了网页内容的创建和修改过程,尤其对于非程序员或者不熟悉...