diff --git a/app/javascript/alchemy_admin/components/tinymce.js b/app/javascript/alchemy_admin/components/tinymce.js
index 93138ac649..69a53fb59e 100644
--- a/app/javascript/alchemy_admin/components/tinymce.js
+++ b/app/javascript/alchemy_admin/components/tinymce.js
@@ -1,10 +1,13 @@
-class Tinymce extends HTMLElement {
+import { createHtmlElement, wrap } from "alchemy_admin/utils/dom_helpers"
+
+class Tinymce extends HTMLTextAreaElement {
   constructor() {
     super()
 
-    // add default css classes to support the current styles
-    this.className = "tinymce_container"
-    this.textarea.className = "has_tinymce"
+    // create a wrapper around the the textarea and place everything inside that container
+    this.container = createHtmlElement('<div class="tinymce_container" />')
+    wrap(this, this.container)
+    this.className = "has_tinymce"
   }
 
   /**
@@ -31,7 +34,7 @@ class Tinymce extends HTMLElement {
       observerCallback,
       options
     )
-    this.tinymceIntersectionObserver.observe(this)
+    this.tinymceIntersectionObserver.observe(this.container)
   }
 
   /**
@@ -42,16 +45,12 @@ class Tinymce extends HTMLElement {
       this.tinymceIntersectionObserver.disconnect()
     }
 
-    tinymce.get(this.textareaId)?.remove(this.textareaId)
+    tinymce.get(this.id)?.remove(this.id)
   }
 
   initTinymceEditor() {
     this.appendSpinner("small")
 
-    const element = document
-      .getElementById(this.textareaId)
-      .closest(".element-editor")
-
     // initialize TinyMCE
     tinymce.init(this.configuration).then((editors) => {
       editors.forEach((editor) => {
@@ -60,12 +59,16 @@ class Tinymce extends HTMLElement {
         // mark the editor container as visible
         // without these correction the editor remains hidden
         // after a drag and drop action
-        editor.editorContainer.style.display = null
+        editor.show()
+
+        const elementEditor = document
+          .getElementById(this.id)
+          .closest(".element-editor")
 
         // event listener to mark the editor as dirty
-        editor.on("dirty", () => Alchemy.setElementDirty(element))
+        editor.on("dirty", () => Alchemy.setElementDirty(elementEditor))
         editor.on("click", (event) => {
-          event.target = element
+          event.target = elementEditor
           Alchemy.ElementEditors.onClickElement(event)
         })
       })
@@ -84,20 +87,12 @@ class Tinymce extends HTMLElement {
     }
   }
 
-  get textarea() {
-    return this.getElementsByTagName("textarea")[0]
-  }
-
-  get textareaId() {
-    return this.textarea.id
-  }
-
   get configuration() {
     const externalConfig = {}
 
     // read the attributes on the component and add them as custom configuration
     this.getAttributeNames().forEach((attributeName) => {
-      if (attributeName !== "class") {
+      if (!["class", "id", "is", "name"].includes(attributeName)) {
         const config = this.getAttribute(attributeName)
         const key = attributeName.replaceAll("-", "_")
 
@@ -114,9 +109,9 @@ class Tinymce extends HTMLElement {
       ...Alchemy.TinymceDefaults,
       ...externalConfig,
       locale: Alchemy.locale,
-      selector: `#${this.textareaId}`
+      selector: `#${this.id}`
     }
   }
 }
 
-customElements.define("alchemy-tinymce", Tinymce)
+customElements.define("alchemy-tinymce", Tinymce, { extends: "textarea" })
diff --git a/app/models/alchemy/ingredients/richtext.rb b/app/models/alchemy/ingredients/richtext.rb
index 437fae93b0..844634b70f 100644
--- a/app/models/alchemy/ingredients/richtext.rb
+++ b/app/models/alchemy/ingredients/richtext.rb
@@ -32,13 +32,8 @@ def has_tinymce?
         true
       end
 
-      # Returns true if there is a tinymce setting defined that contains settings.
-      def has_custom_tinymce_config?
-        custom_tinymce_config.is_a?(Hash)
-      end
-
       def custom_tinymce_config
-        settings[:tinymce] || []
+        settings[:tinymce] || {}
       end
 
       private
diff --git a/app/views/alchemy/ingredients/_richtext_editor.html.erb b/app/views/alchemy/ingredients/_richtext_editor.html.erb
index 43d7d7ece4..d6575d4858 100644
--- a/app/views/alchemy/ingredients/_richtext_editor.html.erb
+++ b/app/views/alchemy/ingredients/_richtext_editor.html.erb
@@ -3,12 +3,8 @@
   data: richtext_editor.data_attributes do %>
   <%= element_form.fields_for(:ingredients, richtext_editor.ingredient) do |f| %>
     <%= ingredient_label(richtext_editor, :value) %>
-    <alchemy-tinymce
-      <% richtext_editor.custom_tinymce_config.each do |k, v| %>
-      <%= k.to_s.dasherize %>="<%= v.to_json %>"
-      <% end %>
-    >
-      <%= f.text_area :value %>
-    </alchemy-tinymce>
+
+    <% custom_tinymce_config = richtext_editor.custom_tinymce_config.transform_keys{ |k| k.to_s.dasherize }.transform_values(&:to_json) %>
+    <%= f.text_area :value, custom_tinymce_config.merge(is: "alchemy-tinymce", id: richtext_editor.form_field_id(:value)) %>
   <% end %>
 <% end %>
diff --git a/spec/models/alchemy/ingredients/richtext_spec.rb b/spec/models/alchemy/ingredients/richtext_spec.rb
index 129c6e15ae..5218424733 100644
--- a/spec/models/alchemy/ingredients/richtext_spec.rb
+++ b/spec/models/alchemy/ingredients/richtext_spec.rb
@@ -33,21 +33,10 @@
     expect(richtext_ingredient.sanitized_body).to eq("<h1>Hello!</h1><p class=\"green\">Welcome to Peters Petshop.</p>")
   end
 
-  describe "#has_custom_tinymce_config?" do
-    subject { richtext_ingredient.has_custom_tinymce_config? }
-
-    it { is_expected.to be_falsy }
-
-    context "with custom configuration" do
-      let(:richtext_settings) { {tinymce: {plugin: "link"}} }
-      it { is_expected.to be_truthy }
-    end
-  end
-
   describe "#custom_tinymce_config" do
     subject { richtext_ingredient.custom_tinymce_config }
 
-    it { is_expected.to eq([]) }
+    it { is_expected.to eq({}) }
 
     context "with custom configuration" do
       let(:richtext_settings) { {tinymce: {plugin: "link"}} }
diff --git a/spec/views/alchemy/ingredients/richtext_editor_spec.rb b/spec/views/alchemy/ingredients/richtext_editor_spec.rb
index c224664476..b4c88a889e 100644
--- a/spec/views/alchemy/ingredients/richtext_editor_spec.rb
+++ b/spec/views/alchemy/ingredients/richtext_editor_spec.rb
@@ -19,7 +19,7 @@
   end
 
   it "renders a text area for tinymce" do
-    expect(rendered).to have_selector("alchemy-tinymce textarea")
+    expect(rendered).to have_selector("textarea[is=alchemy-tinymce]")
   end
 
   context "without custom configuration" do
@@ -32,7 +32,7 @@
     let(:settings) { {tinymce: {plugin: "link"}} }
 
     it "renders a custom configuration" do
-      expect(rendered).to have_selector("alchemy-tinymce[plugin]")
+      expect(rendered).to have_selector("textarea[is=alchemy-tinymce][plugin]")
     end
   end
 end