Add inline editing support

egeloen · Dec 23, 2014 · cbad747 · cbad747
1 parent c80b6ce
commit cbad747
Show file tree

Hide file tree

Showing 14 changed files with 207 additions and 148 deletions.
diff --git a/DependencyInjection/Configuration.php b/DependencyInjection/Configuration.php
@@ -31,6 +31,7 @@ public function getConfigTreeBuilder()
             ->root('ivory_ck_editor')
             ->children()
                 ->booleanNode('enable')->end()
+                ->booleanNode('inline')->end()
                 ->booleanNode('autoload')->end()
                 ->booleanNode('jquery')->end()
                 ->booleanNode('input_sync')->end()

diff --git a/DependencyInjection/IvoryCKEditorExtension.php b/DependencyInjection/IvoryCKEditorExtension.php
@@ -89,6 +89,10 @@ private function registerConfig(array $config, ContainerBuilder $container)
             $formType->addMethodCall('isEnable', array($config['enable']));
         }
 
+        if (isset($config['inline'])) {
+            $formType->addMethodCall('isInline', array($config['inline']));
+        }
+
         if (isset($config['autoload'])) {
             $formType->addMethodCall('isAutoload', array($config['autoload']));
         }

diff --git a/Form/Type/CKEditorType.php b/Form/Type/CKEditorType.php
@@ -34,6 +34,9 @@ class CKEditorType extends AbstractType
     /** @var boolean */
     private $autoload = true;
 
+    /** @var boolean */
+    private $inline = false;
+
     /** @var boolean */
     private $jquery = false;
 
@@ -113,6 +116,22 @@ public function isAutoload($autoload = null)
         return $this->autoload;
     }
 
+    /**
+     * Sets/Checks if the widget is inlined.
+     *
+     * @param boolean $inline TRUE if the widget is inlined else FALSE.
+     *
+     * @return boolean TRUE if the widget is inlined else FALSE.
+     */
+    public function isInline($inline = null)
+    {
+        if ($inline !== null) {
+            $this->inline = (bool) $inline;
+        }
+
+        return $this->inline;
+    }
+
     /**
      * Checks/Sets if the jquery adapter is loaded.
      *
@@ -294,6 +313,7 @@ public function buildForm(FormBuilderInterface $builder, array $options)
 
         if ($builder->getAttribute('enable')) {
             $builder->setAttribute('autoload', $options['autoload']);
+            $builder->setAttribute('inline', $options['inline']);
             $builder->setAttribute('jquery', $options['jquery']);
             $builder->setAttribute('input_sync', $options['input_sync']);
             $builder->setAttribute('base_path', $options['base_path']);
@@ -330,6 +350,7 @@ public function buildView(FormView $view, FormInterface $form, array $options)
 
         if ($form->getConfig()->getAttribute('enable')) {
             $view->vars['autoload'] = $form->getConfig()->getAttribute('autoload');
+            $view->vars['inline'] = $form->getConfig()->getAttribute('inline');
             $view->vars['jquery'] = $form->getConfig()->getAttribute('jquery');
             $view->vars['input_sync'] = $form->getConfig()->getAttribute('input_sync');
             $view->vars['base_path'] = $form->getConfig()->getAttribute('base_path');
@@ -351,6 +372,7 @@ public function setDefaultOptions(OptionsResolverInterface $resolver)
             ->setDefaults(array(
                 'enable'      => $this->enable,
                 'autoload'    => $this->autoload,
+                'inline'      => $this->inline,
                 'jquery'      => $this->jquery,
                 'input_sync'  => $this->inputSync,
                 'base_path'   => $this->basePath,
@@ -365,6 +387,7 @@ public function setDefaultOptions(OptionsResolverInterface $resolver)
             ->addAllowedTypes(array(
                 'enable'      => 'bool',
                 'autoload'    => 'bool',
+                'inline'      => 'bool',
                 'jquery'      => 'bool',
                 'input_sync'  => 'bool',
                 'config_name' => array('string', 'null'),

diff --git a/Resources/doc/usage.md b/Resources/doc/usage.md
@@ -204,6 +204,23 @@ $builder->add('field', 'ckeditor', array('autoload' => false));
 
 Be aware, the library must be loaded before any field have been rendered.
 
+## Inline support
+
+By default, the bundle uses a [classic editing](http://docs.ckeditor.com/#!/guide/dev_framed) which relies on
+`CKEDITOR.replace`. If you want to use the [inline editing](http://docs.ckeditor.com/#!/guide/dev_inline) which relies
+on `CKEDITOR.inline`, you can configure it globally:
+
+``` yaml
+ivory_ck_editor:
+    inline: true
+```
+
+Or, if you just want to enable it for a specific field, you can use:
+
+``` php
+$builder->add('field', 'ckeditor', array('inline' => true));
+```
+
 ## JQuery adapter
 
 The CKEditor JQuery adapter is by default not loaded even if the `autoload` option is enabled. In order to load it,

diff --git a/Resources/views/Form/ckeditor_widget.html.php b/Resources/views/Form/ckeditor_widget.html.php
@@ -25,6 +25,6 @@
             <?php echo $view['ivory_ckeditor']->renderTemplate($templateName, $template); ?>
         <?php endforeach; ?>
 
-        <?php echo $view['ivory_ckeditor']->renderReplace($id, $config, $input_sync); ?>
+        <?php echo $view['ivory_ckeditor']->renderWidget($id, $config, $inline, $input_sync); ?>
     </script>
 <?php endif; ?>
diff --git a/Resources/views/Form/ckeditor_widget.html.twig b/Resources/views/Form/ckeditor_widget.html.twig
@@ -26,7 +26,7 @@
                 {{ ckeditor_template(template_name, template) }}
             {% endfor %}
 
-            {{ ckeditor_replace(id, config, input_sync) }}
+            {{ ckeditor_widget(id, config, inline, input_sync) }}
         </script>
     {% endif %}
 {% endblock %}
diff --git a/Templating/CKEditorHelper.php b/Templating/CKEditorHelper.php
@@ -64,15 +64,16 @@ public function renderJsPath($jsPath)
     }
 
     /**
-     * Renders the replace.
+     * Renders the widget.
      *
      * @param string  $id        The identifier.
      * @param array   $config    The config.
+     * @param boolean $inline    TRUE if the widget is inlined else FALSE.
      * @param boolean $inputSync TRUE if the input is synchronized with the CKEditor instance else FALSE.
      *
-     * @return string The rendered replace.
+     * @return string The rendered widget.
      */
