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/_editor_actions.html.twig

@@ -0,0 +1,7 @@
+<script>
+    $('a[data-toggle="tab"]').on('click', function (e) {
+        if ('#previewId' == $(e.target).attr('href')) {
+            SymfonyDemo.preview('#post_content', '#previewId', '{{ path('admin_post_content_preview') }}');
+        }
+    });
+</script>

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

@@ -1,5 +1,10 @@
 {% extends 'admin/layout.html.twig' %}
 
+{% block javascripts %}
+    {{ parent() }}
+    {{ include('admin/blog/_editor_actions.html.twig') }}
+{% endblock %}
+
 {% block body_id 'admin_post_edit' %}
 
 {% block main %}

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

@@ -1,5 +1,10 @@
 {% extends 'admin/layout.html.twig' %}
 
+{% block javascripts %}
+    {{ parent() }}
+    {{ include('admin/blog/_editor_actions.html.twig') }}
+{% endblock %}
+
 {% block body_id 'admin_post_new' %}
 
 {% block main %}

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

@@ -24,3 +24,16 @@
         </span>
     </div>
 {% endblock %}
+
+{% block _post_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" id="previewId"></div>
+    </div>
+{% endblock %}

src/AppBundle/Controller/Admin/BlogController.php

@@ -189,4 +189,20 @@ public function deleteAction(Request $request, Post $post)
 
         return $this->redirectToRoute('admin_post_index');
     }
+
+    /**
+     * Converts a markdown string to HTML.
+     *
+     * @Route("/preview", name="admin_post_content_preview")
+     *
+     * This method uses the JsonResponse class which takes care of setting the
+     * correct content type for the response.
+     */
+    public function previewAction(Request $request)
+    {
+        return $this->json([
+            'data' => $this->get('markdown')
+                ->toHtml($request->request->get('text')),
+        ]);
+    }
 }

src/AppBundle/Form/PostType.php

@@ -53,6 +53,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
             ->add('content', null, [
                 'attr' => ['rows' => 20],
                 'label' => 'label.content',
+                'block_name' => 'editor',
             ])
             ->add('publishedAt', DateTimePickerType::class, [
                 'label' => 'label.published_at',

web/css/main.css

@@ -324,3 +324,38 @@ body#admin_post_show .post-tags .label-default i {
         width: 98%;
     }
 }
+
+/* Editor preview
+    http://frayd.us/blog/pure-css-loading-animation/
+   ------------------------------------------------------------------------- */
+
+.loading:after {
+    border-width: 0 3px 0 0;
+    border-style: solid;
+    border-color: rgba(0, 0, 0, .5);
+    border-radius: 50%;
+    display: block;
+    height: 50px;
+    left: 50%;
+    margin: -25px 0 0 -25px;
+    position: absolute;
+    top: 50%;
+    width: 50px;
+
+    content: "";
+
+    animation: spin 1s infinite linear;
+    -webkit-animation: spin 1s infinite linear;
+}
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg); }
+    to { -webkit-transform: rotate(360deg); }
+}
+
+#previewId {
+    min-height: 200px;
+}

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.empty().addClass('loading');
+
+            $.post(
+                previewUrl,
+                {text: $(text).val()},
+                function (r) { out.html(r.data).removeClass('loading'); }
+            );
+        }
+    }
 })(window.jQuery);