Add support for attributes on alchemy-tinymce

Allow the toolbar and plugin attribute on the tinymce web component. The configuration is read in from the elements.yml and will be available as (escaped) JSON. It is also possible to use a plain string.
AlchemyCMS · Aug 28, 2023 · 74c7a9d · 74c7a9d
1 parent 136bdb5
commit 74c7a9d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/app/javascript/alchemy_admin/components/tinymce.js b/app/javascript/alchemy_admin/components/tinymce.js
@@ -1,8 +1,8 @@
 class Tinymce extends HTMLElement {
   constructor() {
     super()
-    this.externalConfig = {}
 
+    // add default css classes to support the current styles
     this.className = "tinymce_container"
     this.textarea.className = "has_tinymce"
   }
@@ -93,17 +93,28 @@ class Tinymce extends HTMLElement {
   }
 
   get configuration() {
+    const externalConfig = {}
+
+    // read the attributes on the component and add them as custom configuration
+    this.getAttributeNames().forEach((attributeName) => {
+      if (attributeName !== "class") {
+        const config = this.getAttribute(attributeName)
+        try {
+          externalConfig[attributeName] = JSON.parse(config)
+        } catch (e) {
+          // also string values as parameter
+          externalConfig[attributeName] = config
+        }
+      }
+    })
+
     return {
       ...Alchemy.TinymceDefaults,
-      ...this.externalConfig,
+      ...externalConfig,
       locale: Alchemy.locale,
       selector: `#${this.textareaId}`
     }
   }
-
-  set configuration(config) {
-    this.externalConfig = config
-  }
 }
 
 customElements.define("alchemy-tinymce", Tinymce)
diff --git a/app/views/alchemy/ingredients/_richtext_editor.html.erb b/app/views/alchemy/ingredients/_richtext_editor.html.erb
@@ -5,17 +5,18 @@
   <%= element_form.fields_for(:ingredients, richtext_editor.ingredient) do |f| %>
     <%= ingredient_label(richtext_editor, :value, for: richtext_dom_id) %>
 
-    <alchemy-tinymce>
-      <%= f.text_area :value, id: richtext_dom_id %>
-    </alchemy-tinymce>
-  <% end %>
-  <% if richtext_editor.has_custom_tinymce_config? %>
-    <script type="text/javascript" charset="utf-8">
-      document.getElementById("<%= richtext_dom_id %>").configuration = {
+    <% if richtext_editor.has_custom_tinymce_config? %>
+      <alchemy-tinymce
         <% richtext_editor.custom_tinymce_config.each do |k, v| %>
-        <%= k %>: <%== v.to_json %>,
+        <%= k %>="<%= v.to_json %>"
         <% end %>
-      };
-    </script>
+      >
+        <%= f.text_area :value, id: richtext_dom_id %>
+      </alchemy-tinymce>
+    <% else %>
+      <alchemy-tinymce>
+        <%= f.text_area :value, id: richtext_dom_id %>
+      </alchemy-tinymce>
+    <%  end %>
   <% end %>
 <% end %>