Added ACE Editor. Added Editor Controller for building a editor construct and…

Added ACE Editor. Added Editor Controller for building a editor construct and formating markdown text. Build-into page controller.

app/AppKernel.php

@@ -20,6 +20,7 @@ class AppKernel extends Kernel
             new JMS\AopBundle\JMSAopBundle(),
             new JMS\DiExtraBundle\JMSDiExtraBundle($this),
             new JMS\SecurityExtraBundle\JMSSecurityExtraBundle(),
+            new Knp\Bundle\MarkdownBundle\KnpMarkdownBundle(),
             new Jity\HomepageBundle\JityHomepageBundle(),
         );
 

app/Resources/views/base.html.twig

@@ -9,7 +9,6 @@
 
     {% stylesheets
     '@JityHomepageBundle/Resources/public/css/*.css'
-    '@JityHomepageBundle/Resources/public/css/markitup/*.css'
     filter='?yui_css'
     %}
     <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
@@ -44,9 +43,9 @@
             <ul class="nav">
 
               {% if page is defined %}
-                {% set currentSlug = page.slug %}
+              {% set currentSlug = page.slug %}
               {% else %}
-                {% set currentSlug = '' %}
+              {% set currentSlug = '' %}
               {% endif%}
 
               {% render 'JityHomepageBundle:Default:renderNavigation' with {'currentSlug': currentSlug, 'navigation': 'Default'} %}
@@ -120,7 +119,7 @@
         <div class="row">
 
           {% block base_content %}
-          
+
           {% for flashMessage in app.session.flashbag.get('notice') %}
           <div class="alert alert-block alert-info fade in">
             <button data-dismiss="alert" class="close" type="button">×</button>
@@ -153,6 +152,7 @@
 
         </div>
       </div>
+
       <div class="push"><!--//--></div>
     </div>
 

composer.json

@@ -19,7 +19,8 @@
         "jms/security-extra-bundle": "1.2.*",
         "jms/di-extra-bundle": "1.1.*",
         "doctrine/doctrine-fixtures-bundle": "dev-master",
