jWYSIWYG 基于 jQuery 富文本 Web 编辑器

发布于 2017-11-17 21:45:50 字数 2201 浏览 2148 评论 0

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",
        exec:  function() { 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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。