この記事は3つのパートに分かれています。
- エントリー
- 自分で最も簡単なエディタを作成する方法 。理論はなく、実践するだけです。 この部分は多くの場合単純で明白なように見えるので、テキストは方向性があるため、過去に自分で言うことができます（いいえ、私は時間内に旅行しません:)）;
- 非常に軽量なエディター「Suit Up」の作業の説明 （元のコード：5.97KB（1.87KB gzip圧縮）、最小化：執筆時点で3.35KB（1.37KB gzip圧縮）、スプライトとスタイルは含まれません）。
エントリー
それほど前ではなく、むしろ2年前に、私がコミュニケーションをとることができた開発者の輪（ほぼ全員が新参者）で、WYSIWYGのインストールを任された全員がモンスターの形をしたTinyMCEを使いました。 何らかの理由で、このエディターは多くのWeb開発者の標準と考えられていましたが、プログラマーに提供される多数の機能を必要とする人はほとんどいませんでした。 ここにこれがあります。 おそらく、この方法で、新参者はクライアントに「見て、WordをあなたのWebサイトに流し込んだ」と伝えようとしました。
一度（どのような条件下で記憶していないか）、私はブラウザーが豊富なパブリッシャーがどのように機能するかを理解したかったのです。 私自身、Web開発の深い知識がなくても、太字と斜体の2つのボタンを作成したことに驚かされました。これは非常に簡単な作業でした。 次に何をすべきかについてもっと知りたかった。 そのため、「ブラウザーでのWYSIWYG HTMLエディター」という一連の記事に精通しました（最初の記事はこちらです。必ずお読みください）。 しかし、当時の情報は私には少し複雑に思えました。 したがって、私は入力して、誰かに既に踏みつけられた熊手を踏んで、簡単なエディターを書くことにしました。
jQueryプラグインの形式で作成しましたが、「なぜ」と答えるべきではないと思います。 どういうわけか別のブラウザで動作するようになりました。 その後、いくつかの改善を経て、Habrについての記事を書くというアイデアが浮かびました。 時間の経過、私は仕上げを延期し、延期します... 2年、地獄、2年。 しかし、私は自分自身を修正しようとします。
最もシンプルなエディター
ユーザーがブロックの内容（この場合、通常の歌姫）を変更できるようにするために、単純にcontenteditable属性をユーザー（ブロック）に設定します。
<div contenteditable></div>
エディターの準備ができました！
冗談です:)
テキストを変更する（たとえば、フォントの色を設定する）ために、現在の選択またはキャレットの位置に適用される
document.execCommand
メソッドがあります。 このメソッドは3つの引数を取ります。
- コマンドの名前（例えば、斜体）。
- 値を取得するために標準ダイアログを表示するかどうか（定義が正しくない場合は正しい）。 原則として、誰もこれを使用しないため、値は常にfalseになります。
- コマンドの値。
ページに太字ボタンを追加して、テキストを太字にします。
<button class="bold"></button>
最も単純なクリックハンドラを記述します。
$( '.bold' ).on( 'click', function() { document.execCommand( 'bold', null, null ); });
できた 歌姫のテキストを選択し、ボタンを押します：op、テキストは太字です。 もう一度クリックしてください。ホバ、テキストは同じになりました。
さらに2つのボタンを追加する
<button class="italic">italic</button> <button class="red">Red</button>
1つ目はテキストを斜めにします（アフリカではイタリック体であるため太字のように値は不要です）、2つ目はテキストの色を赤に変更します。
$( '.italic' ).on( 'click', function() { document.execCommand( 'italic', false, null ); }); $( '.red' ).on( 'click', function() { document.execCommand( 'forecolor', false, 'red' ); });
当然ながら、
forecolor
コマンドは値なしでは実行できません。そうしないと、ブラウザーはテキストにどの色を設定すべきかを理解できません。
結果： jsfiddle.net/6BkPu
それだけです、今では小さなものです：
1.
.innerHTML
歌姫を取り、それを使って何でもします：サーバーに送信する、
textarea
に貼り付けるなど。
2.同様に、 このリンクを参照できるコマンドをさらに追加します。
3.アイコンを追加して、フォントを操作します。
ボタンを強調表示する（コマンドの現在の値を確認する）には、
document.queryCommandValue
および
document.queryCommandState
メソッドが使用されます。 ブラウザに依存するため、それらの動作については説明しません。 例外をスローするかどうかを決定するのはブラウザーの製造者のみであり、何を返すかはブラウザーの製造者のみが決定するため、必要に応じて、何が何であるかを把握することをお勧めします。 基本的に、pokeメソッドを処理する必要があります。
根拠がないように、例を挙げます。
document.queryCommandValue( 'formatblock' )
document.execCommand( 'formatblock', ... )
が三角括弧で囲まれているにもかかわらず、FFおよびChromeの
document.queryCommandValue( 'formatblock' )
は次の値を返します：
h1, h2, p
...：
, , 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/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/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/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. , . , .
— . , , , . , , . — .
.