Adding/Changing BBcodes

Suppose we need to establish WysiBB to the site, which supports BB codes bold, italic, underline, img, link, code, and also has its own BB code (which we love D)) - myquote. And thus, the BB code code has a different output, not the same as in the standard configuration.

For example code has the following conclusion:

<div class="mycode"><div class="codetop">Code:</div><div class="codemain">[PROGRAM...]</div></div>

And our new myquote BB Code is:

<div class="myquote">[QUOTE]</div>

So, let's set up.

  1. Of course first of all, we need to add load all the necessary scripts and styles to the site.

    We add the following tag <head></head> , the following code:

    <script src="/js/jquery/jquery.min.js"></script>
<script src="/js/jquery.wysibb.min.js"></script>
<link rel="stylesheet" href="/css/default/wbbtheme.css" type="text/css" />
    Do not forget to check the correctness of the path.

  2. Then you can begin to create the settings for our site. In our case, the settings editor and run it will look like this:

    <script>
$(document).ready(function() {
var wbbOpt = {
  buttons: "bold,italic,underline,|,img,link,|,code,myquote",
  allButtons: {
    code: {
      hotkey: "ctrl+shift+3", //Add hotkey
      transform: {
        '<div class="mycode"><div class="codetop">Code:</div><div class="codemain">{SELTEXT}</div></div>':'[code]{SELTEXT}[/code]'
      }
    },
    myquote: {
      title: 'Insert myquote',
      buttonText: 'myquote',
      transform: {
        '<div class="myquote">{SELTEXT}</div>':'[myquote]{SELTEXT}[/myquote]'
      }
    }
  }
}
$("#editor").wysibb(wbbOpt);
});
</script>
.....
<textarea id="editor"></textaera>

    In this configuration by using the buttons we described what BB codes will be connected to our editor. I want to note that this option was added at once and our own BB code myquote.

    Later, using the parameter allButtons, we have changed the conclusion BB code "code" and added our own, describing its title (tooltip when you hover), buttonText (Text button in the toolbar). With the parameter was specified transform BB code output format in HTML form.

    {SELTEXT} - is the only predefined peremenenny. By default, when you insert BB code is inserted into it the currently selected text.

  3. As a result we get here this editor: