插件 jQuery.WysiBB 中文 API 文档

🌙
手机阅读
本文目录结构

插件 jQuery.WysiBB 中文 API 文档 https://github.com/wbb/WysiBB

WysiBB 是 BBcode 的 jQuery 可视 WYSIWYG 编辑器。有关更多信息,请访问 wysibb.com

优先考虑问题!

包括 JQuery 和 WysiBB 文件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdn.wysibb.com/js/jquery.wysibb.min.js"></script>
<link rel="stylesheet" href="http://cdn.wysibb.com/css/default/wbbtheme.css" />

在现有 textarea 上激活 WysiBB

<script>
$(document).ready(function() {
  $("#editor").wysibb()
})
</script>
<textarea id="editor" name="editor_name">My text</textarea>

要了解它是如何工作的,您可以尝试官方演示。

选项

BBcodes

WysiBB 默认包含所有 BBCode(allButtons)。您可以配置所需的 BBCode。

<script>
$(document).ready(function() {
var wbbOpt = {
  buttons: "bold,italic,underline,|,img,link,|,code,quote"
}
$("#editor").wysibb(wbbOpt);
});
</script>

语言

WysiBB 默认使用俄语,但您可以设置不同的语言

<head>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdn.wysibb.com/js/jquery.wysibb.min.js"></script>
<link rel="stylesheet" href="http://cdn.wysibb.com/css/default/wbbtheme.css" />
<script src="/js/lang/fr.js"></script>
...
</head>

<script>
$(document).ready(function() {
var wbbOpt = {
    lang : 	 "fr",
    buttons: "bold,italic,underline,|,img,link,|,code,quote"
}
$("#editor").wysibb(wbbOpt);
});
</script>

(可用语言:阿拉伯语(ar),中文(cn),英语(en),法语(fr),波兰语(pl),土耳其语(tr),越南语(ci)和西班牙语(es))

快捷键

您可以为 BBcode 分配任何键盘快捷键。默认情况下,WysiBB 设置了一些热键。您可以为现有 BB 代码添加或更改其组合。例如,考虑连接热键。

var wbbOpt = {
  allButtons: {
    img: {
      hotkey: "ctrl+shift+5"
    },
    link: {
      hotkey: "ctrl+shift+k"
    }
 }
}
$("#editor").wysibb(wbbOpt);

请注意,某些键组合已被浏览器使用,因此它们可能无法正常工作。

var wbbOpt = {
  hotkeys: false, //disable hotkeys (native browser combinations will work)
  showHotkeys: false //hide combination in the tooltip when you hover.
}
$("#editor").wysibb(wbbOpt);

自定义 BBCodes

您可以设置自定义 BBcode 转换,或添加自己的 BBCode

var wbbOpt = {
  buttons: "bold,italic,underline,|,img,link,|,code,myquote",
  allButtons: {
    code: {
      transform: {
        '<div class="mycode"><div class="codetop">This program code:</div><div class="codemain">{SELTEXT}</div></div>':'[code]{SELTEXT}[/code]'
      }
    },
    myquote: {
      title: 'Insert a quote',
      buttonText: 'myquote',
      transform: {
        '<div class="myquote">{SELTEXT}</div>':'[myquote]{SELTEXT}[/myquote]'
      }
    }
  }
}
$("#editor").wysibb(wbbOpt);

在这个配置中,通过使用按钮我们描述了 BBcodes 将连接到我们的编辑器。我想要注意,此选项是立即添加的,我们自己的 BBcode myquote。

后来,使用参数 allButtons,我们更改了结论 BBcode 代码并添加了我们自己的,描述了它的标题(当你悬停时的工具提示),buttonText(工具栏中的文本按钮)。

{SELTEXT} - 是唯一预定义的参数。

有关更多功能的信息,请参阅文档,例如 Sophisticated BBCodes,处理程序,带选项卡的模态窗口,…

浏览器支持

WysiBB 支持现代浏览器,包括谷歌 Chrome,Firefox,Safari,Opera 和 IE8 +。

它也适用于现代智能手机和平板电脑浏览器。

API

获取文档编辑器

$("#editor").getDoc()

获取突出显示的文

$("#editor").getSelectText()

获取 / 替换 BBcode 编辑器内容

$("#editor").bbcode(); //get BBcode editor content
$("#editor").bbcode(bbdata); //set BBcode editor content

获取 / 替换 HTML 编辑器内容

$("#editor").htmlcode(); //get HTML editor content
$("#editor").htmlcode(htmlcode); //set HTML editor content

getHTMLByCommand(command,params)将编辑器内容输出为 HTML。where 命令 - 命令名,params - 对象变量

$("#editor").getHTMLByCommand("code",{seltext:"this code"});

getBBCodeByCommand(command,params)以 BB 代码形式获取命令执行的结果。where 命令 - 命令名,params - 对象变量

$("#editor").getBBCodeByCommand("code",{seltext:"this code"});

insertAtCursor(data)在键入光标所在的位置插入文本

$("#editor").insertAtCursor("this code");

execCommand(command,value)执行命令。where 命令 - 命令名称,值 - 值

$("#editor").execCommand("bold");

sync()同步数据编辑器和 textarea

$("#editor").sync();

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了