Merge pull request #245 from stfalcon/allow-multiple-selectors

Allow multiple selectors
stfalcon · Jan 2, 2020 · 9ef2149 · 9ef2149
2 parents 481e802 + 7b9f0cd
commit 9ef2149
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 13 deletions.
diff --git a/DependencyInjection/Configuration.php b/DependencyInjection/Configuration.php
@@ -31,7 +31,13 @@ public function getConfigTreeBuilder(): TreeBuilder
                     // Set init to true to use callback on the event init
                     ->booleanNode('use_callback_tinymce_init')->defaultFalse()->end()
                     // Selector
-                    ->scalarNode('selector')->defaultValue('.tinymce')->end()
+                    ->arrayNode('selector')
+                        ->prototype('scalar')->end()
+                        ->beforeNormalization()
+                            ->ifString()
+                            ->then(function ($value) { return [$value]; })
+                        ->end()
+                    ->end()
                     // base url for content
                     ->scalarNode('base_url')->end()
                     // asset packageName

diff --git a/DependencyInjection/StfalconTinymceExtension.php b/DependencyInjection/StfalconTinymceExtension.php
@@ -23,6 +23,9 @@ public function load(array $configs, ContainerBuilder $container): void
         // Get default configuration of the bundle
         $config = $this->processConfiguration(new Configuration(), $configs);
 
+        if (empty($config['selector'])) {
+            $config['selector'] = ['.tinymce'];
+        }
         if (empty($config['theme'])) {
             $config['theme'] = [
                 'simple' => [],

diff --git a/README.md b/README.md
@@ -130,6 +130,35 @@ In the example we set default language from the parameters.ini. Of course you ca
 
 If language parameter isn't set, the default language will be get from the session.
 
+## Multiply selector
+
+You can specify one or many selectors for editor placement.
+
+```yaml
+    // app/config/config.yml
+    stfalcon_tinymce:
+        selector: ".tinymce"
+```
+
+or 
+
+```yaml
+    // app/config/config.yml
+    stfalcon_tinymce:
+        selector: 
+            - ".tinymce"
+            - "#tinymce"
+```
+
+or
+
+```yaml
+    // app/config/config.yml
+    stfalcon_tinymce:
+        selector: [".tinymce", "#tinymce"]
+```
+
+
 ## Custom configurations
 
 According to the TinyMCE documentation you can configure your editor as you wish. Below is an almost full list of available parameters that you can configure by yourself:
@@ -139,7 +168,10 @@ According to the TinyMCE documentation you can configure your editor as you wish
     stfalcon_tinymce:
         include_jquery: true
         tinymce_jquery: true
-        selector: ".tinymce"
+        selector:
+            - ".tinymce"
+            - "#editor1"
+            - "#editor2"
         base_url: "http://yourdomain.com/" # this parameter may be included if you need to override the assets_base_urls for your template engine (to override a CDN base url)
         # Get current language from the parameters.ini
         language: %locale%

diff --git a/Resources/public/js/init.standard.js b/Resources/public/js/init.standard.js
@@ -12,17 +12,9 @@ function initTinyMCE(options) {
         for (i in t) {
             if (t.hasOwnProperty(i)) t[i].remove();
         }
-        switch (options.selector.substring(0, 1)) {
-            case "#":
-                var _t = document.getElementById(options.selector.substring(1));
-                if (_t) textareas.push(_t);
-                break;
-            case ".":
-                textareas = document.getElementsByClassName(options.selector.substring(1));
-                break;
-            default :
-                textareas = document.getElementsByTagName('textarea');
-        }
+        options.selector.forEach(function(selector) {
+            textareas = processSelector(selector, textareas);
+        });
         if (!textareas.length) {
             return false;
         }
@@ -107,6 +99,31 @@ function initTinyMCE(options) {
     });
 }
 
+/**
+ * @param selector
+ * @param textareas
+ */
+function processSelector(selector, textareas) {
+    switch (selector.substring(0, 1)) {
+        case "#":
+            _t = document.getElementById(selector.substring(1));
+            if (_t) textareas.push(_t);
+            break;
+        case ".":
+            elements = document.getElementsByClassName(selector.substring(1));
+            for (element of elements) {
+                textareas.push(element);
+            }
+            break;
+        default:
+            elements = document.getElementsByTagName('textarea');
+            for (element of elements) {
+                textareas.push(element);
+            };
+    }
+    return textareas;
+}
+
 /**
  * Get elements by class name
  *