jQuery文本编辑器插件jWYSIWYG

所属分类:输入-丰富的输入

 90352  325  查看评论 (12)
分享到微信朋友圈
X
jQuery文本编辑器插件jWYSIWYG ie兼容6

使用方法

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

<script type="text/javascript" src="jquery.wysiwyg.js"></script>
<script type="text/javascript">
$(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文件适用于它。

相关插件-丰富的输入

jQuery在线做试卷并查看答案

jQuery在线试卷,提交后查看答案、解析。题型包括 1单选2多选3判断4填空5问答8论述题6完型填空7阅读理解
  丰富的输入
 17864  222

jQuery模拟数字键盘插件mynumkb.js

jQuery pc端使用的数字键盘插件mynumkb.js,兼容ie6
  丰富的输入
 29601  316

jQuery表情插件emoji.js

基于jQuery的表情选择,html表情
  丰富的输入
 25375  217

jQuery移动端自制画板

可以使用多种颜色画笔进行图画,有橡皮擦,代码注释较全容易扩展。注意请在移动端查看效果!
  丰富的输入
 28309  301

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    水@木年华 0
    2019/7/11 18:35:32
    凌风 0
    2018/9/10 9:35:28
    怎样获取html的代码啊?就是别人输入的是文字我们获取的是html,在线急等在线急等在线急等在线急等在线急等在线急等在线急等 回复
    贪婪的さだこ 0
    2018/3/30 14:50:03
    文本框里的值怎么获取?
    回复
    手踹兜兜笑看拘侣分手 0
    2018/3/12 11:26:16
    请问,如何给jWYSIWYG的文本域赋值?而不是用默认值,在线等,急!!!!!!!!!!!!!!
        microsoftvs0
        2018/3/12 12:24:19

        注释掉

        $('#wysiwyg').wysiwyg("Html", "Sample code");

        直接

        <textarea id="wysiwyg" rows="5" cols="103">fffff</textarea>

        就可以了。

    回复
    张yueeeee 0
    2018/1/9 12:15:10

    存入数据库之后 怎么获取出来的文字是当时输入的样式

    回复
    心爨倾? 0
    2017/11/1 15:15:24
    daxiong123 0
    2017/8/17 9:34:53
    我这个怎么不好使啊
        众泰纽约联合总部0
        2017/8/20 23:31:59
        引用路径是否正确?最简单的方法chrome浏览器f12看下控制台,会有错误提示的。
    回复
    JunedanVan 0
    2017/5/22 17:47:08

    demo在IE8下运行并不可以。。。

    回复
    小石头_XL 0
    2016/8/2 10:08:06

    选择工具栏按钮控件配置选项:

    $('#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文件适用于它。这些是什么意思啊???看不懂是干什么用的,能给稍微解释一下吗?

    回复
    轰隆隆 0
    2015/6/8 16:34:19
    怎么没有给文本设置字体颜色呢? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复