$('#example-id').bbcodeditor({
		defaultValue: "", // This option must be included whenever the editor is called (it can be left empty) !important
		content_class: "example-id-content" // This "option" is optional but you must call it if you want the get the value of the content area (editor)
	});
	

How to enable the preview button?!

Add the includedButtons option to the editor and in the option you can specify all the button that will be rendered by the editor. Example:

	
	$('#example-id').bbcodeditor({
		defaultValue: "",
		content_class: "example-id-content",
		includedButtons: [
    	['bold', 'italic', 'underline'], ['strikethrough', 'supperscript', 'subscript'], ['font-name', 'font-size', 'color'], ['unordered-list', 'ordered-list', 'align'], ['link', 'image', 'media'], ['misc', 'advcode', 'table'] ['preview']
    ]
	});
	

After that you must add the following values to the editor:

• customRequestToken: true
• previewRequestUrl: "https://example.com/request_preview.php"
• previewRequestTokenName: "_token" (it's useful for frameworks make sure your (framework's) token name is the one mentioned)
• previewRequestToken: the actual token itself (Ex: vf5Un8KUDa)

You'll receive something like this on the server side:

	
		bbcode: W2JdSGVsbG8gV29ybGQhWy9iXQ==
		_token: vf5Un8KUDa
	

It is a GET request by default (you can change it by adding the previewRequestType to the editor). The bbcode's value is encoded in base64 and it must be decoded (You can use this function to decode it in php: base64_decode($value);).

Example:

	
		$('#example-id').bbcodeditor({
			defaultValue: "",
			content_class: "example-id-content",
			customRequestToken: true,
			previewRequestTokenName: "_token", // This is the token's name in laravel!
			previewRequestToken: "vf5Un8KUDa",
			previewRequestUrl: "https://example.com/request_preview.php"
		});
	

And the server must return the following values in a json format:

	
		{
			parsed: "<b>Hello World!</b>",
			raw: "[b]Hello World![/b]"
		}
	

Note: the parsed and raw values must actually be the bbcode, the code above is just an example!

Click here if you want to see a simple bbcode parser.

Note: if you want to send an error message instead of the bbcode use the following json format:

	
		{
			error: "Example error message!"
		}
	

Example:

	
		<?php
		class PreviewClass
		{
			public $value;
			public $bbocde;

			private $_output;

			public function bbcodeParse($value)
			{
				$this->value = $value;

				// Parse the code
			}

			public function __construct()
			{
				$this->bbcode = $_GET['bbcode'];

				$this->bbcode = base64_decode($this->bbcode);

				if(!empty($this->bbcode))
				{
					$this->_output = json_encode([
						'parsed' => $this->bbcodeParse($this->bbcode),
						'raw' => $this->bbcode
					]);
				}
				else
				{
					$this->_output = json_encode([
						'error' => 'Please don\'t leave the bbcode field empty!'
					]);
				}

				return $this->_output;
			}
		}
	

How to enable image upload(s)!?

You must add the following options to your editor:

• enableImageUpload true
• uploadFileName: "filename"
• uploadFile: "bbcodeditor-image-upload"
• uploadFileTokenName: "_token" (it's useful for frameworks make sure your (framework's) token name is the one mentioned)
• uploadFileToken: the actual token itself (Ex: vf5Un8KUDa)

The default submitting method is POST (It can be changed through adding the imageUploadType option to the editor, it is not recommanded to change the upload method to GET!).

You can get/call the file via $_POST['bbcodeditor-image-upload'] in your php script.

Example:

	
	$('#example-id').bbcodeditor({
		defaultValue: "",
		content_class: "example-id-content",
		enableImageUpload: true,
		uploadFileName: "filename",
		uploadFile: "bbcodeditor-image-upload",
		uploadFileTokenName: "_token",
		uploadFileToken: "vf5Un8KUDa"
	});
	

You get/call the file easier following this example:

	
	$filename = $_POST['filename'];

	$this->file = $_FILE[$filename];