Quicktag insert multiple lines

Question

Quicktag insert multiple lines

JasonDavis

2012年9月15日 18:38

I use the Editor Quicktag Buttons to store special things like this example below is used to store the DIV's to make Columns on my theme.

I need help, I want to modify the snippet below so that it will insert the HTML onto multiple lines, so instead of adding

div class="one-half first"1st/divn/div class="one-half"2nd/divn\div class="clear-line"/div

To the textarea as one Line, I would like to insert it as 3 lines like this...

div class="one-half first"1st/div
div class="one-half"2nd/div
div class="clear-line"/div

Here is the code I use to add this button...

QTags.addButton( 'columns', 'Columns', 'div class="one-half first"1st/divn/div class="one-half"2nd/divn\div class="clear-line"/div', '' );

Topic quicktag Wordpress

Category Web

Adam · Accepted Answer · 2012年9月15日 18:38

This is the format you need to follow,

//double quotes require escaping
var your_html = "<div class=\"one-half first\">1st</div>\n<div class=\"one-half\">2nd</div>\n<div class=\"clear-line\"></div>";

//single quotes do not require escpaing
var your_html = '<div class="one-half first">1st</div>\n<div class="one-half">2nd</div>\n<div class="clear-line"></div>';

QTags.addButton( 'my_tag', 'Multi Line', your_html, '' );

I'd just store my html in a var (eg. your_html) then pass that to your QTags.addButton

You can also do,

var more_html = [
'<div class="one-half first">1st</div>\n',
'<div class="etc">etc</div>\n',
'<div class="etc etc">etc etc</div>'
].join('');

QTags.addButton( 'my_tag_again', 'More Multi Line', more_html, '');

Even though this is related to WordPress, its not a WordPress question, technically, because the problem entirely focuses on JavaScript in which is always better served as a question over at Stack Overflow.

But since I'm at it, there's your answer.

I personally use the second syntax above which is easier to read and make sense of long strings, especially HTML.

Quicktag insert multiple lines

About