阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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();
      
      目录
      目录