Question

I am trying to add a dropdown selection and code button to the WordPress editor in Javascript.

I found this site that has it done already I am just trying to modify the code slightly. You can see what I am talking about here, you can select a language from the dropdown and then click the code button on that site.

http://bililite.com/blog/blogfiles/customeditor.html

jQuery(function ($) {
  edButtons.forEach(function (button, index) {
    if (button.display == 'code') {

      // add language pull down menu
      edButtons[index + 1] = { // insert right after the code button
        html: function (idPrefix) {
          return '<select id="' + idPrefix + 'code_language" data-code-target="' + index + '">' + '<option></option>' + // include a blank option
          '<option>' + languages.join('</option><option>') + '</option>' + '</select>';
        }
      };
    }
  });

  var languages = ['html', 'javascript', 'lisp', 'pdf', 'php', 'vb'];
  $('body').on('change', 'select[data-code-target]', function () {
    var lang = $(this).val();
   // edButtons[$(this).data('code-target')].tagStart = lang ? '<code class="language-' + lang + '" >' : '<code>';
    edButtons[$(this).data('code-target')].tagStart = lang ? '<pre><code data-language="' + lang + '">' : '<pre><code>';
  });
});

This code currently insert code like this is no language is selected from the dropdwon…

<code></code>

And this when a Language is seleected…

<code data-language="php"></code>

All I need to do is wrap this in <pre> the above code here </pre> tags. I can easily add in the opening pre tag in the code above but I am unable to add the closing tag, I could really use some help from someone who knows Javascript better

Answer 1

You should be able to add the closing tags pretty similar to the starting tags. Try this:

edButtons[$(this).data('code-target')].tagEnd = lang ? '</pre></code>' : '</code>';