Merge pull request #37 from helios-ag/tinymce4

Tinymce4
helios-ag · Aug 18, 2013 · 11d3f1d · 11d3f1d
2 parents 1ed020e + ec621f7
commit 11d3f1d
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 3 deletions.
diff --git a/Controller/ElfinderController.php b/Controller/ElfinderController.php
@@ -32,6 +32,11 @@ public function showAction()
                     'tinymce_popup_path' => $this->getAssetsUrl($parameters['tinymce_popup_path'])
                 ));
                 break;
+            case 'tinymce4':
+                return $this->render('FMElfinderBundle:Elfinder:tinymce4.html.twig', array(
+                    'locale' => $locale,
+                ));
+                break;
             default:
                 return $this->render('FMElfinderBundle:Elfinder:simple.html.twig', array('locale' => $locale, 'fullscreen' => $fullscreen));
         }

diff --git a/README.md b/README.md
@@ -196,9 +196,8 @@ ElFinder will be available under Insert Image dialog
 
 You can integrate TinyMCE byself or use Bundles that already add TinyMCE functionality to your Symfony project.
 Below instruction how to integrate [FMElfinderBundle](https://github.com/helios-ag/FMElfinderBundle) with [TinyMCEBundle](https://github.com/stfalcon/TinymceBundle)
-Currently compatible with version 0.2.1 of TinyMCE bundle (require: "stfalcon/tinymce-bundle": "v0.2.1")
 ## Using ElfinderBundle with [TinyMCEBundle](https://github.com/stfalcon/TinymceBundle)
-
+Instruction for bundle version 0.2.1 and below (TinyMCE 3.x)
 Download both bundles, configure, dump and install assets as written in installation steps
 
 ### Configuration
@@ -228,6 +227,33 @@ as shown below
 {{ elfinder_tinymce_init() }}
 ```
 
+### Integrating with TinyMCE 4.x
+
+ ### Configuration
+
+ Update the editor property in your app/config.yml
+ ```yml
+ fm_elfinder:
+     editor: tinymce4
+ ```
+ Under tinymce configuration node, theme configuration, add:
+ file_browser_callback : 'elFinderBrowser'
+
+ ```yml
+ stfalcon_tinymce:
+     theme:
+         simple:
+             file_browser_callback : elFinderBrowser
+ ```
+
+ before (  {{ tinymce_init() }} ) function call
+ place ElfinderBundle's function: {{ elfinder_tinymce_init4() }}
+ as shown below
+ ```jinja
+     {{ elfinder_tinymce_init4() }}
+     {{ tinymce_init() }}
+ ```
+
 Thats all, Elfinder is integrated into TinyMCE.
 
 Manual integration guide can be found [here](/INTEGRATION_GUIDE.md)

diff --git a/Resources/views/Elfinder/_tinymce4.html.twig b/Resources/views/Elfinder/_tinymce4.html.twig
@@ -0,0 +1,16 @@
+<script type="text/javascript">
+    function elFinderBrowser (field_name, url, type, win) {
+        tinymce.activeEditor.windowManager.open({
+            file:"{{ url('elfinder') }}",
+            title: 'elFinder 2.0',
+            width: 900,
+            height: 450,
+            resizable: 'yes'
+        }, {
+            setUrl: function (url) {
+                win.document.getElementById(field_name).value = url;
+            }
+        });
+        return false;
+    }
+</script>
diff --git a/Resources/views/Elfinder/tinymce4.html.twig b/Resources/views/Elfinder/tinymce4.html.twig
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    {% stylesheets output='assetic/css/compiled/fmelfinder/main.css'
+    'bundles/fmelfinder/css/*' filter='cssrewrite,?yui_css' %}
+    <link rel="stylesheet" href="{{ asset_url }}" />
+    {% endstylesheets %}
+</head>
+<body>
+{% javascripts output='bundles/fmelfinder/js/main.js' filter='?yui_js'
+'@FMElfinderBundle/Resources/public/js/jquery/jquery-1.8.0.min.js'
+'@FMElfinderBundle/Resources/public/js/jquery/jquery-ui-1.8.23.custom.min.js'
+'@FMElfinderBundle/Resources/public/js/elfinder.min.js'
+'@FMElfinderBundle/Resources/public/js/i18n/*'
+%}
+<script src="{{ asset_url }}"></script>
+{% endjavascripts %}
+<script type="text/javascript" charset="utf-8">
+
+    var FileBrowserDialogue = {
+        init: function () {
+            // Here goes your code for setting your custom things onLoad.
+        },
+        mySubmit: function (URL) {
+            // pass selected file path to TinyMCE
+            top.tinymce.activeEditor.windowManager.getParams().setUrl(URL);
+
+            // close popup window
+            top.tinymce.activeEditor.windowManager.close();
+        }
+    }
+
+    $(document).ready(function() {
+        var elf = $('#elfinder').elfinder({
+            // set your elFinder options here
+            url: '{{ path('ef_connect') }}',  // connector URL
+            lang : '{{ locale }}',
+            getFileCallback: function(file) { // editor callback
+                FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
+            }
+        }).elfinder('instance');
+    });
+</script>
+<div id="elfinder"></div>
+</body>
+</html>
diff --git a/Twig/Extension/FMElfinderTinymceExtension.php b/Twig/Extension/FMElfinderTinymceExtension.php
@@ -29,7 +29,8 @@ public function __construct(ContainerInterface $container)
     public function getFunctions()
     {
         return array(
-            'elfinder_tinymce_init' => new \Twig_Function_Method($this, 'tinymce', array('is_safe' => array('html')))
+            'elfinder_tinymce_init' => new \Twig_Function_Method($this, 'tinymce', array('is_safe' => array('html'))),
+            'elfinder_tinymce_init4' => new \Twig_Function_Method($this, 'tinymce4', array('is_safe' => array('html')))
         );
     }
 
@@ -41,6 +42,11 @@ public function tinymce()
         return $this->container->get('templating')->render('FMElfinderBundle:Elfinder:_tinymce.html.twig');
     }
 
+    public function tinymce4()
+    {
+        return $this->container->get('templating')->render('FMElfinderBundle:Elfinder:_tinymce4.html.twig');
+    }
+
     /**
      * (non-PHPdoc)
      * @see Twig_ExtensionInterface::getName()