I need to preserve the structure in a data-tinymce html tag to pass to a javascript function but the structure is somehow not being preserved and this is causing the method in the javascript function to fail.
The structure is
{
event_root: null,
selector: ".tinymce",
menubar: "file edit view insert format tools table help",
toolbar: ["undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist","link image | accordion accordionremove | table media | lineheight outdent indent| forecolor backcolor removeformat charmap emoticons code fullscreen preview save print | pagebreak codesample | ltr rtl"],
toolbar_mode: "sliding",
contextmenu: "link image table",
quickbars_selection_toolbar: "bold italic | quicklink h2 h3 blockquote quickimage quicktable",
plugins: "preview importcss searchreplace autolink autosave save directionality code,visualblocks visualchars fullscreen image link media codesample,table charmap pagebreak nonbreaking insertdatetime advlist lists,wordcount help charmap quickbars emoticons accordion",
promotion: false,
autosave_ask_before_unload: true,
autosave_interval: "30s",
autosave_prefix: "tinymce-autosave-{path}{query}-{id}-",
autosave_restore_when_empty: true,
autosave_retention: "30m",
image_caption: true,
image_advtab: true,
image_class_list: [{"title":"None","value":""},{"title":"Drop shadow","value":"shadow"}]
}
I have a link that is generated by a helper function that is passing this structure via a data-tinymce html atrtribute, the code is as follows
# This method creates a link with `data-id` `data-fields` attributes. These attributes are used to create new instances of the nested fields through Javascript.
def link_to_add_fields(name, f, association)
new_object = f.object.send(association).klass.new
# Saves the unique ID of the object into a variable.
# This is needed to ensure the key of the associated array is unique. This is makes parsing the content in the `data-fields` attribute easier through Javascript.
# We could use another method to achive this.
id = new_object.object_id
#tinymce_config = tinymce :try
tinymce = CcsCms::CustomPage::ConfigTinymce.get_tiny_config_for_js("try")
#tinymce = "<%=tinymce(:try)%>"
# https://api.rubyonrails.org/ fields_for(record_name, record_object = nil, fields_options = {}, &block)
# record_name = :page_sections
# record_object = new_object
# fields_options = { child_index: id }
# child_index` is used to ensure the key of the associated array is unique, and that it matched the value in the `data-id` attribute.
# `page[page_sections_attributes][child_index_value][_destroy]`
fields = f.fields_for(association, new_object, child_index: id) do |builder|
# `association.to_s.singularize + "_fields"` ends up evaluating to `page_sections_fields`
# The render function will then look for `views/pages/_page_sections_fields.html.erb`
# The render function also needs to be passed the value of 'builder', because `views/pages/_page_sections_fields.html.erb` needs this to render the form tags.
render(association.to_s.singularize + "_fields", form: builder)
end
# This renders a simple link, but passes information into `data` attributes.
# This info can be named anything we want, but in this case we chose `data-id:` and `data-fields:`.
# The `id:` is from `new_object.object_id`.
# The `fields:` are rendered from the `fields` blocks.
# We use `gsub("\n", "")` to remove anywhite space from the rendered partial.
# The `id:` value needs to match the value used in `child_index: id`.
link_to(
name,
"#",
class: "add_fields",
data: {
tinymce: tinymce, #.to_json.html_safe,
id: id,
fields: fields.gsub("\n", ""),
},
)
end
The html that this link generates is
<a class="add_fields" data-tinymce="{
event_root: null,
selector: ".tinymce",
menubar: "file edit view insert format tools table help",
toolbar: ["undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist","link image | accordion accordionremove | table media | lineheight outdent indent| forecolor backcolor removeformat charmap emoticons code fullscreen preview save print | pagebreak codesample | ltr rtl"],
toolbar_mode: "sliding",
contextmenu: "link image table",
quickbars_selection_toolbar: "bold italic | quicklink h2 h3 blockquote quickimage quicktable",
plugins: "preview importcss searchreplace autolink autosave save directionality code,visualblocks visualchars fullscreen image link media codesample,table charmap pagebreak nonbreaking insertdatetime advlist lists,wordcount help charmap quickbars emoticons accordion",
promotion: false,
autosave_ask_before_unload: true,
autosave_interval: "30s",
autosave_prefix: "tinymce-autosave-{path}{query}-{id}-",
autosave_restore_when_empty: true,
autosave_retention: "30m",
image_caption: true,
image_advtab: true,
image_class_list: [{"title":"None","value":""},{"title":"Drop shadow","value":"shadow"}]
}" data-id="34920" data-fields="<div class="page-section"> <p></p> <section> <fieldset> <legend> Page Section </legend> <input autocomplete="off" type="hidden" value="false" name="menu_item[page_sections_attributes][34920][_destroy]" id="menu_item_page_sections_attributes_34920__destroy" /> <div class="cms-admin-field"> <label for="menu_item_page_sections_attributes_34920_content">Content</label>: <textarea class="tinymce" name="menu_item[page_sections_attributes][34920][content]" id="menu_item_page_sections_attributes_34920_content"></textarea> </div> <script>//<![CDATA[TinyMCERails.initialize('try', { });//]]></script> <div class="cms-admin-field"> <label for="menu_item_page_sections_attributes_34920_collapsed_header_text">Collapsed header text</label>: <input editor="template classic type classic" type="text" value="" name="menu_item[page_sections_attributes][34920][collapsed_header_text]" id="menu_item_page_sections_attributes_34920_collapsed_header_text" /> </div> <div class="cms-admin-field"> <label for="menu_item_page_sections_attributes_34920_include_contact_form">Include contact form</label>: <input name="menu_item[page_sections_attributes][34920][include_contact_form]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="menu_item[page_sections_attributes][34920][include_contact_form]" id="menu_item_page_sections_attributes_34920_include_contact_form" /> </div> <div class="cms-admin-field"> <label for="menu_item_page_sections_attributes_34920_collapsible">Collapsible</label>: <input name="menu_item[page_sections_attributes][34920][collapsible]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="menu_item[page_sections_attributes][34920][collapsible]" id="menu_item_page_sections_attributes_34920_collapsible" /> </div> <div class="cms-admin-field"> <label for="menu_item_page_sections_attributes_34920_has_borders">Has borders</label>: <input name="menu_item[page_sections_attributes][34920][has_borders]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="menu_item[page_sections_attributes][34920][has_borders]" id="menu_item_page_sections_attributes_34920_has_borders" /> </div> <div class="cms-admin-field"> <label for="menu_item_page_sections_attributes_34920_full_width">Full width</label>: <input name="menu_item[page_sections_attributes][34920][full_width]" type="hidden" value="0" autocomplete="off" /><input type="checkbox" value="1" name="menu_item[page_sections_attributes][34920][full_width]" id="menu_item_page_sections_attributes_34920_full_width" /> </div> <div> <a class="remove_fields" href="#">Remove</a> </div> </fieldset> </section></div>" href="#">Add Section</a>
The javascript code that rubs when the link is clicked is as follows
handleClick(link, e) {
// Stop the function from executing if a link or event were not passed into the function.
if (!link || !e) return;
// Prevent the browser from following the URL.
e.preventDefault();
//get the tinymce config data
let config = link.dataset.tinymce;
// Save a unique timestamp to ensure the key of the associated array is unique.
let time = new Date().getTime();
// Save the data id attribute into a variable. This corresponds to `new_object.object_id`.
let linkId = link.dataset.id;
// Create a new regular expression needed to find any instance of the `new_object.object_id` used in the fields data attribute if there's a value in `linkId`.
let regexp = linkId ? new RegExp(linkId, "g") : null;
// Replace all instances of the `new_object.object_id` with `time`, and save markup into a variable if there's a value in `regexp`.
let newFields = regexp ? link.dataset.fields.replace(regexp, time) : null;
// Add the new markup to the form if there are fields to add.
newFields ? link.insertAdjacentHTML("beforebegin", newFields) : null;
console.log(config);
// tinymce.init(config);
tinymce.init(
{
event_root: null,
selector: ".tinymce",
menubar: "file edit view insert format tools table help",
toolbar: ["undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist","link image | accordion accordionremove | table media | lineheight outdent indent| forecolor backcolor removeformat charmap emoticons code fullscreen preview save print | pagebreak codesample | ltr rtl"],
toolbar_mode: "sliding",
contextmenu: "link image table",
quickbars_selection_toolbar: "bold italic | quicklink h2 h3 blockquote quickimage quicktable",
plugins: "preview importcss searchreplace autolink autosave save directionality code,visualblocks visualchars fullscreen image link media codesample,table charmap pagebreak nonbreaking insertdatetime advlist lists,wordcount help charmap quickbars emoticons accordion",
promotion: false,
autosave_ask_before_unload: true,
autosave_interval: "30s",
autosave_prefix: "tinymce-autosave-{path}{query}-{id}-",
autosave_restore_when_empty: true,
autosave_retention: "30m",
image_caption: true,
image_advtab: true,
image_class_list: [{"title":"None","value":""},{"title":"Drop shadow","value":"shadow"}]
}
);
};
The call to console.log(config); appears to show the correct structure as follows
{
event_root: null,
selector: ".tinymce",
menubar: "file edit view insert format tools table help",
toolbar: ["undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist","link image | accordion accordionremove | table media | lineheight outdent indent| forecolor backcolor removeformat charmap emoticons code fullscreen preview save print | pagebreak codesample | ltr rtl"],
toolbar_mode: "sliding",
contextmenu: "link image table",
quickbars_selection_toolbar: "bold italic | quicklink h2 h3 blockquote quickimage quicktable",
plugins: "preview importcss searchreplace autolink autosave save directionality code,visualblocks visualchars fullscreen image link media codesample,table charmap pagebreak nonbreaking insertdatetime advlist lists,wordcount help charmap quickbars emoticons accordion",
promotion: false,
autosave_ask_before_unload: true,
autosave_interval: "30s",
autosave_prefix: "tinymce-autosave-{path}{query}-{id}-",
autosave_restore_when_empty: true,
autosave_retention: "30m",
image_caption: true,
image_advtab: true,
image_class_list: [{"title":"None","value":""},{"title":"Drop shadow","value":"shadow"}]
}
If I copy and paste this structure from the console and place it as the argument to the call to tinymce.init then the call works works perfectly as expected but when I replace the argument with the config variable then the function does not work.
I have tried to_json, html_safe and raw methods in the helper
You definitely need to use to_json here. data-tinymce is a string, it does not get converted to json when you read it from dataset. You have to JSON.parse it:
<%
config = {
event_root: nil,
selector: ".tinymce",
menubar: "file edit view insert format tools table help",
toolbar: ["undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist","link image | accordion accordionremove | table media | lineheight outdent indent| forecolor backcolor removeformat charmap emoticons code fullscreen preview save print | pagebreak codesample | ltr rtl"],
toolbar_mode: "sliding",
contextmenu: "link image table",
quickbars_selection_toolbar: "bold italic | quicklink h2 h3 blockquote quickimage quicktable",
plugins: "preview importcss searchreplace autolink autosave save directionality code,visualblocks visualchars fullscreen image link media codesample,table charmap pagebreak nonbreaking insertdatetime advlist lists,wordcount help charmap quickbars emoticons accordion",
promotion: false,
autosave_ask_before_unload: true,
autosave_interval: "30s",
autosave_prefix: "tinymce-autosave-{path}{query}-{id}-",
autosave_restore_when_empty: true,
autosave_retention: "30m",
image_caption: true,
image_advtab: true,
image_class_list: [{"title":"None","value":""},{"title":"Drop shadow","value":"shadow"}]
}
%>
<a class="add_fields" data-tinymce="<%= config.to_json %>" href="#">Add Section</a>
<script charset="utf-8">
var config = JSON.parse(document.querySelector(".add_fields").dataset.tinymce)
console.log(config)
</script>