diff --git a/README.md b/README.md index af66307..da05546 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,240 @@ #WysiBB - WYSIWYG BBcode editor -[Official website](http://www.wysibb.com) -[Demo](http://www.wysibb.com/demo/) -[Support forum](http://www.wysibb.com/forum/) \ No newline at end of file +WysiBB is a JQuery visual WYSIWYG editor for BBcode. +For more information please visit [wysibb.com](http://www.wysibb.com) + +## Usage + +Include the JQuery and WysiBB files + +```html + + + +``` + +Activate WysiBB on an existing textarea + +```html + + +``` + +To see how it works, you can try [the official demo](http://www.wysibb.com/demo/). + + +## Options + +####BBcodes +WysiBB comes with all BBCodes by default (allButtons). You can configure BBCode you want. + +```javascript +$(document).ready(function() { +var wbbOpt = { + buttons: "bold,italic,underline,|,img,link,|,code,quote" +} +$("#editor").wysibb(wbbOpt); +}); +``` + +####Language +WysiBB comes in russian by default, but you can set a different language + +```html + +... + + + + +... + +``` +```javascript +$(document).ready(function() { +var wbbOpt = { + lang : "en", + buttons: "bold,italic,underline,|,img,link,|,code,quote" +} +$("#editor").wysibb(wbbOpt); +}); +``` + +(languages available: Arabic (ar), Chinese (cn), English (en), French (fr), Polish (pl), Turkish (tr) & Vietnamese (ci)) + + +####Shortkeys + +You can assign any keyboard shortcuts for BBcode. By default WysiBB set some hotkeys. You can add or change their combinations for existing BBcodes. +Consider hook up hotkeys for example. + +```javascript +var wbbOpt = { + allButtons: { + img: { + hotkey: "ctrl+shift+5" + }, + link: { + hotkey: "ctrl+shift+k" + } + } +} +$("#editor").wysibb(wbbOpt); +``` + +Note that certain key combinations are already used by browsers, so they might not work. + +```javascript +var wbbOpt = { + hotkeys: false, //disable hotkeys (native browser combinations will work) + showHotkeys: false //hide combination in the tooltip when you hover. +} +$("#editor").wysibb(wbbOpt); +``` + +####Custom BBCodes + +You can set custom BBcode transformation, or add your own BBCodes + +```javascript +var wbbOpt = { + buttons: "bold,italic,underline,|,img,link,|,code,myquote", + allButtons: { + code: { + transform: { + '
This program code:
{SELTEXT}
':'[code]{SELTEXT}[/code]' + } + }, + myquote: { + title: 'Insert a quote', + buttonText: 'myquote', + transform: { + '
{SELTEXT}
':'[myquote]{SELTEXT}[/myquote]' + } + } + } +} +$("#editor").wysibb(wbbOpt); +``` + +In this configuration by using the buttons we described what BBcodes will be connected to our editor. I want to note that this option was added at once and our own BBcode myquote. + +Later, using the parameter allButtons, we have changed the conclusion BBcode code and added our own, describing its title (tooltip when you hover), buttonText (text button in the toolbar). + +`{SELTEXT}` - is the only predefined parameter. + + +See [the documentation](http://www.wysibb.com/ru/docs/) for more features like Sophisticated BBCodes, handlers, modal window with tabs, ... + + + +## Browser support + +WysiBB supports modern browsers, including Google Chrome, Firefox, Safari, Opera & IE8+. +It also works fine on modern smartphone & tablet browsers. + + + +## API + +### `getDoc()` + +Get to document editor + +```javascript +$("#editor").getDoc() +``` + + +### `getSelectText()` + +Get highlighted text + +```javascript +$("#editor").getSelectText() +``` + + +### `bbcode()` + +Get / replace BBcode editor content + +```javascript +$("#editor").bbcode(); //get BBcode editor content +$("#editor").bbcode(bbdata); //set BBcode editor content +``` + + +### `htmlcode()` + +Get / replace HTML editor content + +```javascript +$("#editor").htmlcode(); //get HTML editor content +$("#editor").htmlcode(htmlcode); //set HTML editor content +``` + +### `getHTMLByCommand(command, params) ` + +Outputs the editor content as HTML. Where command - the command name, params - object variable + +```javascript +$("#editor").getHTMLByCommand("code",{seltext:"this code"}); +``` + +### `getBBCodeByCommand(command, params)` + +Get an outcome of the execution of commands in BB code form. Where command - the command name, params - object variable + +```javascript +$("#editor").getBBCodeByCommand("code",{seltext:"this code"}); +``` + +### `insertAtCursor(data)` + +Insert a text where the typing cursor is + +```javascript +$("#editor").insertAtCursor("this code"); +``` + +### `execCommand(command, value)` + +Execute the command. Where command - the command name, value - value + +```javascript +$("#editor").execCommand("bold"); +``` + +### `sync()` + +Synchronize data editor and textarea + +```javascript +$("#editor").sync(); +``` + + + +## License + +WysiBB is licensed under the [MIT](http://www.opensource.org/licenses/mit-license.php) license. +If you use WysiBB a link back or a donation would be appreciated, but not required. + + + +## Contribute + +Any contributions and/or pull requests would be welcome. +Themes, translations, bug reports and bug fixes are greatly appreciated. + + +## Support + +[Official website](http://www.wysibb.com) +[Demo](http://www.wysibb.com/demo/) +[Support forum](http://www.wysibb.com/forum/)