git.roojs.org Git - roojs1/blob - examples/form/htmledit.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 var mform;
  13 var editor;
  14 Roo.onReady(function(){
  15
  16     Roo.QuickTips.init();
  17
  18
  19     /*
  20      * ================  Form 2  =======================
  21      */
  22     mform = new Roo.form.Form({
  23         labelAlign: 'top',
  24         items : [
  25             {
  26                 xtype : 'HtmlEditor',
  27                 xns: Roo.form,
  28                 white : [ 'iframe' ],
  29                 autoClean : true,
  30                 stylesheets : [
  31                     '../../css/undoreset.css',
  32                     '/web.MediaOutreach/Pman/PressRelease/templates/images/css/editor.css'
  33                 ],
  34                 toolbars : [
  35                     {
  36                         xtype : 'ToolbarStandard',
  37                         xns : Roo.form.HtmlEditor,
  38                         btns : [
  39                             {
  40                                 xtype : 'Button',
  41                                 text : "Add Table",
  42                                 cls : 'x-init-enable',
  43                                 listeners : {
  44                                     click : function (_self, e)
  45                                     {
  46
  47                                         var rr = new Roo.htmleditor.BlockTable({
  48                                             no_row : 4,
  49                                             no_col : 4
  50                                         });
  51                                         editor.editorcore.insertAtCursor(rr.toHTML());
  52
  53
  54                                     }
  55                                 },
  56                                 xns : Roo,
  57
  58                             },
  59                             {
  60                                 xtype : 'Button',
  61                                 text : "Add Image (BIG)",
  62                                 cls : 'x-init-enable',
  63                                 listeners : {
  64                                     click : function (_self, e)
  65                                     {
  66
  67                                         var rr = new Roo.htmleditor.BlockFigure({
  68                                             image_src: 'https://picsum.photos/1000/500',
  69
  70                                             align: 'left',
  71                                             caption : 'test',
  72                                             text_align: 'left',
  73
  74                                             width : '100%',
  75                                             margin: '2%',
  76                                         });
  77                                         editor.editorcore.insertAtCursor(rr.toHTML());
  78
  79
  80                                     }
  81                                 },
  82                                 xns : Roo,
  83
  84                             },
  85                             {
  86                                 xtype : 'Button',
  87                                 text : "Add Image (SMALL)",
  88                                 cls : 'x-init-enable',
  89                                 listeners : {
  90                                     click : function (_self, e)
  91                                     {
  92
  93                                         var rr = new Roo.htmleditor.BlockFigure({
  94                                             image_src: 'https://picsum.photos/400/300',
  95
  96                                             align: 'left',
  97                                             caption : 'test',
  98                                             text_align: 'left',
  99
 100                                             width : '100%',
 101                                             margin: '2%',
 102                                         });
 103                                         editor.editorcore.insertAtCursor(rr.toHTML());
 104
 105
 106                                     }
 107                                 },
 108                                 xns : Roo,
 109
 110                             }
 111
 112                         ]
 113                     },
 114                       {
 115                         xtype : 'ToolbarContext',
 116                         xns : Roo.form.HtmlEditor,
 117                         styles : {
 118                             '*' : [ 'headline' ] ,
 119                             'TD' : [ 'underline', 'double-underline' ]
 120                         }
 121                     }
 122
 123
 124                 ],
 125                 id:'bio',
 126                 name : 'bio',
 127                 fieldLabel:'Biography',
 128                 width:1000,
 129                 height:600,
 130                 resizable: 's' /// where the handles should got..
 131
 132             },
 133             {
 134                 xtype : 'Button',
 135                 xns: Roo.form,
 136                 text: 'Save'
 137             },
 138             {
 139                 xtype : 'Button',
 140                 xns: Roo.form,
 141                 text: 'Cancel'
 142             }
 143
 144         ]
 145
 146     });
 147
 148     mform.render('form-ct5');
 149     editor = mform.findField('bio');
 150 });