-        "doctrine/data-fixtures": "dev-master"
+        "doctrine/data-fixtures": "dev-master",
+        "knplabs/knp-markdown-bundle": "dev-master"
     },
     "scripts": {
         "post-install-cmd": [

composer.lock

 {
-    "hash": "6f7a06d3a4e0993e91726a6db1bb3e29",
+    "hash": "2adf4fa0b3ab06281128aac13e1bba88",
     "packages": [
         {
             "name": "doctrine/common",
@@ -617,6 +617,58 @@
                 "expression"
             ]
         },
+        {
+            "name": "knplabs/knp-markdown-bundle",
+            "version": "dev-master",
+            "target-dir": "Knp/Bundle/MarkdownBundle",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/KnpLabs/KnpMarkdownBundle",
+                "reference": "d3eb9dceaf65ebefdda0fe1d5a5e8ca3ebd8612b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://github.com/KnpLabs/KnpMarkdownBundle/zipball/d3eb9dceaf65ebefdda0fe1d5a5e8ca3ebd8612b",
+                "reference": "d3eb9dceaf65ebefdda0fe1d5a5e8ca3ebd8612b",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.2",
+                "symfony/framework-bundle": ">=2.0,<2.2-dev"
+            },
+            "suggest": {
+                "symfony/twig-bundle": "to use the Twig markdown filter"
+            },
+            "time": "1347520405",
+            "type": "symfony-bundle",
+            "installation-source": "source",
+            "autoload": {
+                "psr-0": {
+                    "Knp\\Bundle\\MarkdownBundle": ""
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "KnpLabs Team",
+                    "homepage": "http://knplabs.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "http://github.com/KnpLabs/KnpMarkdownBundle/contributors"
+                }
+            ],
+            "description": "Knplabs markdown bundle transforms markdown into html",
+            "homepage": "http://github.com/KnpLabs/KnpMarkdownBundle",
+            "keywords": [
+                "markdown",
+                "knp",
+                "knplabs",
+                "bundle"
+            ]
+        },
         {
             "name": "kriswallsmith/assetic",
             "version": "v1.1.0-alpha1",
@@ -1289,9 +1341,10 @@
     "aliases": [
 
     ],
-    "minimum-stability": "stable",
+    "minimum-stability": "alpha",
     "stability-flags": {
         "doctrine/doctrine-fixtures-bundle": 20,
-        "doctrine/data-fixtures": 20
+        "doctrine/data-fixtures": 20,
+        "knplabs/knp-markdown-bundle": 20
     }
 }

src/Jity/HomepageBundle/Controller/EditorController.php

+<?php
+
+namespace Jity\HomepageBundle\Controller;
+
+use Jity\HomepageBundle\JityHomepageBundle;
+use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpFoundation\Request;
+
+/**
+ * EditorController 
+ * 
+ * @uses Controller
+ * @version $id$
+ * @author Hermann Mayer <hermann.mayer92@gmail.com> 
+ */
+class EditorController extends Controller
+{
+    /**
+     * formatAction 
+     * 
+     * @access public
+     * @return void
+     */
+    public function formatAction(Request $request)
+    {
+        // Get markdown parser service
+        $parser = $this->container->get('markdown.parser');
+
+        // Get 'text' variable from POST
+        $text = $request->request->get('text');
+
+        // Parse the requested data
+        $html = $parser->transform($text);
+
+        // Response the parsed data
+        return new Response($html, 200);
+    }
+
+    /**
+     * buildAction 
+     * 
+     * @param string $title 
+     * @access public
+     * @return void
+     */
+    public function buildAction($syncElement, $title = 'Texteditor', $mode = 'markdown')
+    {
+        return $this->render('JityHomepageBundle:Editor:editor.html.twig', array(
+            'syncElement' => $syncElement,
+            'title' => $title,
+            'mode' => $mode
+        ));
+    }
+}
+

src/Jity/HomepageBundle/Form/PageType.php

@@ -26,14 +26,44 @@ class PageType extends AbstractType
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
-            ->add('slug')
-            ->add('title')
-            ->add('icon')
-            ->add('content')
-            ->add('category', 'entity', array('class'=>'Jity\HomepageBundle\Entity\Category', 'property' => 'name'))
-            ->add('sidebar', 'entity', array('class'=>'Jity\HomepageBundle\Entity\Sidebar', 'property' => 'name'))
-            ->add('navigation', 'entity', array('class'=>'Jity\HomepageBundle\Entity\Navigation', 'property' => 'name'))
-            ->add('author', 'entity', array('class'=>'Jity\HomepageBundle\Entity\User', 'property' => 'email'))
+            ->add('slug', null, array(
+                'label' => 'Schlagzeile (für die Url)'
+            ))
+            ->add('title', null, array(
+                'label' => 'Titel der Seite'
+            ))
+            ->add('icon', null, array(
+                'label' => 'Icon für die Navigation'
+            ))
+            ->add('content', null, array(
+                'attr' => array(
+                    'rows' => '6',
+                    'class' => 'editor span4',
+                    'data-target' => '#editor_modal',
+                    'data-toggle' => 'modal'
+                ),
+                'label' => 'Inhalt'
+            ))
+            ->add('category', 'entity', array(
+                'class'=>'Jity\HomepageBundle\Entity\Category',
+                'property' => 'name',
+                'label' => 'Kategorie'
+            ))
+            ->add('sidebar', 'entity', array(
+                'class'=>'Jity\HomepageBundle\Entity\Sidebar',
+                'property' => 'name',
+                'label' => 'Sidebar'
+            ))
+            ->add('navigation', 'entity', array(
+                'class'=>'Jity\HomepageBundle\Entity\Navigation',
+                'property' => 'name',
+                'label' => 'Navigation'
+            ))
+            ->add('author', 'entity', array(
+                'class'=>'Jity\HomepageBundle\Entity\User',
+                'property' => 'email',
+                'label' => 'Autor'
+            ))
         ;
     }
 

src/Jity/HomepageBundle/Resources/config/routing.yml

+JityHomepageBundle_editor:
+    resource: "@JityHomepageBundle/Resources/config/routing/editor.yml"
+    prefix:   /editor
+
 JityHomepageBundle_admin:
     resource: "@JityHomepageBundle/Resources/config/routing/admin.yml"
     prefix:   /admin

src/Jity/HomepageBundle/Resources/config/routing/editor.yml

+editor_format:
+    pattern: /format
+    defaults: { _controller: JityHomepageBundle:Editor:format }
+    requirements: { _method: post }
+

src/Jity/HomepageBundle/Resources/config/validation.yml

@@ -25,3 +25,15 @@ Jity\HomepageBundle\Entity\Contact:
             - NotBlank:   { message: "Diese Angabe muss noch ausgefüllt werden." }
             - Length:     { min: 2, minMessage: "Diese Angabe muss mindestens {{ limit }} Zeichen lang sein." }
 
+Jity\HomepageBundle\Entity\Page:
+    properties:
+        slug:
+            - NotBlank:   { message: "Diese Angabe muss noch ausgefüllt werden." }
+            - Length:     { min: 2, minMessage: "Diese Angabe muss mindestens {{ limit }} Zeichen lang sein." }
+        title:
+            - NotBlank:   { message: "Diese Angabe muss noch ausgefüllt werden." }
+            - Length:     { min: 2, minMessage: "Diese Angabe muss mindestens {{ limit }} Zeichen lang sein." }
+        content:
+            - NotBlank:   { message: "Diese Angabe muss noch ausgefüllt werden." }
+            - Length:     { min: 2, minMessage: "Diese Angabe muss mindestens {{ limit }} Zeichen lang sein." }
+

src/Jity/HomepageBundle/Resources/public/css/90_jity.css

@@ -237,3 +237,54 @@ input[type="url"], input[type="search"], input[type="tel"], input[type="color"],
     font-weight: bold;
 }
 
