`

富文本编辑器- wysiwyg

 
阅读更多

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

    `wysiwyg.js`是一款基于jQuery的富文本编辑器插件,它以其高效和稳定性能受到开发者青睐。这款插件的主要目标是提供一个快速、无错误并且对页面其他功能无干扰的编辑体验。 在网页开发中,`&lt;textarea&gt;`元素通常被...

    react-froala-wysiwyg, Froala所见即所得HTML富文本编辑器的反应组件.zip

    react-froala-wysiwyg, Froala所见即所得HTML富文本编辑器的反应组件 反应 JS Froala所见即所得编辑器 react-froala-wyswiyg为 Froala WYSIWYG编辑器版本 2提供了响应绑定。安装npm install react-froala-wysiwyg --

    jQuery富文本编辑器插件-wysiwyg.js

    **jQuery富文本编辑器插件-wysiwyg.js** 在Web开发中,富文本编辑器是一种常见的组件,它允许用户以类似Word的方式编辑HTML内容。`wysiwyg.js`是一款基于jQuery的富文本编辑器插件,为网页提供了一种高效、功能强大...

    超好用的富文本编辑器vue-froala-wysiwyg

    Vue-froala-wysiwyg是一款基于Vue.js的富文本编辑器插件,提供了丰富的功能和良好的用户体验。这款编辑器支持多种样式配置和自定义,能够满足开发者在不同项目中的需求。 安装Vue-froala-wysiwyg可以通过npm命令...

    所见即所得的jQuery富文本编辑器插件-wysiwyg.js

    wysiwyg.js是一款十分强大的、所见即所得的jQuery富文本编辑器插件。wysiwyg.js富文本编辑器体积小,支持选择、键盘、占位等众多事件。而且该富文本编辑器的兼容性十分好,甚至兼容IE6。

    连接WYG插件gMA-Wysiwyg[2.900][6.800]-v1.220.rar

    gMA-Wysiwyg是一款集成于各种应用程序和平台的富文本编辑器,支持多种格式的内容创建和编辑,包括HTML、CSS、JavaScript等。该插件的2.900和6.800版本可能分别代表了软件的主要功能更新和次要bug修复,而v1.220则是...

    vue-froala-wysiwyg:Froala 所见即所得 HTML 富文本编辑器的 Vue 组件

    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.min.js。可以充分发挥编辑器的优势

    bootstrap-wysiwyg-notes:简易富文本编辑器bootstrap-wysiwyg原始注解,可用于学习富文本实现原理

    这个编辑器的主要目标是简化富文本编辑器的集成,使其在各种项目中更加灵活和自定义化。下面将详细介绍这款编辑器的工作原理、关键功能和如何进行学习与应用。 一、工作原理 Bootstrap-WYSIWYG利用HTML5的...

    bootstrap3-wysiwyg-0.3.3.zip

    Bootstrap3-wysiwyg-0.3.3.zip是一个包含富文本编辑器组件的压缩包,主要用于网页开发,便于用户在网页上创建和编辑复杂的文本内容。这个编辑器是基于Bootstrap 3框架构建的,因此它具有良好的响应式设计,能够适应...

    富文本编辑器组件.zip

    富文本编辑器的工作原理通常基于WYSIWYG(What You See Is What You Get)概念,即用户在界面上看到的即为最终生成的HTML代码。编辑器通过捕获用户在界面上的操作,实时将这些操作转化为对应的HTML标签,从而在...

    Azexo-Composer-WYSIWYG-master

    通过整合其他开源工具,如图像处理库或富文本过滤器,可以进一步增强编辑器的功能和安全性。 总的来说,【Azexo-Composer-WYSIWYG-master】是面向PHP开发者的强大工具,它简化了网页内容编辑的过程,同时也保持了...

    所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解

    本文教大家如何使用bootstrap-wysiwyg文本编辑器,充分发挥编辑器的优势,希望大家可以有所收获。 主要特性:  超小5kb  自动的热键支持(MAC和windows)  拖放的插入图片,支持图片上传(支持手机拍照)  支持...

    vue-froala-wysiwyg 富文本编辑器功能

    3. **使用组件**:在 Vue 组件的模板部分,可以直接使用 `&lt;froala&gt;` 标签来创建富文本编辑器。通过 `:tag` 属性指定编辑器的根元素标签(默认为 `div`),`:config` 属性用于设置编辑器配置,`v-model` 用于双向数据...

    wysiwyg富文本编辑器

    富文本编辑器是一种在线文本编辑工具,用户在浏览器上可以像使用Word那样编辑内容,并实时预览效果,这就是“所见即所得”(WYSIWYG)的概念。它极大地简化了网页内容的创建和修改过程,尤其对于非程序员或者不熟悉...

Global site tag (gtag.js) - Google Analytics