Add option to display shortcode visual placeholder

Issue #9

With this change the Shortcodable class have the option to implement the method getShortcodePlaceHolder. This method must output an image that will be used instead of the shortcode text. This method is optional, if it does not exists the functionality fallback to plain text.

The properties of the shortcode are stored in the title attribute of the image displayed in TinyMCE. So they are visible to user on hover.

Double click the placeholder image will fire the edit event same as highlighting the shortcode text.

Example:

class ImageGallery extends DataObject
{
    ...
    public function getShortcodePlaceHolder()
    {
        // Path to font file & size
        $fontFile = Director::baseFolder() . '/' . $this->ThemeDir() . '/fonts/FiraSans-Medium.ttf';
        $fontSize = 12;

        // Shortcode id value
        $text = Controller::curr()->getRequest()->param('ID');

        // Create an image with the shortcode id in center
        $imageBox = imagettfbbox($fontSize, 0, $fontFile, $text);

        $width = abs($imageBox[4] - $imageBox[0]) + 10;
        $height = abs($imageBox[5] - $imageBox[1]) + 10;

        $image = imagecreatetruecolor($width, $height);

        $color = imagecolorallocate($image, 1, 0, 0);
        $backgroundColor = imagecolorallocate($image, 200, 200, 200);

        imagefill($image, 0, 0, $backgroundColor);

        // Padding of 5 pixels.
        $x = 5;
        $y = $height - 5;
        imagettftext($image, $fontSize, 0, $x, $y, $color, $fontFile, $text);

        // Generate and send image to browser:
        header('Content-type: image/png');
        imagepng($image);
        imagedestroy($image);

        die;
    }

sheadawson / silverstripe-shortcodable

Add option to display shortcode visual placeholder #32