+#editor { 
+    /* position: absolute; */
+    /* top: 0; */
+    /* right: 0; */
+    /* bottom: 0; */
+    /* left: 0; */
+
+    position: relative;
+    width: 910px;
+    height: 400px;
+}
+
+.modal {
+    display: none;
+    background-color: #000;
+}
+
+#editor_modal {
+   width:940px;
+   margin-left:-470px;
+   margin-top:-350px;
+}
+
+.modal-header {
+    background-color: #282624;
+    border-bottom-color: #B54718;
+    color: #89827B;
+}
+
+.modal-header .close {
+    color: #fff;
+    text-shadow: 0 1px 0 #000;
+}
+
+.modal-body {
+    background-color: #201F1D;
+    color: #8F8F8F;
+}
+
+.modal-footer {
+    background-color: #282624;
+    border-top-color: #4D4945;
+    box-shadow: 0 1px 0 #4D4945 inset;
+}
+
+input::-moz-focus-inner, button::-moz-focus-inner {
+  border: 0;
+}
+
+
+

src/Jity/HomepageBundle/Resources/public/css/markitup/00_skin-style.css

-/* -------------------------------------------------------------------
-// markItUp! Universal MarkUp Engine, JQuery plugin
-// By Jay Salvat - http://markitup.jaysalvat.com/
-// ------------------------------------------------------------------*/
-.markItUp * {
-    margin:0px; padding:0px;
-    outline:none;
-}
-.markItUp a:link,
-.markItUp a:visited {
-    color:#000;
-    text-decoration:none;
-}
-.markItUp  {
-/*     width:700px; */
-    margin:5px 0 5px 0;
-}
-.markItUpContainer  {
-    font:11px Verdana, Arial, Helvetica, sans-serif;
-}
-.markItUpEditor {
-    font:12px 'Courier New', Courier, monospace;
-    padding:5px;
-/* 	width:690px; */
-    height:320px;
-    clear:both;
-    line-height:18px;
-    overflow:auto;
-}
-.markItUpPreviewFrame	{
-    overflow:auto;
-    background-color:#FFF;
-    width:99.9%;
-    height:300px;
-    margin:5px 0;
-}
-.markItUpFooter {
-    width:100%;
-}
-.markItUpResizeHandle {
-    overflow:hidden;
-    width:22px; height:5px;
-    margin-left:auto;
-    margin-right:auto;
-    background-image:url(/bundles/jityhomepage/js/markitup/sets/default/img/handle.png);
-    cursor:n-resize;
-}
-/***************************************************************************************/
-/* first row of buttons */
-.markItUpHeader ul li	{
-    list-style:none;
-    float:left;
-    position:relative;
-    margin-bottom: 5px;
-}
-.markItUpHeader ul li:hover > ul{
-    display:block;
-}
-.markItUpHeader ul .markItUpDropMenu {
-    background:transparent url(/bundles/jityhomepage/js/markitup/sets/default/img/menu.png) no-repeat 115% 50%;
-    margin-right:5px;
-}
-.markItUpHeader ul .markItUpDropMenu li {
-    margin-right:0px;
-}
-/* next rows of buttons */
-.markItUpHeader ul ul {
-    display:none;
-    position:absolute;
-    top:18px; left:0px;
-    background:#FFF;
-    border:1px solid #000;
-}
-.markItUpHeader ul ul li {
-    float:none;
-    border-bottom:1px solid #000;
-}
-.markItUpHeader ul ul .markItUpDropMenu {
-    background:#FFF url(/bundles/jityhomepage/js/markitup/sets/default/img/submenu.png) no-repeat 100% 50%;
-}
-.markItUpHeader ul .markItUpSeparator {
-    margin:0 10px;
-    width:1px;
-    height:16px;
-    overflow:hidden;
-    background-color:#CCC;
-}
-.markItUpSeparator {
-    height: 23px !important;
-    margin: 0 7px 0 5px !important;
-}
-.markItUpHeader ul ul .markItUpSeparator {
-    width:auto; height:1px;
-    margin:0px;
-}
-/* next rows of buttons */
-.markItUpHeader ul ul ul {
-    position:absolute;
-    top:-1px; left:150px;
-}
-.markItUpHeader ul ul ul li {
-    float:none;
-}
-.markItUpHeader ul a {
-    display:block;
-    width:16px; height:16px;
-    text-indent:-10000px;
-    background-repeat:no-repeat;
-    padding:3px;
-    margin:0px;
-}
-.markItUpHeader ul ul a {
-    display:block;
-    padding-left:0px;
-    text-indent:0;
-    width:120px;
-    padding:5px 5px 5px 25px;
-    background-position:2px 50%;
-}
-.markItUpHeader ul ul a:hover  {
-    color:#FFF;
-    background-color:#000;
-}

