2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

jWYSIWYG 基于 jQuery 富文本 Web 编辑器

时间:12-14来源:作者:点击数:27

jWYSIWYG 是一个基于 jQuery 的内容编辑器,可直接编辑 HTML 内容,并具备所见即所得的效果,该插件体积非常小,只有不到 26K。

插件要求

  1. jQuery 1.3.2或更高(jQuery 1.5.2测试)。
  2. 请注意,我们不支持正式jQuery 1.6,但将支持jQuery 1.6.1。

支持

  1. jQuery UI 对话框和 simplemodal 为 inserttable 和 insertimage 按钮。
  2. jQuery 的用户界面可编辑的调整。

兼容性

测试在Firefox 3.5、Safari 4、opera、Internet Explorer 8。

  1. 在 IE6 透明 GIF 可能有一个问题要解决:
  2. 开放 jquery.wysiwyg.css

与 jquery.wysiwyg.no-alpha.gif 替换字符串 jquery.wysiwyg.gif

使用方法

下面的代码创建一个 jwysiwyg 编辑器的默认选项:

  • <script src="jquery.wysiwyg.js"></script>
  • <script>
  • $(function() {
  •     $('#wysiwyg').wysiwyg();
  • });
  • </script>
  • <textarea id="wysiwyg"></textarea>

工具栏按钮中选择与控制的配置选项

  • $('#wysiwyg').wysiwyg({
  •     controls: {
  •         strikeThrough: { visible: true },
  •         underline: { visible: true },
  •         subscript: { visible: true },
  •         superscript: { visible: true }
  •     }
  • });

自定义控件还可以与控制选项指定:

  • $('#wysiwyg').wysiwyg({
  •     controls: {
  •         alertSep: { separator: true },
  •         alert: {
  •             visible: true,
  •             exec: function() { alert('Hello World'); },
  •             className: 'alert'
  •         }
  •     }
  • })

另一种方式:

  • $('#wysiwyg').wysiwyg("addControl",
  •     "controlName",
  •     {
  •         icon: "/path/to/icon.png",
  •         execfunction() { alert('Hello World'); }
  •     }
  • );

使用CSS样式表内编辑的内容,使用CSS配置选项:

  • $('#wysiwyg').wysiwyg({
  •     css: 'editor.css'
  • });

编辑器不会继承包含页面的样式,您必须指定一个CSS文件适用于它。

清除编辑器:

  • $('#wysiwyg').wysiwyg('clear');

编辑器获得焦点:

  • $('#wysiwyg').wysiwyg('focus');

当 #insertimage 链接被点击,在编辑器中的当前光标位置插入一个图片:

  • $('a[href="#insertImage"]').click(function() {
  •     $('#wysiwyg').wysiwyg('insertImage', 'img/hourglass.gif');
  • });

添加一些额外的属性的图像:

  • $('a[href="#insertImage"]').click(function() {
  •     $('#wysiwyg').wysiwyg('insertImage', 'img/hourglass.gif', { 'class': 'myClass', 'className': 'myClass' });
  • });

项目地址:https://github.com/jwysiwyg/jwysiwyg

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