jWYSIWYG 是一个基于 jQuery 的内容编辑器,可直接编辑 HTML 内容,并具备所见即所得的效果,该插件体积非常小,只有不到 26K。
测试在Firefox 3.5、Safari 4、opera、Internet Explorer 8。
与 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