-
Notifications
You must be signed in to change notification settings - Fork 85
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #107 from alexandre-mbm/colored-readme
Colored README.md
- Loading branch information
Showing
1 changed file
with
127 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,200 +1,218 @@ | ||
| #WysiBB - WYSIWYG BBcode editor | ||
| # WysiBB - WYSIWYG BBcode editor | ||
|
|
||
| WysiBB is a jQuery visual WYSIWYG editor for BBcode. | ||
| For more information please visit [wysibb.com](http://www.wysibb.com) | ||
| For more information please visit [wysibb.com](http://www.wysibb.com) | ||
|
|
||
| ####Also you can [prioritize issues](http://www.gitfund.org/wbb/wysibb) for help us. | ||
| **Also you can [prioritize issues](http://www.gitfund.org/wbb/wysibb) for help us.** | ||
|
|
||
| ## Usage | ||
|
|
||
| Include the JQuery and WysiBB files | ||
|
|
||
| <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" /> | ||
| ```html | ||
| <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" /> | ||
| ``` | ||
|
|
||
| Activate WysiBB on an existing textarea | ||
|
|
||
| <script> | ||
| $(document).ready(function() { | ||
| $("#editor").wysibb() | ||
| }) | ||
| </script> | ||
| <textarea id="editor" name="editor_name">My text</textarea> | ||
| ```html | ||
| <script> | ||
| $(document).ready(function() { | ||
| $("#editor").wysibb() | ||
| }) | ||
| </script> | ||
| <textarea id="editor" name="editor_name">My text</textarea> | ||
| ``` | ||
|
|
||
| To see how it works, you can try [the official demo](http://www.wysibb.com/). | ||
|
|
||
|
|
||
| ## Options | ||
|
|
||
| ####BBcodes | ||
| ### BBcodes | ||
| WysiBB comes with all BBCodes by default (allButtons). You can configure BBCode you want. | ||
|
|
||
| <script> | ||
| $(document).ready(function() { | ||
| var wbbOpt = { | ||
| buttons: "bold,italic,underline,|,img,link,|,code,quote" | ||
| } | ||
| $("#editor").wysibb(wbbOpt); | ||
| }); | ||
| </script> | ||
|
|
||
| ####Language | ||
| WysiBB comes in russian by default, but you can set a different language | ||
|
|
||
| <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> | ||
| ```html | ||
| <script> | ||
| $(document).ready(function() { | ||
| var wbbOpt = { | ||
| buttons: "bold,italic,underline,|,img,link,|,code,quote" | ||
| } | ||
| $("#editor").wysibb(wbbOpt); | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| ### Language | ||
|
|
||
| WysiBB comes in russian by default, but you can set a different language | ||
|
|
||
| ```html | ||
| <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> | ||
| ``` | ||
|
|
||
| (languages available: Arabic (ar), Chinese (cn), English (en), French (fr), Polish (pl), Turkish (tr) & Vietnamese (ci)) | ||
|
|
||
|
|
||
| ####Shortkeys | ||
| ### 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. | ||
|
|
||
| var wbbOpt = { | ||
| allButtons: { | ||
| img: { | ||
| hotkey: "ctrl+shift+5" | ||
| }, | ||
| link: { | ||
| hotkey: "ctrl+shift+k" | ||
| } | ||
| } | ||
| } | ||
| $("#editor").wysibb(wbbOpt); | ||
| ```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. | ||
|
|
||
| var wbbOpt = { | ||
| hotkeys: false, //disable hotkeys (native browser combinations will work) | ||
| showHotkeys: false //hide combination in the tooltip when you hover. | ||
| } | ||
| $("#editor").wysibb(wbbOpt); | ||
|
|
||
| ```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 | ||
| ### Custom BBCodes | ||
|
|
||
| You can set custom BBcode transformation, or add your own BBCodes | ||
|
|
||
| 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); | ||
| ```javascript | ||
| 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); | ||
| ``` | ||
|
|
||
| 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. | ||
|
|
||
| `{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. | ||
|
|
||
|
|
||
| It also works fine on modern smartphone & tablet browsers. | ||
|
|
||
| ## API | ||
|
|
||
| Get to document editor | ||
|
|
||
| $("#editor").getDoc() | ||
| ```javascript | ||
| $("#editor").getDoc() | ||
| ``` | ||
|
|
||
| Get highlighted text | ||
|
|
||
| $("#editor").getSelectText() | ||
| ```javascript | ||
| $("#editor").getSelectText() | ||
| ``` | ||
|
|
||
| Get / replace BBcode editor content | ||
|
|
||
| $("#editor").bbcode(); //get BBcode editor content | ||
| $("#editor").bbcode(bbdata); //set BBcode editor content | ||
| ```javascript | ||
| $("#editor").bbcode(); //get BBcode editor content | ||
| $("#editor").bbcode(bbdata); //set BBcode editor content | ||
| ``` | ||
|
|
||
| Get / replace HTML editor content | ||
|
|
||
| $("#editor").htmlcode(); //get HTML editor content | ||
| $("#editor").htmlcode(htmlcode); //set HTML editor content | ||
| ```javascript | ||
| $("#editor").htmlcode(); //get HTML editor content | ||
| $("#editor").htmlcode(htmlcode); //set HTML editor content | ||
| ``` | ||
|
|
||
| getHTMLByCommand (command, params) | ||
| getHTMLByCommand (command, params) | ||
| Outputs the editor content as HTML. Where command - the command name, params - object variable | ||
|
|
||
| $("#editor").getHTMLByCommand("code",{seltext:"this code"}); | ||
| ```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 | ||
|
|
||
| $("#editor").getBBCodeByCommand("code",{seltext:"this code"}); | ||
| ```javascript | ||
| $("#editor").getBBCodeByCommand("code",{seltext:"this code"}); | ||
| ``` | ||
|
|
||
| insertAtCursor(data) | ||
| Insert a text where the typing cursor is | ||
|
|
||
| $("#editor").insertAtCursor("this code"); | ||
| ```javascript | ||
| $("#editor").insertAtCursor("this code"); | ||
| ``` | ||
|
|
||
| execCommand(command,value) | ||
| Execute the command. Where command - the command name, value - value | ||
|
|
||
| $("#editor").execCommand("bold"); | ||
| ```javascript | ||
| $("#editor").execCommand("bold"); | ||
| ``` | ||
|
|
||
| sync() | ||
| Synchronize data editor and textarea | ||
|
|
||
| $("#editor").sync(); | ||
|
|
||
|
|
||
|
|
||
| ```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. | ||
|
|
||
|
|
||
| ## Buy project | ||
|
|
||
| If you want buy a project, please contact us: admin[at]wysibb.com | ||
|
|
||
|
|
||
|
|
||
| If you want buy a project, please contact us: admin[at]wysibb.com |