Editor preview

app/Resources/translations/messages.en.xlf

@@ -351,6 +351,14 @@
                 <source>rss.description</source>
                 <target>Most recent posts published on the Symfony Demo blog</target>
             </trans-unit>
+            <trans-unit id="label.write">
+                <source>label.write</source>
+                <target>Write</target>
+            </trans-unit>
+            <trans-unit id="label.preview">
+                <source>label.preview</source>
+                <target>Preview</target>
+            </trans-unit>
         </body>
     </file>
 </xliff>

app/Resources/views/admin/blog/edit.html.twig

@@ -1,5 +1,16 @@
 {% extends 'admin/layout.html.twig' %}
 
+{% block javascripts %}
+    {{ parent() }}
+    <script>
+        $('a[data-toggle="tab"]').on('click', function (e) {
+            if ('#previewId' == $(e.target).attr('href')) {
+                SymfonyDemo.preview('#post_content', '#previewId', '{{ path('preview') }}');
+            }
+        });
+    </script>
+{% endblock %}
+
 {% block body_id 'admin_post_edit' %}
 
 {% block main %}

app/Resources/views/admin/blog/new.html.twig

@@ -1,5 +1,16 @@
 {% extends 'admin/layout.html.twig' %}
 
+{% block javascripts %}
+    {{ parent() }}
+    <script>
+        $('a[data-toggle="tab"]').on('click', function (e) {
+            if ('#previewId' == $(e.target).attr('href')) {
+                SymfonyDemo.preview('#post_content', '#previewId', '{{ path('preview') }}');
+            }
+        });
+    </script>
+{% endblock %}
+
 {% block body_id 'admin_post_new' %}
 
 {% block main %}

app/Resources/views/form/fields.html.twig

@@ -24,3 +24,16 @@
         </span>
     </div>
 {% endblock %}
+
+{% block editor_widget %}
+    <ul class="nav nav-tabs">
+        <li class="active"><a href="#writeId" data-toggle="tab">{{ 'label.write'|trans }}</a></li>
+        <li><a href="#previewId" data-toggle="tab">{{ 'label.preview'|trans }}</a></li>
+    </ul>
+    <div class="tab-content">
+        <div class="tab-pane active" id="writeId">
+            {{ block('textarea_widget') }}
+        </div>
+        <div class="tab-pane" style="min-height: 200px;" id="previewId"></div>
+    </div>
+{% endblock %}

src/AppBundle/Controller/Admin/BlogController.php

@@ -18,6 +18,7 @@
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Security;
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 
 /**
@@ -189,4 +190,26 @@ public function deleteAction(Request $request, Post $post)
 
         return $this->redirectToRoute('admin_post_index');
     }
+
+    /**
+     * Converts a markdown string to HTML.
+     *
+     * @Route("/preview", name="preview")
+     *
+     * This method uses the JsonResponse class which takes care of setting the
+     * correct content type for the response.
+     */
+    public function previewAction(Request $request)
+    {
+        $response = [];
+        $text = $request->request->get('text');
+
+        if (!$text) {
+            $response['data'] = 'Nothing to preview...';
+        } else {
+            $response['data'] = $this->get('markdown')->toHtml($text);
+        }
+
+        return new JsonResponse($response);
+    }
 }

src/AppBundle/Form/PostType.php

@@ -13,6 +13,7 @@
 
 use AppBundle\Entity\Post;
 use AppBundle\Form\Type\DateTimePickerType;
+use AppBundle\Form\Type\EditorType;
 use AppBundle\Form\Type\TagsInputType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\TextareaType;
@@ -50,7 +51,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
             ->add('summary', TextareaType::class, [
                 'label' => 'label.summary',
             ])
-            ->add('content', null, [
+            ->add('content', EditorType::class, [
                 'attr' => ['rows' => 20],
                 'label' => 'label.content',
             ])

src/AppBundle/Form/Type/EditorType.php

@@ -0,0 +1,33 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace AppBundle\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
+
+/**
+ * Defines a custom form field type used to display a markdown editor with preview functionality.
+ *
+ * See http://symfony.com/doc/current/cookbook/form/create_custom_field_type.html
+ *
+ * @author Nikolai Plath <[email protected]>
+ */
+class EditorType extends AbstractType
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function getParent()
+    {
+        return TextareaType::class;
+    }
+}

web/js/main.js

@@ -66,4 +66,25 @@
                 .modal('show');
         }
     });
+
+    window.SymfonyDemo = {
+        /**
+         * Render a Markdown input to formatted HTML
+         *
+         * @param {String} text
+         * @param {String} preview
+         * @param {String} previewUrl
+         */
+        preview: function (text, preview, previewUrl) {
+            var out = $(preview);
+
+            out.html('Loading preview...');
+
+            $.post(
+                previewUrl,
+                {text: $(text).val()},
+                function (r) { out.html(r.data); }
+            );
+        }
+    }
 })(window.jQuery);