I use the D8 Conditional Fields module to make a CKEditor field (author bio) invisible until there is something in another field (author). When I type something in the author field, the author bio field becomes visible, but it doesn't include a CKEditor toolbar. It appears that CKEditor initialization is not done on fields that aren't initially visible. Any way to overcome this?
3
-
1Yes but it the answer will require 1) removing the Conditional filed rule 2) adding a custom module that will attach custom js to your form the js will just hide the field on page load and then check the value of author field. thoughts ?– taggartJCommented Mar 11, 2019 at 23:59
-
Thanks, @TaggartJensen. I was (still am) hoping someone will say, "Oh yeah, there's this setting in CKE to tell it to initialize non-visible fields." Failing that, I may try what you suggest, but I'll try the js injector to add js to the page without a custom module.– Marshall MorriseCommented Mar 12, 2019 at 4:43
-
As an updated, I took @Taggart Jensen'suggestion and used a bit of injected Javascript to show/hide the author bio field. I'll add an answer with the code, in case it's helpful to someone.– Marshall MorriseCommented Mar 25, 2019 at 16:44
Add a comment
|
1 Answer
Not finding a built-in way to avoid the problem of missing CKEditor toolbars on conditionally displayed fields, instead of using the Conditional Fields module, I use the Asset Injector module's JS Injector to inject this JavaScript into the node add/edit page (note that the authors field is an entity reference):
var el = document.getElementById("edit-field-authors-0-target-id");
if (el) {
showHideBio();
el.addEventListener("change", showHideBio);
}
function showHideBio()
{
var el = document.getElementById("edit-field-bio-wrapper");
if (this.value) {
el.style.display = "block";
}
else {
el.style.display = "none";
}
}
Seems to work just fine, but open to suggestions for improvement. Thanks to @Taggart Jensen for the idea.