src/Jity/HomepageBundle/Resources/public/css/markitup/50_set-style.css

-.markItUpButton a {
-    background-position: center;
-}
-.markItUpButton {
-    margin-right: 3px;
-}
-.markdown .markItUpButton1 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/h1.png);
-}
-.markdown .markItUpButton2 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/h2.png);
-}
-.markdown .markItUpButton3 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/h3.png);
-}
-.markdown .markItUpButton4 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/h4.png);
-}
-.markdown .markItUpButton5 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/h5.png);
-}
-.markdown .markItUpButton6 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/h6.png);
-}
-.markdown .markItUpButton7 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/bold.png);
-}
-.markdown .markItUpButton8 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/italic.png);
-}
-.markdown .markItUpButton9 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/list-bullet.png);
-}
-.markdown .markItUpButton10 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/list-numeric.png);
-}
-.markdown .markItUpButton11 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/picture.png);
-}
-.markdown .markItUpButton12 a {
-    background-image:url(/bundles/jityhomepage/img/markitup/link.png);
-}
-.markdown .markItUpButton13 a	{
-    background-image:url(/bundles/jityhomepage/img/markitup/quotes.png);
-}
-.markdown .markItUpButton14 a	{
-    background-image:url(/bundles/jityhomepage/img/markitup/code.png);
-}
-.markdown .preview a {
-    background-image:url(/bundles/jityhomepage/img/markitup/preview.png);
-}

