लेख को तीन भागों में बांटा गया है:

प्रविष्टि
खुद को सबसे सरल संपादक कैसे बनाएं , और कोई सिद्धांत नहीं होगा, बस अभ्यास करें। मैं आपको चेतावनी देता हूं, क्योंकि यह बहुत ही सरल और स्पष्ट प्रतीत होगा, क्योंकि पाठ उन्मुख है, आप खुद से, अतीत में (नहीं, मैं समय में यात्रा नहीं करता हूं :) कह सकता हूं;)
बहुत हल्के संपादक "सूट अप" (मूल कोड: 5.97KB (1.87KB gzipped) के काम का विवरण , न्यूनतम: 3.35KB (1.37KB gzipped) लेखन के समय, स्प्राइट और शैलियों की गिनती नहीं)।

प्रविष्टि

बहुत समय पहले नहीं, या बल्कि, दो साल पहले, डेवलपर्स के घेरे में, जिनके साथ मुझे संवाद करने का सम्मान मिला (लगभग सभी नवागंतुक हैं), हर किसी को जो WYSIWYG स्थापित करने का काम सौंपा गया था, एक राक्षस के आकार के TinyMCE पर रखा गया था। किसी कारण से, इस संपादक को कई वेब डेवलपर्स के मानक के रूप में माना जाता था, हालांकि कुछ लोगों को बड़ी संख्या में फ़ंक्शन की आवश्यकता थी जो प्रोग्रामर को पेश किए गए थे। यहां आपके पास यह है और वह है। संभवतः, इस तरह से, नवागंतुकों ने क्लाइंट को यह बताने की कोशिश की "हम आपकी वेबसाइट में वर्ड को धो चुके हैं।"

एक बार (मुझे किन शर्तों के तहत याद नहीं है), मुझे यह पता लगाने की जरूरत थी कि ब्राउज़र के प्रकाशक कैसे काम करते हैं। मेरे आश्चर्य का कोई ठिकाना नहीं रहा जब मैंने खुद, वेब विकास में कोई गहरा ज्ञान नहीं था, दो बटन बनाए: बोल्ड और इटैलिक, जो एक बहुत ही सरल कार्य था। मैं इसके बारे में और जानना चाहता था कि आगे क्या करना है। इसलिए मैं "ब्राउज़र में WYSIWYG HTML संपादक" लेखों की श्रृंखला से परिचित हुआ (पहला लेख यहाँ है, मैं आपको इसे पढ़ने की सलाह देता हूं)। लेकिन उस समय की जानकारी मुझे थोड़ी जटिल लगी। इसलिए, मैंने अपना सरल संपादक लिखने के लिए, किसी व्यक्ति द्वारा पहले से रौंदे गए रेक पर कदम रखते हुए निर्णय लिया।

मैंने इसे एक jQuery प्लगइन के रूप में बनाया है, और मुझे लगता है कि आपको "क्यों" का जवाब नहीं देना चाहिए। यह किसी भी तरह से अलग-अलग ब्राउज़रों में काम करने के लिए निकला। तब मुझे कुछ सुधारों के बाद, हैबर पर एक लेख लिखने का विचार आया। समय बीतता गया, मैंने फिनिशिंग लगाई, लगाई ... दो साल, नरक, पूरे दो साल। लेकिन मैं खुद को सही करने की कोशिश करूंगा।

सबसे सरल संपादक

उपयोगकर्ता को ब्लॉक की सामग्री को बदलने में सक्षम करने के लिए (इस मामले में, एक साधारण दिवा), हम बस उसे (ब्लॉक) के लिए संतोषप्रद विशेषता निर्धारित करते हैं:

<div contenteditable></div>

संपादक तैयार है!

बस मजाक कर रहे हैं :)

पाठ पर कुछ बदलाव करने के लिए (उदाहरण के लिए, फ़ॉन्ट रंग सेट करें), वहाँ एक document.execCommand विधि है जो वर्तमान चयन या कैरेट स्थिति पर लागू होती है। विधि तीन तर्क लेती है:

कमांड का नाम (उदाहरण के लिए, इटैलिक)।
मान प्राप्त करने के लिए मानक संवाद दिखाना है (सही है तो परिभाषा गलत है)। एक नियम के रूप में, कोई भी इसका उपयोग नहीं करता है, इसलिए मूल्य हमेशा गलत होगा।
आज्ञा का मान।

पृष्ठ पर एक बोल्ड बटन जोड़ें, जिससे टेक्स्ट बोल्ड हो जाएगा:

 <button class="bold"></button>

हम सबसे सरल क्लिक हैंडलर लिखते हैं:

 $( '.bold' ).on( 'click', function() { document.execCommand( 'bold', null, null ); });

हो गया। दिवा में पाठ का चयन करें, बटन दबाएं: सेशन, पाठ बोल्ड है। फिर से क्लिक करें: होबा, पाठ समान हो गया है।

दो और बटन जोड़ें

 <button class="italic">italic</button> <button class="red">Red</button>

पहले पाठ को तिरछा बना देगा (इटैलिक, जैसे बोल्ड को मान की आवश्यकता नहीं होती है, क्योंकि यह अफ्रीका में भी इटैलिक है), दूसरा - पाठ का रंग लाल करने के लिए बदल दें।

 $( '.italic' ).on( 'click', function() { document.execCommand( 'italic', false, null ); }); $( '.red' ).on( 'click', function() { document.execCommand( 'forecolor', false, 'red' ); });

forecolor कमांड, जाहिर है, बिना मूल्य के नहीं कर सकता है, अन्यथा ब्राउज़र समझ नहीं पाएगा कि किस रंग को पाठ पर सेट किया जाना चाहिए।

परिणाम: jsfiddle.net/6BkPu

बस इतना ही, अब यह छोटे पर निर्भर है:
1. .innerHTML लें और इसके साथ कुछ भी करें: सर्वर को भेजें, .innerHTML में पेस्ट करें, आदि।
2. सादृश्य द्वारा, अधिक कमांड जोड़ें जो आप इस लिंक को देख सकते हैं।
3. आइकन जोड़ें और फोंट के साथ खेलते हैं।

बटन को उजागर करने के लिए (आदेशों के वर्तमान मूल्य की जांच करने के लिए), document.queryCommandValue और document.queryCommandState विधियों का उपयोग किया जाता है। मैं उनके व्यवहार का वर्णन नहीं करूंगा, क्योंकि यह ब्राउज़र पर निर्भर करता है। केवल ब्राउज़र निर्माता ही यह तय करता है कि अपवाद को फेंकना है या नहीं, केवल ब्राउज़र निर्माता ही यह तय करता है कि उसे क्या लौटना है, इसलिए मेरा सुझाव है कि यदि हम चाहें, तो यह पता करें कि क्या है। हमें मूल रूप से प्रहार विधि से निपटना होगा।

निराधार नहीं होने के लिए, मैं एक उदाहरण दूंगा।
FF और Chrome में document.queryCommandValue( 'formatblock' ) निम्नलिखित मान लौटाता है: h1, h2, p ..., इस तथ्य के बावजूद कि document.execCommand( 'formatblock', ... ) में मान त्रिकोणीय कोष्ठक में बनाए गए हैं:

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. , . , . — . , , , . , , . — . .
1. , , 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. , . , . — . , , , . , , . — . .
2. , , 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. , . , . — . , , , . , , . — . .
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. , . , .

— . , , , . , , . — .

.

सूट करो! सरल और आसान WYSIWYG

प्रविष्टि

सबसे सरल संपादक

More articles: