ドロップダウン選択とコードボタンをJavascriptのWordpressエディターに追加しようとしています。
私はすでにそれを行っているこのサイトを見つけました。私はコードを少し変更しようとしています。ここで私が話していることを確認できます。ドロップダウンから言語を選択して、そのサイトのコードボタンをクリックできます。
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>';
});
});
このコードは現在、このようなコードを挿入しています。dropdwonから言語が選択されていません...
<code></code>
そして、これは言語が選択されたとき...
<code data-language="php"></code>
私がする必要があるのは、これを<pre> the above code here </pre>
タグでラップすることだけです。上記のコードで開始preタグを簡単に追加できますが、終了タグを追加できません。Javascriptをよく知っている人の助けを借りることができます。