Suit up! Simple and easy WYSIWYG
The article is divided into three parts:
- Introduction
- How to make the simplest editor yourself , and there will be no theory, only practice. I warn you, for many this part will seem simple and obvious, since the text is oriented, you can say, to yourself in the past (no, I do not travel in time :));
- Work description of a very lightweight editor “Suit Up” (original code size: 5.97KB (1.87KB gzipped), minimized: 3.35KB (1.37KB gzipped) at the time of writing this article, not counting the sprite and styles).
Introduction
Not so long ago, or, more precisely, about two years ago, in the circle of developers with whom I had the honor of communicating (almost all are beginners), everyone who received the task to deliver WYSIWYG was assigned a monstrous TinyMCE. For some reason, this editor was considered a standard by many web developers, although few people needed the large number of functions that were offered to programmers. Here you and this and that. Probably, in this way, the newbies tried to say to the client “look, we have written a word to your site”.
')
Once (I do not remember under what conditions), I wanted or needed to figure out how browser “rich editors” work. To my surprise, there was no limit when I, without having any deep knowledge of web development, made two buttons: Bold and Italic, which turned out to be a very simple task. I wanted to know more about what to do next. So I got acquainted with the series of articles “WYSIWYG HTML editor in the browser” (click on the first article, I advise you to read it). But the information at that time seemed to me somewhat complicated. Therefore, I decided to use a spear method, advancing on a rake already trampled by someone, to write my simple editor.
I made it as a jQuery plugin, and I think you shouldn’t answer why. It turned out to somehow make it work in different browsers. Then I got the idea to write an article on Habr, after some improvements. Time passed, I put off finishing, put off ... Two years, hell, for two whole years. But I will try to fix it.
Simplest editor
In order to enable the user to change the contents of the block (in this case, the usual diva), simply give him (the block) the contenteditable attribute:
<div contenteditable></div> The editor is ready!
Just kidding :)
In order to make some changes to the text (for example, to set the font color), there is a
document.execCommand method that applies to the current selection or position of the caret. The method takes three arguments:- The name of the command (for example, italic).
- Whether to show the standard dialog to get the value (correct if the definition is incorrect). As a rule, no one uses it, so the value will always be false.
- Command value
Add a Bold button to the page that makes the text bold:
<button class="bold"></button> We write the simplest click handler:
$( '.bold' ).on( 'click', function() { document.execCommand( 'bold', null, null ); }); Is done. Select the text in the diva, presses the button: op, text is bold. Press again: hob, the text has become the same.
Add two more buttons
<button class="italic">italic</button> <button class="red">Red</button> The first will make the text oblique (italic, like bold does not require meaning, as it is in Africa italic), the second - to change the text color to red.
$( '.italic' ).on( 'click', function() { document.execCommand( 'italic', false, null ); }); $( '.red' ).on( 'click', function() { document.execCommand( 'forecolor', false, 'red' ); }); The
forecolor command, obviously, cannot do without a value, otherwise the browser will not understand exactly which color should be given to the text.Result: jsfiddle.net/6BkPu
That's it, now it's small:
1. Take
.innerHTML diva and do anything with it: send to server, insert into textarea , etc.2. By analogy, add more commands that you can look at this link .
3. Add icons and play with fonts.
To highlight a button (to check the current value of commands), use the
document.queryCommandValue and document.queryCommandState methods. I will not describe their behavior, since it depends on the browser. Only the browser manufacturer decides whether to throw an exception or not, only the browser manufacturer decides what to return, so I suggest that, if you wish, find out what's what. We'll have to, basically, to understand at random.Not to be unfounded, I will give an example.
document.queryCommandValue( 'formatblock' ) in FF and Chrome returns the following values: h1, h2, p ..., although the values in document.execCommand( 'formatblock', ... ) were framed in triangular brackets:, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - ):
$( '.suitup-textarea' ).suitUp( 'forecolor' );2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }:
$( '.suitup-textarea' ).suitUp( 'forecolor' );, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }, ( helloWorld), .
:
suitUp ( commands), null. (
forecolor#red ) :. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( )., , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/falseChrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - ):
$( '.suitup-textarea' ).suitUp( 'forecolor' );2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }:
$( '.suitup-textarea' ).suitUp( 'forecolor' );, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }, ( helloWorld), .
:
suitUp ( commands), null. (
forecolor#red ) :. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( )., , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/falseChrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - ):
$( '.suitup-textarea' ).suitUp( 'forecolor' );2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }:
$( '.suitup-textarea' ).suitUp( 'forecolor' );, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }, ( helloWorld), .
:
suitUp ( commands), null. (
forecolor#red ) :. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( )., , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/falseChrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - ):
$( '.suitup-textarea' ).suitUp( 'forecolor' );2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }:
$( '.suitup-textarea' ).suitUp( 'forecolor' );, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }, ( helloWorld), .
:
suitUp ( commands), null. (
forecolor#red ) :. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( )., , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/falseChrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ). : " ", . IE... ?..queryCommandValue( 'formatblock' )" 1", " 2", "", . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :$( '.my-textarea' ).suitUp();
:$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - )
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :$.suitUp.custom = {};
, .$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. (forecolor#red) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) );, ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ). : " ", . IE... ?..queryCommandValue( 'formatblock' )" 1", " 2", "", . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :$( '.my-textarea' ).suitUp();
:$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - )
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :$.suitUp.custom = {};
, .$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. (forecolor#red) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) );, ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ). : " ", . IE... ?..queryCommandValue( 'formatblock' )" 1", " 2", "", . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :$( '.my-textarea' ).suitUp();
:$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - )
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :$.suitUp.custom = {};
, .$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. (forecolor#red) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) );, ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ). : " ", . IE... ?..queryCommandValue( 'formatblock' )" 1", " 2", "", . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :$( '.my-textarea' ).suitUp();
:$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - )
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :$.suitUp.custom = {};
, .$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. (forecolor#red) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) );, ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ). : " ", . IE... ?..queryCommandValue( 'formatblock' )" 1", " 2", "", . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :$( '.my-textarea' ).suitUp();
:$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - )
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :$.suitUp.custom = {};
, .$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. (forecolor#red) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) );, ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ). : " ", . IE... ?..queryCommandValue( 'formatblock' )" 1", " 2", "", . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :$( '.my-textarea' ).suitUp();
:$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - )
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :$.suitUp.custom = {};
, .$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. (forecolor#red) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) );, ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ). : " ", . IE... ?..queryCommandValue( 'formatblock' )" 1", " 2", "", . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :$( '.my-textarea' ).suitUp();
:$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - )
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :$.suitUp.custom = {};
, .$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. (forecolor#red) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) );, ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ). : " ", . IE... ?..queryCommandValue( 'formatblock' )" 1", " 2", "", . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :$( '.my-textarea' ).suitUp();
:$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - )
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :$.suitUp.custom = {};
, .$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. (forecolor#red) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) );, ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - ):
$( '.suitup-textarea' ).suitUp( 'forecolor' );2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }:
$( '.suitup-textarea' ).suitUp( 'forecolor' );, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }, ( helloWorld), .
:
suitUp ( commands), null. (
forecolor#red ) :. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( )., , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/falseChrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - ):
$( '.suitup-textarea' ).suitUp( 'forecolor' );2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }:
$( '.suitup-textarea' ).suitUp( 'forecolor' );, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }, ( helloWorld), .
:
suitUp ( commands), null. (
forecolor#red ) :. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( )., , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/falseChrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
. , , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
., , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }$.extend( jQuery.suitUp.commands, { forecolor: 'red' })$.suitUp.commands.forecolor = 'red' // ( , commands - ):
$( '.suitup-textarea' ).suitUp( 'forecolor' );2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }:
$( '.suitup-textarea' ).suitUp( 'forecolor' );, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }, ( helloWorld), .
:
suitUp ( commands), null. (
forecolor#red ) :. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( )., , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/falseChrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.
, , IE, execCommand( 'formatblock' ... ) . : " ", . IE... ?.. queryCommandValue( 'formatblock' ) " 1", " 2", "" , . , , , , . , IE10. , , IE10! , , .
SuitUp
, , , , , ---, . , .
:)
, :
$( '.my-textarea' ).suitUp();
:
$( '.my-textarea' ).suitUp( 'italic', 'bold', '|', 'formatblock#<h1>' );
$( '.my-textarea' ).suitUp([ 'italic', 'bold', '|', 'formatblock#<h1>' ]);
«|» , . , , , , — . _#, . — , , , . , , , null. .
( )
jQuery.suitUp.commands, - ( ), , , 'forecolor', :
1. , : forecolor red:
$.suitUp.commands = { forecolor: 'red' }
$.extend( jQuery.suitUp.commands, { forecolor: 'red' })
$.suitUp.commands.forecolor = 'red' // ( , commands - )
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
2. ()
$.suitUp.commands.forecolor = { 'Make Red': 'red', 'Make Green': 'green' }
select, , .
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
3. , , . , , . propmt:
jQuery.suitUp.commands.forecolor = function( callback ) { var color = prompt( ' ', '' ); // callback( color ); // }
:
$( '.suitup-textarea' ).suitUp( 'forecolor' );
, — , , . , suitUp :
$( 'textarea' ).suitUp( 'italic', 'bold', '|', 'link', 'formatblock#<h1>' );
. . , :
1. Bold.
2. .
3. , "".
, .
$.extend( $.suitUp.commands, { bold: null, // , null fontname: { Arial: 'arial', Times: 'times', Verdana: 'verdana' }, forecolor: function( callback ){ var blackBackground = $( '<div/>' ).css({ background: 'black', position: 'absolute', top: 0, left:0, opacity: .5, width: '100%', height: '100%' }).on( 'click', function(){ popup.add( this ).remove(); }).appendTo('body'), popup = $( '<div/>' ).css({ padding: '10px 20px', width: 200, position: 'absolute', background: 'white', top: 200, left: $( window ).width()/2 - 110, zIndex: 100 }).appendTo('body'); $( '<input/>' ).appendTo( popup ); $( '<button/>' ).appendTo( popup ).text( 'Go!' ).on( 'click', function() { var val = popup.children( 'input' ).val(); blackBackground.add( popup ).remove() callback( val ); }); } });
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor' );
, , . , button. , , callback, . Callback , , forecolor .
document.execCommand( 'forecolor', false, ' ' );
! , camelCase, , . .
, . , , .
, :
$.suitUp.custom = {};
, .
$.extend( jQuery.suitUp.custom, { helloWorld: function() { return $( '<span/>', { 'class': 'suitup-control' // }).css( 'backgroundColor', 'red' ).on( 'click', function() { alert( 'Hello World!' ); }); } });
:
$( '.suitup-textarea' ).suitUp( 'bold', 'fontname', 'forecolor', 'helloWorld' );
, .
, "link", ( "createlink"), ( "unlink").
... { link: function() { return jQuery._createElement( 'a', { className: 'suitup-control', href: '#' }).attr({ 'data-command': 'createlink' // createlink }).on( 'click', function() { if( !$.suitUp.hasSelectedNodeParent( 'a' ) ) { document.execCommand( 'createlink', false, window.prompt( 'URL:', '' ) ); } else { document.execCommand( 'unlink', false, null ); } }); } }
, ( helloWorld), .
:
suitUp ( commands), null. ( forecolor#red ) :
. . , "" (, - colorpicker).
suitUp.
.
suitUp :
$.suitUp.controls = [ 'bold', 'italic' ]; $( '.suitup-textarea' ).suitUp(); // , $( '.suitup-textarea' ).suitUp( 'bold', 'italic' );
controls , . . , :
$.suitUp.controls.push( 'forecolor' ); $( '.suitup-textarea' ).suitUp();
:
$( '.suitup-textarea' ).suitUp( $.suitUp.controls.concat([ 'forecolor' ]) ); , ( ).
, , , $.suitUp . , . , , .
$.suitUp.getSelection
. .
$.suitUp.restoreSelection
. , getSelection.
var sel = $.suitUp.getSelection(); // -, $( '.suitup-editor' ).focus(); // jQuery.suitUp.restoreSelection( sel ); //
$.suitUp.getSelectedNode
( )
$.suitUp.hasSelectedNodeParent
, "link". , , .
jQuery.suitUp.hasSelectedNodeParent( 'a' ); // true/false
Chrome, Firefox, IE10 (+IE7 Mode)
, : github.com/finom/Suitup
extended-commands.suitup.jquery.js . 50 , .
, .
.
UPD
, , . , , .
1. . , bold Chrome b, IE strong.
2. ( ).
3. , . , .
— . , , , . , , . — .
.Source: https://habr.com/ru/post/161715/
All Articles