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     <!-- bootstrap js.. needs to compile it later.. -->
  20     <script type="text/javascript" src="../../Roo/XComponent.js"></script>
  21     <script type="text/javascript" src="../../Roo/bootstrap/Component.js"></script>
  22     <script type="text/javascript" src="../../Roo/bootstrap/Body.js"></script>
  23     <script type="text/javascript" src="../../Roo/bootstrap/Container.js"></script>
  24     <script type="text/javascript" src="../../Roo/bootstrap/Column.js"></script>
  25     <script type="text/javascript" src="../../Roo/bootstrap/Navbar.js"></script>
  26     <script type="text/javascript" src="../../Roo/bootstrap/Menu.js"></script>
  27     <script type="text/javascript" src="../../Roo/bootstrap/MenuItem.js"></script>
  28     <script type="text/javascript" src="../../Roo/bootstrap/MenuSeparator.js"></script>
  29
  30     <script type="text/javascript" src="../../Roo/bootstrap/NavSimplebar.js"></script>
  31     <script type="text/javascript" src="../../Roo/bootstrap/NavGroup.js"></script>
  32     <script type="text/javascript" src="../../Roo/bootstrap/NavItem.js"></script>
  33     <script type="text/javascript" src="../../Roo/bootstrap/TabGroup.js"></script>
  34     <script type="text/javascript" src="../../Roo/bootstrap/TabPanel.js"></script>
  35     <script type="text/javascript" src="../../Roo/bootstrap/Row.js"></script>
  36     <script type="text/javascript" src="../../Roo/bootstrap/Button.js"></script>
  37     <script type="text/javascript" src="../../Roo/bootstrap/ButtonGroup.js"></script>
  38     <script type="text/javascript" src="../../Roo/bootstrap/Img.js"></script>
  39
  40     <script type="text/javascript" src="../../Roo/bootstrap/Header.js"></script>
  41
  42     <script type="text/javascript" src="../../Roo/bootstrap/Modal.js"></script>
  43     <script type="text/javascript" src="../../Roo/bootstrap/Form.js"></script>
  44     <script type="text/javascript" src="../../Roo/bootstrap/Input.js"></script>
  45
  46     <script type="text/javascript" src="../../Roo/bootstrap/TriggerField.js"></script>
  47     <script type="text/javascript" src="../../Roo/bootstrap/ComboBox.js"></script>
  48     <script type="text/javascript" src="../../Roo/bootstrap/ComboBox2.js"></script>
  49     <script type="text/javascript" src="../../Roo/bootstrap/Calendar.js"></script>
  50     <script type="text/javascript" src="../../Roo/bootstrap/Popover.js"></script>
  51
  52     <script type="text/javascript" src="../../Roo/data/SortTypes.js"></script>
  53     <script type="text/javascript" src="../../Roo/data/Record.js"></script>
  54     <script type="text/javascript" src="../../Roo/data/Store.js"></script>
  55     <script type="text/javascript" src="../../Roo/data/SimpleStore.js"></script>
  56     <script type="text/javascript" src="../../Roo/data/JsonStore.js"></script>
  57     <script type="text/javascript" src="../../Roo/data/Field.js"></script>
  58     <script type="text/javascript" src="../../Roo/data/DataReader.js"></script>
  59     <script type="text/javascript" src="../../Roo/data/DataProxy.js"></script>
  60     <script type="text/javascript" src="../../Roo/data/MemoryProxy.js"></script>
  61     <script type="text/javascript" src="../../Roo/data/HttpProxy.js"></script>
  62     <script type="text/javascript" src="../../Roo/data/ScriptTagProxy.js"></script>
  63     <script type="text/javascript" src="../../Roo/data/JsonReader.js"></script>
  64     <script type="text/javascript" src="../../Roo/data/ArrayReader.js"></script>
  65
  66     <script type="text/javascript" src="../../Roo/form/VTypes.js"></script>
  67     <script type="text/javascript" src="../../Roo/form/Form.js"></script>
  68     <script type="text/javascript" src="../../Roo/View.js"></script>
  69
  70     <script type="text/javascript" src="../../../Campaign/editor/Panel.js"></script>
  71     <script type="text/javascript" src="../../../Campaign/editor/TextBlock.js"></script>
  72     <script type="text/javascript" src="../../../Campaign/editor/ImageBlock.js"></script>
  73
  74     <link rel="stylesheet" href="../../../Campaign/editor/editor.css">
  75
  76     <script type="text/javascript" src="../../Roo/bootstrap/TextArea.js"></script>
  77     <script type="text/javascript" src="../../Roo/HtmlEditorCore.js"></script>
  78     <script type="text/javascript" src="../../Roo/bootstrap/HtmlEditor.js"></script>
  79     <script type="text/javascript" src="../../Roo/bootstrap/htmleditor/ToolbarStandard.js"></script>
  80     <script type="text/javascript" src="../../Roo/bootstrap/MenuMgr.js"></script>
  81     <script type="text/javascript" src="../../Roo/bootstrap/MessageBox.js"></script>
  82
  83     <!-- test code -->
  84     <script type="text/javascript" src="Editor.js"></script>
  85   </head>
  86
  87   <body id="body">
  88     <script type="text/javascript">
  89         Campaign = { Dialog : {} };
  90
  91         var baseURL = '/web.campaign/index.local.php';
  92         var rootURL = '/web.campaign';
  93
  94         Roo.XComponent.hideProgress = true;
  95
  96         Roo.onReady(function() {
  97             Roo.XComponent.build();
  98         });
  99
 100         Roo.XComponent.on('buildcomplete', function() {
 101             Roo.Ajax.request({
 102                 url : baseURL + '/editor/data.php',
 103                 method: 'GET',
 104                 success : function(r)
 105                 {
 106                     var res = Roo.decode(r.responseText);
 107
 108                     if(!res.success){
 109                         return;
 110                     }
 111
 112                     Roo.example.Editor.previewPanel.body().dom.innerHTML = res.data.email;
 113
 114                     Roo.each(Roo.example.Editor.previewPanel.body().select('.campaign-editable', true).elements, function(el){
 115
 116                         var target = el.attr('data-target');
 117
 118                         Roo.example.Editor[target] = new Roo.bootstrap.editor.TextBlock({ panel : 'thanks-email' }).render(el);
 119
 120                     })
 121
 122                     Roo.each(Roo.example.Editor.previewPanel.body().select('.campaign-image-editable', true).elements, function(el){
 123
 124                         var target = el.attr('data-target');
 125
 126                         Roo.example.Editor[target] = new Roo.bootstrap.editor.ImageBlock({ panel : 'thanks-email' }).render(el);
 127                         Roo.example.Editor[target].parent = el;
 128
 129                         Roo.example.Editor[target].on('upload', function(){
 130                             Roo.log('fire upload');
 131
 132                             Campaign.Dialog.Images.show(
 133                                 {
 134                                     onid : 237,
 135                                     ontable : 'campaign_detail',
 136                                     imgtype : target
 137                                 },
 138                                 function(res){
 139                                     Roo.log(res);
 140                                 }
 141                             );
 142                         })
 143
 144                     })
 145
 146                     for ( var p in res.data.campaign.emails ){
 147                         var f = res.data.campaign.emails[p];
 148
 149                         for (var d in f['message']){
 150                             Roo.example.Editor[d].setValue(f['message'][d])
 151                         }
 152
 153                         for (var d in f['image']){
 154                             var width = Roo.example.Editor[d].parent.getWidth();
 155                             Roo.example.Editor[d].setValue(baseURL + '/Images/Thumb/' + width + '/' + f['image'][d]);
 156                         }
 157
 158                     }
 159
 160                 }
 161             });
 162         });
 163
 164
 165
 166     </script>
 167
 168     <script src="../../../Campaign/Campaign.Dialog.Images.js" type="text/javascript"></script>
 169   </body>
 170 </html>