Commit 538ad0a8 authored by Hermann Mayer's avatar Hermann Mayer

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.
parent 5099aff5
......@@ -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(),
);
......
......@@ -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>
......
......@@ -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": [
......
{
"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
}
}
<?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
));
}
}
......@@ -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'
))
;
}
......
JityHomepageBundle_editor:
resource: "@JityHomepageBundle/Resources/config/routing/editor.yml"
prefix: /editor
JityHomepageBundle_admin:
resource: "@JityHomepageBundle/Resources/config/routing/admin.yml"
prefix: /admin
......
editor_format:
pattern: /format
defaults: { _controller: JityHomepageBundle:Editor:format }
requirements: { _method: post }
......@@ -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." }
......@@ -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;
}
/* -------------------------------------------------------------------
// 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;
}
.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);
}
......@@ -2,3 +2,5 @@
// 'min-height',
// parseInt($('.wrapper').css('min-height')) - 110
// );
//
<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>
......@@ -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 %}
<!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>
#!/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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment