This is the basic type of the editor (it doesn't have enabled the image upload and the preview).
$('#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)
});
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:
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!
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;
}
}
You must add the following options to your editor:
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];