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                 bodyCls : 'undoreset undoreset mo-pr-body-content',
  31                 stylesheets : [
  32                     '../../css/undoreset.css',
  33                     '/web.MediaOutreach/Pman/PressRelease/templates/images/css/editor.css'
  34
  35
  36                 ],
  37                 toolbars : [
  38                     {
  39                         xtype : 'ToolbarStandard',
  40                         xns : Roo.form.HtmlEditor,
  41                         btns : [
  42                             {
  43                                 xtype : 'Button',
  44                                 text : "Add Table",
  45                                 cls : 'x-init-enable',
  46                                 listeners : {
  47                                     click : function (_self, e)
  48                                     {
  49
  50                                         var rr = new Roo.htmleditor.BlockTable({
  51                                             no_row : 4,
  52                                             no_col : 4
  53                                         });
  54                                         editor.editorcore.insertAtCursor(rr.toHTML());
  55
  56
  57                                     }
  58                                 },
  59                                 xns : Roo,
  60
  61                             },
  62                             {
  63                                 xtype : 'Button',
  64                                 text : "Add Image (BIG)",
  65                                 cls : 'x-init-enable',
  66                                 listeners : {
  67                                     click : function (_self, e)
  68                                     {
  69
  70                                         var rr = new Roo.htmleditor.BlockFigure({
  71                                             image_src: 'https://picsum.photos/1000/500',
  72
  73                                             align: 'left',
  74                                             caption : 'test',
  75                                             text_align: 'left',
  76
  77                                             width : '100%',
  78                                             margin: '2%',
  79                                         });
  80                                         editor.editorcore.insertAtCursor(rr.toHTML());
  81
  82
  83                                     }
  84                                 },
  85                                 xns : Roo,
  86
  87                             },
  88                             {
  89                                 xtype : 'Button',
  90                                 text : "Add Image (SMALL)",
  91                                 cls : 'x-init-enable',
  92                                 listeners : {
  93                                     click : function (_self, e)
  94                                     {
  95
  96                                         var rr = new Roo.htmleditor.BlockFigure({
  97                                             image_src: 'https://picsum.photos/400/300',
  98
  99                                             align: 'left',
 100                                             caption : 'test',
 101                                             text_align: 'left',
 102
 103                                             width : '100%',
 104                                             margin: '2%',
 105                                         });
 106                                         editor.editorcore.insertAtCursor(rr.toHTML());
 107
 108
 109                                     }
 110                                 },
 111                                 xns : Roo,
 112
 113                             },
 114                             {
 115                                 xtype : 'Button',
 116                                 text : "Add Youtube",
 117                                 cls : 'x-init-enable',
 118                                 listeners : {
 119                                     click : function (_self, e)
 120                                     {
 121
 122                                         var rr = new Roo.htmleditor.BlockFigure({
 123                                             image_src: 'https://picsum.photos/500/400',
 124
 125                                             align: 'center',
 126                                             caption : 'test',
 127                                             text_align: 'left',
 128                                             video_url : 'https://www.youtube.com/embed/Gbr-UrxxeoA',
 129                                             href : 'https://youtu.be/Gbr-UrxxeoA',
 130                                             cls : 'youtube',
 131                                             width : '100%',
 132                                             margin: '2%',
 133                                         });
 134                                         editor.editorcore.insertAtCursor(rr.toHTML());
 135
 136
 137                                     }
 138                                 },
 139                                 xns : Roo,
 140
 141                             }
 142
 143                         ]
 144                     },
 145                       {
 146                         xtype : 'ToolbarContext',
 147                         xns : Roo.form.HtmlEditor,
 148                         styles : {
 149                             '*' : [ 'headline' ] ,
 150                             'TD' : [ 'underline', 'double-underline' ]
 151                         }
 152                     }
 153
 154
 155                 ],
 156                 id:'bio',
 157                 name : 'bio',
 158                 fieldLabel:'Biography',
 159                 width:1100,
 160                 height:600,
 161                 resizable: 's' /// where the handles should got..
 162
 163             },
 164             {
 165                 xtype : 'Button',
 166                 xns: Roo.form,
 167                 text: 'Save'
 168             },
 169             {
 170                 xtype : 'Button',
 171                 xns: Roo.form,
 172                 text: 'Cancel'
 173             }
 174
 175         ]
 176
 177     });
 178
 179     mform.render('form-ct5');
 180     editor = mform.findField('bio');
 181 });