0

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

1 Answer 1

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>';
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.