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                         ]
 116                     },
 117                       {
 118                         xtype : 'ToolbarContext',
 119                         xns : Roo.form.HtmlEditor,
 120                         styles : {
 121                             '*' : [ 'headline' ] ,
 122                             'TD' : [ 'underline', 'double-underline' ]
 123                         }
 124                     }
 125
 126
 127                 ],
 128                 id:'bio',
 129                 name : 'bio',
 130                 fieldLabel:'Biography',
 131                 width:1100,
 132                 height:600,
 133                 resizable: 's' /// where the handles should got..
 134
 135             },
 136             {
 137                 xtype : 'Button',
 138                 xns: Roo.form,
 139                 text: 'Save'
 140             },
 141             {
 142                 xtype : 'Button',
 143                 xns: Roo.form,
 144                 text: 'Cancel'
 145             }
 146
 147         ]
 148
 149     });
 150
 151     mform.render('form-ct5');
 152     editor = mform.findField('bio');
 153 });