-    public function renderReplace($id, array $config, $inputSync = false)
+    public function renderWidget($id, array $config, $inline = false, $inputSync = false)
     {
         $config = $this->fixConfigLanguage($config);
         $config = $this->fixConfigContentsCss($config);
@@ -85,7 +86,8 @@ public function renderReplace($id, array $config, $inputSync = false)
         $this->fixConfigEscapedValues($config);
 
         $replace = sprintf(
-            'CKEDITOR.replace("%s", %s);',
+            'CKEDITOR.%s("%s", %s);',
+            $inline ? 'inline' : 'replace',
             $id,
             $this->fixConfigConstants($this->jsonBuilder->build())
         );

diff --git a/Tests/DependencyInjection/AbstractIvoryCKEditorExtensionTest.php b/Tests/DependencyInjection/AbstractIvoryCKEditorExtensionTest.php
@@ -81,6 +81,7 @@ public function testDefaultFormType()
         $this->assertInstanceOf('Ivory\CKEditorBundle\Form\Type\CKEditorType', $type);
         $this->assertTrue($type->isEnable());
         $this->assertTrue($type->isAutoload());
+        $this->assertFalse($type->isInline());
         $this->assertFalse($type->useJquery());
         $this->assertFalse($type->isInputSync());
         $this->assertSame('bundles/ivoryckeditor/', $type->getBasePath());
@@ -129,6 +130,14 @@ public function testAutoload()
         $this->assertFalse($this->container->get('ivory_ck_editor.form.type')->isAutoload());
     }
 
+    public function testInline()
+    {
+        $this->loadConfiguration($this->container, 'inline');
+        $this->container->compile();
+
+        $this->assertTrue($this->container->get('ivory_ck_editor.form.type')->isInline());
+    }
+
     public function testInputSync()
     {
         $this->loadConfiguration($this->container, 'input_sync');

diff --git a/Tests/Fixtures/config/Yaml/inline.yml b/Tests/Fixtures/config/Yaml/inline.yml
@@ -0,0 +1,2 @@
+ivory_ck_editor:
+    inline: true
diff --git a/Tests/Form/Type/CKEditorTypeTest.php b/Tests/Form/Type/CKEditorTypeTest.php
@@ -78,6 +78,7 @@ public function testInitialState()
     {
         $this->assertTrue($this->ckEditorType->isEnable());
         $this->assertTrue($this->ckEditorType->isAutoload());
+        $this->assertFalse($this->ckEditorType->isInline());
         $this->assertFalse($this->ckEditorType->useJquery());
         $this->assertFalse($this->ckEditorType->isInputSync());
         $this->assertSame('bundles/ivoryckeditor/', $this->ckEditorType->getBasePath());
@@ -147,6 +148,35 @@ public function testAutoloadWithExplicitValue()
         $this->assertFalse($view->vars['autoload']);
     }
 
+    public function testInlineWithDefaultValue()
+    {
+        $form = $this->factory->create('ckeditor');
+        $view = $form->createView();
+
+        $this->assertArrayHasKey('inline', $view->vars);
+        $this->assertFalse($view->vars['inline']);
+    }
+
+    public function testInlineWithConfiguredValue()
+    {
+        $this->ckEditorType->isInline(true);
+
+        $form = $this->factory->create('ckeditor');
+        $view = $form->createView();
+
+        $this->assertArrayHasKey('inline', $view->vars);
+        $this->assertTrue($view->vars['inline']);
+    }
+
+    public function testInlineWithExplicitValue()
+    {
+        $form = $this->factory->create('ckeditor', null, array('inline' => true));
+        $view = $form->createView();
+
+        $this->assertArrayHasKey('inline', $view->vars);
+        $this->assertTrue($view->vars['inline']);
+    }
+
     public function testJqueryWithDefaultValue()
     {
         $form = $this->factory->create('ckeditor');