0

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?

  • 1
    Yes 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 ? – Taggart Jensen Mar 11 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 Morrise Mar 12 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 Morrise Mar 25 at 16:44
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.