git.roojs.org Git - roojs1/blob - examples/bootstrap/Editor.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Bootstrap - Editor Example</title>
   5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6
   7     <!-- Bootstrap -->
   8     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
   9     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
  10
  11     <link href="../../../bootswatch/AdminLTE-master/css/font-awesome.css" rel="stylesheet" type="text/css" />
  12     <link rel="stylesheet" href="../../css-bootstrap/select2.css">
  13     <link rel="stylesheet" href="../../css-bootstrap/combobox.css">
  14     <link rel="stylesheet" href="../../css-bootstrap/checkbox.css">
  15
  16
  17
  18     <script type="text/javascript" src="../../roojs-core-debug.js"></script>
  19     <script type="text/javascript" src="../../roojs-bootstrap.js"></script>
  20
  21     <!-- bootstrap js.. needs to compile it later.. -->
  22
  23     <!--
  24     <script type="text/javascript" src="../../../Campaign/editor/Panel.js"></script>
  25     <script type="text/javascript" src="../../../Campaign/editor/TextBlock.js"></script>
  26     <script type="text/javascript" src="../../../Campaign/editor/ImageBlock.js"></script>
  27
  28     <link rel="stylesheet" href="../../../Campaign/editor/editor.css">
  29     -->
  30
  31
  32     <!-- test code -->
  33     <script type="text/javascript" src="Editor.js"></script>
  34   </head>
  35
  36   <body id="body">
  37     <script type="text/javascript">
  38         Campaign = { Dialog : {} };
  39
  40         var baseURL = '/web.campaign/index.local.php';
  41         var rootURL = '/web.campaign';
  42
  43         Roo.XComponent.hideProgress = true;
  44
  45         Roo.onReady(function() {
  46             Roo.XComponent.build();
  47         });
  48
  49         Roo.XComponent.on('buildcomplete', function() {
  50             Roo.Ajax.request({
  51                 url : baseURL + '/editor/data.php',
  52                 method: 'GET',
  53                 success : function(r)
  54                 {
  55                     var res = Roo.decode(r.responseText);
  56
  57                     if(!res.success){
  58                         return;
  59                     }
  60
  61                     Roo.example.Editor.previewPanel.body().dom.innerHTML = res.data.email;
  62
  63                     Roo.each(Roo.example.Editor.previewPanel.body().select('.campaign-editable', true).elements, function(el){
  64
  65                         var target = el.attr('data-target');
  66
  67                         Roo.example.Editor[target] = new Roo.bootstrap.editor.TextBlock({ panel : 'thanks-email' }).render(el);
  68
  69                     })
  70
  71                     Roo.each(Roo.example.Editor.previewPanel.body().select('.campaign-image-editable', true).elements, function(el){
  72
  73                         var target = el.attr('data-target');
  74
  75                         Roo.example.Editor[target] = new Roo.bootstrap.editor.ImageBlock({ panel : 'thanks-email' }).render(el);
  76                         Roo.example.Editor[target].parent = el;
  77
  78                         Roo.example.Editor[target].on('upload', function(){
  79                             Campaign.Dialog.Images.show(
  80                                 {
  81                                     onid : 237,
  82                                     ontable : 'campaign_detail',
  83                                     imgtype : target
  84                                 },
  85                                 function(){
  86                                     Roo.Ajax.request({
  87                                         url : baseURL + '/Roo/Images',
  88                                         method: 'GET',
  89                                         params: {
  90                                             _preview : target,
  91                                             onid : 237
  92                                         },
  93                                         success : function(r)
  94                                         {
  95                                             var res = Roo.decode(r.responseText);
  96
  97                                             if(!res.success){
  98                                                 return;
  99                                             }
 100
 101                                             var width = Roo.example.Editor[target].parent.getWidth();
 102
 103                                             Roo.example.Editor[target].setValue((baseURL + '/Images/Thumb/' + width + '/' + res.data.id));
 104                                         }
 105                                     });
 106                                 }
 107                             );
 108                         })
 109
 110                     })
 111
 112                     for ( var p in res.data.campaign.emails ){
 113                         var f = res.data.campaign.emails[p];
 114
 115                         for (var d in f['message']){
 116                             Roo.example.Editor[d].setValue(f['message'][d])
 117                         }
 118
 119                         for (var d in f['image']){
 120                             var width = Roo.example.Editor[d].parent.getWidth();
 121                             Roo.example.Editor[d].setValue(baseURL + '/Images/Thumb/' + width + '/' + f['image'][d]);
 122                         }
 123
 124                     }
 125
 126                 }
 127             });
 128         });
 129
 130
 131
 132     </script>
 133
 134     <script src="../../../Campaign/Campaign.Dialog.Images.js" type="text/javascript"></script>
 135   </body>
 136 </html>