1. #1
    Sencha User
    Join Date
    Apr 2007
    Location
    Yaroslavl, Russia
    Posts
    185
    Vote Rating
    0
    xor is on a distinguished road

      0  

    Default Ext.ux.TinyMCE - TinyMCE form field (v0.8.2)

    Ext.ux.TinyMCE - TinyMCE form field (v0.8.2)


    Ext.ux.TinyMCE 0.8.6

    ExtJS form field containing TinyMCE v3.

    Download
    * Download from component's page.
    * Release notes.

    You can support the project by donating at component's page.

    Features
    * Use getValue() and setValue() to set HTML content.
    * Resizes editor to the field size.
    * Opens TinyMCE popups as Ext windows.
    * Supports several instances of TinyMCE editor.
    * Each instance could be configured individually.
    * Overflow of TinyMCE toolbar gets hidden, so control can fit any size.

    Requires
    * Modern browser
    * ExtJS 3.4
    * TinyMCE 3.4.4

    Usage example (part of form config):
    Code:
    ...
    items: [
    {
    	xtype: "tinymce",
    	tinymceSettings: {
    		theme : "advanced",
    		plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
    		theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|",
    		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
    		theme_advanced_toolbar_location : "top",
    		theme_advanced_toolbar_align : "left",
    		theme_advanced_statusbar_location : "bottom",
    		theme_advanced_resizing : false,
    		extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
    		template_external_list_url : "example_template_list.js"
    	}
    }
    ]
    ...
    Last edited by xor; 18 Aug 2011 at 12:14 AM. Reason: Updated to v0.8.6
    Andrew Mayorov (blog)
    BYTE-force
    We can provide paid remote consultancy on ExtJS or our components.

  2. #2
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    Nice one...

    seems like all the editors require iframes to work nicely... hmmm...

  3. #3
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Without live demo is difficult test the results or view the posibilities or your extension.

    Thanks,

  4. #4
    Sencha User
    Join Date
    Apr 2007
    Location
    Yaroslavl, Russia
    Posts
    185
    Vote Rating
    0
    xor is on a distinguished road

      0  

    Default


    galdaka, I understand that demo and screenshots are necessary. Just didn't have time for that yet.
    Andrew Mayorov (blog)
    BYTE-force
    We can provide paid remote consultancy on ExtJS or our components.

  5. #5
    Ext User DigitalSkyline's Avatar
    Join Date
    Apr 2007
    Location
    Rochester, MI
    Posts
    461
    Vote Rating
    1
    DigitalSkyline is on a distinguished road

      0  

    Default


    daeisi- that's is because they are all using iframe w/designMode

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Posts
    13
    Vote Rating
    0
    jenner is on a distinguished road

      0  

    Default


    Quote Originally Posted by xor View Post
    galdaka, I understand that demo and screenshots are necessary. Just didn't have time for that yet.
    xor, could you perhaps create a simple example and put it in a zip? I just can't get your code to work with latest extjs and tinyMCE 3.0

    thanks in advance,
    jenner

  7. #7
    Sencha User
    Join Date
    Apr 2007
    Location
    Yaroslavl, Russia
    Posts
    185
    Vote Rating
    0
    xor is on a distinguished road

      0  

    Default


    Hi!

    I've added links to demo and sources. Please try.

    BTW, I found that if we create control at document ready event, then page doesn't work at all. It's possible that TinyMCE's script loading mechanism doesn't work well at this page state.
    Andrew Mayorov (blog)
    BYTE-force
    We can provide paid remote consultancy on ExtJS or our components.

  8. #8
    Sencha User
    Join Date
    Jan 2008
    Posts
    13
    Vote Rating
    0
    jenner is on a distinguished road

      0  

    Default


    Quote Originally Posted by xor View Post
    Hi!

    I've added links to demo and sources. Please try.

    BTW, I found that if we create control at document ready event, then page doesn't work at all. It's possible that TinyMCE's script loading mechanism doesn't work well at this page state.
    Thanks a lot!
    To be honest, I've already figured it out by myself, took me quite a while though
    Btw, if I try to instantiate a "standalone" TinyMCE field using applyTo (so it's bound to an existing textarea) then it doesn't work, the workaround is to replace afterRender with onRender and change all occurrences of this.getEl().child( "textarea" ).id; with this.getEl().id;.

    Thanks for your work,
    jenner

  9. #9
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,669
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    just checked out the online demo.

    the "choose color" button does not work in ff with me. bug?


    rest looks nice this far, tobiu

  10. #10
    Sencha User
    Join Date
    Jan 2008
    Posts
    13
    Vote Rating
    0
    jenner is on a distinguished road

      0  

    Default buttons hack

    buttons hack


    here's a weird hack that replaces original tinMCE buttons with Ext.Button objects, it's really dirty since the buttons are added after the Window has been rendered (not to mention the use of eval) but it works... replace original open method with this:

    Code:
                open : function( s, p ) {
                    
                    s = s || {};
                    p = p || {};
                    
                    s.width = parseInt(s.width || 320);
                    s.height = parseInt(s.height || 240) + (tinymce.isIE ? 8 : 0);
                    s.min_width = parseInt(s.min_width || 150);
                    s.min_height = parseInt(s.min_height || 100);
                    s.max_width = parseInt(s.max_width || 2000);
                    s.max_height = parseInt(s.max_height || 2000);
                    s.movable = s.resizable = true;
                    p.mce_width = s.width;
                    p.mce_height = s.height;
                    p.mce_inline = true;
    
                    this.features = s;
                    this.params = p;
                    
                    // predefine window and panel ids so we can reference the components later
                    var winId = Ext.id();
                    var panelId = Ext.id();
                    
                    var panel = new Ext.ux.ManagedIframePanel({
                    	id: panelId,
    			defaultSrc: s.url || s.file
                    });
    
    				
    		// look out for buttons
                    panel.on("documentloaded", function(pnl) {
                    	var doc = pnl.getDocument();
                    	var btns = new Array();
                    	['insert', 'cancel'].each(function(btnId) {
    	                	var btn = Ext.get(doc.getElementById(btnId));
    	                	if (btn) {
    	                		var _handler = Ext.emptyFn;
                                            // copy the onclick=".." string and create a function,
    	                		if (btn.dom.getAttribute("onclick")) {
    	                			_handler = function(){
    	                				eval("Ext.getCmp('"+panelId+"').getFrameWindow()." + btn.dom.getAttribute("onclick"));
    	                			};
    	                		}
    	                		btns.push(new Ext.Button({
    	                			text: btn.dom.value,
    	                			handler: _handler
    	                		}));
    	                		btn.remove();
    	                	}
                    	});
                    	if (btns.length > 0) {
                    		var parentWin = Ext.getCmp(winId);
                                    // copied from Ext.Panel#onRender()
                    		parentWin.buttons = btns;
                                    var tb = parentWin.footer.createChild({cls:'x-panel-btns-ct', cn: {
                                           cls:"x-panel-btns x-panel-btns-"+parentWin.buttonAlign,
                                           html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
                                    }}, null, true);
                                     var tr = tb.getElementsByTagName('tr')[0];
                                     for(var i = 0, len = parentWin.buttons.length; i < len; i++) { 
                                         var b = parentWin.buttons[i];
                                         var td = document.createElement('td');
                                         td.className = 'x-panel-btn-td';
                                         b.render(tr.appendChild(td));
                                      }                		
                    	}
                    }.createDelegate(panel));
                    
                    var win = new Ext.Window(
                    {
                        id: winId,
                        title: s.name,
                        width: s.width,
                        height: s.height,
                        minWidth: s.min_width,
                        minHeight: s.min_height,
                        resizable: true,
                        maximizable: s.maximizable == true,
                        minimizable: s.minimizable == true,
                        modal: true,
                        layout: "fit",
                        items: [panel],
                        buttons: []
                    });
                    
                    p.mce_window_id = win.getId();
                    
                    win.show( null,
                        function() {
                            if( s.left && s.top ) 
                                win.setPagePosition( s.left, s.top );
                            var pos = win.getPosition();
                            s.left = pos[0];
                            s.top = pos[1];
                            this.onOpen.dispatch( this, s, p );
                        },
                        this
                    );
                    
                    return win;
                },
    cheers,
    jenner

Thread Participants: 128

  1. galdaka (1 Post)
  2. Dumbledore (26 Posts)
  3. mystix (1 Post)
  4. dawesi (1 Post)
  5. albeva (7 Posts)
  6. ludoo (1 Post)
  7. bloudon (2 Posts)
  8. MarkB (4 Posts)
  9. Cipher (2 Posts)
  10. Hani (3 Posts)
  11. Pagebaker (2 Posts)
  12. DigitalSkyline (1 Post)
  13. thesilentman (5 Posts)
  14. marcing (1 Post)
  15. mschering (5 Posts)
  16. Konstantin (1 Post)
  17. temporary (1 Post)
  18. tobiu (1 Post)
  19. billeatman (1 Post)
  20. kmiyashiro (2 Posts)
  21. cmendez21 (4 Posts)
  22. 6epcepk (2 Posts)
  23. ZooKeeper (6 Posts)
  24. Yossi (5 Posts)
  25. JNason (4 Posts)
  26. ko0kiE (1 Post)
  27. Fredric Berling (2 Posts)
  28. Dongluan (2 Posts)
  29. w011117 (4 Posts)
  30. cnelissen (5 Posts)
  31. cmarin (2 Posts)
  32. lvanderree (21 Posts)
  33. kavih7 (4 Posts)
  34. hjf1223 (1 Post)
  35. AVerta (2 Posts)
  36. MuratCorlu (1 Post)
  37. vironitronox (1 Post)
  38. saJoshua (1 Post)
  39. Kannabismus (1 Post)
  40. supawat (1 Post)
  41. nikatwork (3 Posts)
  42. scipio (1 Post)
  43. neenhouse (2 Posts)
  44. tfrugia (2 Posts)
  45. asugama (2 Posts)
  46. liuliming (1 Post)
  47. marco76 (1 Post)
  48. yaroslav (1 Post)
  49. dverkade (1 Post)
  50. scottco (1 Post)
  51. broutard (1 Post)
  52. cybertaz (2 Posts)
  53. jwendt@iscinternational.com (1 Post)
  54. kai5263499 (1 Post)
  55. sirioz10 (6 Posts)
  56. jenner (5 Posts)
  57. EMP (1 Post)
  58. joao_candido (2 Posts)
  59. uros (1 Post)
  60. craigharmonic (3 Posts)
  61. serff (1 Post)
  62. vishee (4 Posts)
  63. walldorff (3 Posts)
  64. blow (1 Post)
  65. genius3k (1 Post)
  66. ehask71 (2 Posts)
  67. pauleee (1 Post)
  68. illuminum (1 Post)
  69. basti (1 Post)
  70. Qtx (1 Post)
  71. Cravi (1 Post)
  72. uwolfer (5 Posts)
  73. sseema (1 Post)
  74. alex-t.de (1 Post)
  75. Denny Crane (2 Posts)
  76. lucasmarin (1 Post)
  77. dayext (1 Post)
  78. adamadax (2 Posts)
  79. ben_dog (2 Posts)
  80. paulyb263 (1 Post)
  81. iLoLo21 (2 Posts)
  82. queej (5 Posts)
  83. arnab_ghosh (2 Posts)
  84. vanadium (1 Post)
  85. emmadi (5 Posts)
  86. pablitobs (4 Posts)
  87. mstroeve (2 Posts)
  88. mschwartz (5 Posts)
  89. armagedon (1 Post)
  90. Stju (3 Posts)
  91. elderotaku (1 Post)
  92. ahwin (6 Posts)
  93. lakilevi (2 Posts)
  94. zeos (1 Post)
  95. sergiu079 (1 Post)
  96. Toon (2 Posts)
  97. Jangla (4 Posts)
  98. mjh (3 Posts)
  99. treadmill (3 Posts)
  100. joejernst (2 Posts)
  101. alumb (1 Post)
  102. Aniruddha (1 Post)
  103. hansl1963 (5 Posts)
  104. andynuss (9 Posts)
  105. davidbuzatto (3 Posts)
  106. slsmithtx (2 Posts)
  107. asagala (11 Posts)
  108. juste_millieu (1 Post)
  109. skunk (2 Posts)
  110. mrjoltcola (1 Post)
  111. damo (2 Posts)
  112. ivanatora (3 Posts)
  113. JeanNiBee (2 Posts)
  114. lj2008 (1 Post)
  115. countdown (1 Post)
  116. cstansbury (2 Posts)
  117. Boxcopter (1 Post)
  118. mjbohn (3 Posts)
  119. ajlaluan (1 Post)
  120. Tpona (1 Post)
  121. omerfarooq123 (2 Posts)
  122. sraghavachari (1 Post)
  123. jorgelive (1 Post)
  124. wboard (2 Posts)
  125. wpoosanguansit (1 Post)
  126. DaviPresentia (1 Post)
  127. aa0 (1 Post)
  128. odaihatim (1 Post)
Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi