How to make a simple text editor with jQuery, PHP and BBCode?

How can I format texts in a textarea with BBCode?
Type, create a mini text editor with shortcuts to paragraph, bold, center, those basic options, nothing too personalized.

 1
Author: brasofilo, 2014-03-12

1 answers

I suggest looking for a ready-made editor, since it is a common feature it is easier than reinventing the wheel. A quick search led me to the SCEditor, which seems to have everything you need. Open the site and, in the demo, click on the last button ("View source"): this will switch between Mode WYSIWYG and BB code mode.

This editor is free software (MIT license), so you can integrate it into your system without hindrances. To use it, just include the required scripts and stylesheets (choose the mode with BB code support):

<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="minified/themes/default.min.css" type="text/css" media="all" />
<script type="text/javascript" src="minified/jquery.sceditor.bbcode.min.js"></script>
<script src="languages/pt-BR.js"></script>

And call the plugin on your element (textarea), passing the desired options:

$("#meu_textarea").sceditor({
    plugins: "bbcode",
    style: "minified/jquery.sceditor.default.min.css",
    locale: "pt-BR"
});

Here is the API . To get the value that the user typed, one can simply use val in textarea or a specific method that can turn BB code into HTML for you or vice versa (caution: it may or may not have implications for security).

 6
Author: mgibsonbr, 2014-03-12 05:50:58