src/Jity/HomepageBundle/Resources/public/js/90_jity.js

@@ -2,3 +2,5 @@
 //     'min-height',
 //     parseInt($('.wrapper').css('min-height')) - 110
 // );
+//
+

src/Jity/HomepageBundle/Resources/views/Editor/editor.html.twig

+<div class="modal hide fade" id="editor_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+        <h3 id="myModalLabel">{{ title|raw }}</h3>
+    </div>
+    <div class="modal-body">
+        <div id="editor"></div>
+    </div>
+    <div class="modal-footer">
+        <button class="btn btn-primary"><i class="icon-pencil icon-white"></i> Änderung speichern</button>
+    </div>
+</div>
+
+<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+
+<script type="text/javascript">
+
+    var readyStateCheckInterval = setInterval(function() {
+
+        if (document.readyState === "complete") {
+
+            var editor = ace.edit("editor");
+            editor.setTheme("ace/theme/tomorrow_night");
+            editor.getSession().setMode("ace/mode/{{ mode }}");
+
+            document.getElementById('editor').style.fontSize='14px';
+
+            var textarea = $('{{ syncElement|raw }}');
+            editor.getSession().setValue(textarea.val());
+
+            editor.getSession().on('change', function(){
+                textarea.val(editor.getSession().getValue());
+            });
+
+            clearInterval(readyStateCheckInterval);
+        }
+    }, 10);
+
+</script>
+

src/Jity/HomepageBundle/Resources/views/Page/new.html.twig

@@ -17,7 +17,7 @@
                 <i class="icon-ok icon-white"></i>
                 Speichern
             </button>
-            
+
             <a href="{{ path('author_page') }}" class="btn btn-danger">
                 <i class="icon-share-alt icon-white"></i>
                 Zurück zur Liste
@@ -26,5 +26,7 @@
 
     </form>
 
+    {% render 'JityHomepageBundle:Editor:build' with {'syncElement': 'textarea[name="jity_homepagebundle_pagetype[content]"]'} %}
+
 {% endblock %}
 

src/Jity/HomepageBundle/Tests/editor.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>ACE in Action</title>
+<style type="text/css" media="screen">
+    #editor {
+        /* position: absolute; */
+        /* top: 0; */
+        /* right: 0; */
+        /* bottom: 0; */
+        /* left: 0; */
+
+        width: 500px;
+        height: 500px;
+    }
+</style>
+</head>
+<body>
+
+<div id="editor">
+Development
+===========
+
+####Composer
+
+Install all missing components and libs
+
+    php bin/composer.phar install -v
+
+Upgrade all components and libs
+
+    php bin/composer.phar update -v
+
+
+Deployment
+==========
+
+####Phing
+</div>
+
+<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+<script>
+    var editor = ace.edit("editor");
+    editor.setTheme("ace/theme/tomorrow_night");
+    editor.getSession().setMode("ace/mode/markdown");
+    document.getElementById('editor').style.fontSize='14px';
+</script>
+</body>
+</html>
+

src/Jity/HomepageBundle/Tests/md-formater.sh

+#!/bin/bash
+
+clear
+echo
+
+curl \
+    -s \
+    -d 'text=
+
+Development
+===========
+
+####Composer
+
+Install all missing components and libs
+
+    php bin/composer.phar install -v
+
+Upgrade all components and libs
+
+    php bin/composer.phar update -v
+
+
+Deployment
+==========
+
+####Phing
+
+    ' \
+    'http://jity.workstation.lan/app_dev.php/editor/format'\
+    | highlight --syntax html --out-format=xterm256
+
+echo
+exit