3

I am trying to wrap a block of HTML content in an tag in a Drupal 8 installation:

<a href="/link"><h2>Link 1</h2><h3>Subheader link 1</h3></a>

CKEditor changes it to:

<h2><a href="/link">Link 1</a></h2><h3><a href="/link">Subheader link 1</a></h3>

The Limit allowed HTML tags I have set are:

<div class id> <p class id> <img class id> <a href hreflang class id> <em> <strong> <cite class id> <blockquote cite cla> <code> <ul type class id> <ol start type class id> <li class id> <dl class id> <dt class id> <dd> <h2 class id> <h3 class id> <h4 class id> <h5 class id> <h6 class id> <s> <sup> <sub> <img src alt data-entity-type data-entity-uuid data-align data-caption class id> <table class id> <caption class id> <tbody class id> <thead class id> <tfoot class id> <th class id> <td class id> <tr class id> <hr class id> <p class id> <h1 class id> <pre class id><section class id><header class id> <a div> <a span>

How can I wrap content in an anchor tag with CKEditor?

  • 2
    That's a CKEditor thing (it doesn't have an HTML5 DTD, so doesn't understand that links can now wrap block level elements). See this issue for resolutions. I think you'll need CKEDITOR.dtd.a.h2 = 1; and CKEDITOR.dtd.a.h3 = 1; – Clive Dec 13 '17 at 12:22
  • @Clive but as it says in the 10th comment, there might be a way to allow it as extra allowed content. How can this be achieved in Drupal 8? – jmzea Dec 13 '17 at 12:27
  • @Clive I didn't see what you said about "CKEDITOR.dtd.a.h2", where can I include this settings in Drupal 8? – jmzea Dec 13 '17 at 12:36
3

I found a solution. As @Clive said CKEDITOR.dtd.a.h2 = 1; and CKEDITOR.dtd.a.h3 = 1; is the solution.

These need to be declared in a configuration javascript file:

function my_module_editor_js_settings_alter(array &$settings) {

  foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
    if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
        $settings['editor']['formats'][$text_format_id]['editorSettings']['customConfig'] = 
        base_path() . drupal_get_path('module', 'my_module') . '/ckeditor_config.js';
}
  }
}

And then we create a file ckeditor_config.js:

CKEDITOR.dtd['a']['h2'] = 1;
CKEDITOR.dtd['a']['h3'] = 1;

Doing this we can wrap h2 and h3 elements with an anchor tag and CKEditor is not going to modify it.

  • I have the same CKEditor-formatting-issue at the moment. Can you please tell me more accurate where to put the code mentioned above? – tinytree May 7 '18 at 17:12
  • @tinytree just create a custom module. In the custom module include the php code above, just changing where it says my_module for the name of your module. And also include a file called, ckeditor_config.js in your module folder, including the code that you can see above. – jmzea May 9 '18 at 9:44

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.