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/View.js"></script>
  68
  69     <script type="text/javascript" src="../../../Campaign/editor/Panel.js"></script>
  70     <script type="text/javascript" src="../../../Campaign/editor/TextBlock.js"></script>
  71     <script type="text/javascript" src="../../../Campaign/editor/ImageBlock.js"></script>
  72
  73     <link rel="stylesheet" href="../../../Campaign/editor/editor.css">
  74
  75     <script type="text/javascript" src="../../Roo/bootstrap/TextArea.js"></script>
  76     <script type="text/javascript" src="../../Roo/HtmlEditorCore.js"></script>
  77     <script type="text/javascript" src="../../Roo/bootstrap/HtmlEditor.js"></script>
  78     <script type="text/javascript" src="../../Roo/bootstrap/htmleditor/ToolbarStandard.js"></script>
  79     <script type="text/javascript" src="../../Roo/bootstrap/MenuMgr.js"></script>
  80     <script type="text/javascript" src="../../Roo/bootstrap/MessageBox.js"></script>
  81
  82     <script src="../../../Campaign/Campaign.Dialog.Images.js" type="text/javascript"></script>
  83
  84     <!-- test code -->
  85     <script type="text/javascript" src="Editor.js"></script>
  86   </head>
  87
  88   <body id="body">
  89     <script type="text/javascript">
  90         Campaign = { Dialog : {} };
  91
  92         var baseURL = '/web.campaign/index.local.php';
  93         var rootURL = '/web.campaign';
  94
  95         Roo.XComponent.hideProgress = true;
  96
  97         Roo.onReady(function() {
  98             Roo.XComponent.build();
  99         });
 100
 101         Roo.XComponent.on('buildcomplete', function() {
 102             Roo.Ajax.request({
 103                 url : baseURL + '/editor/data.php',
 104                 method: 'GET',
 105                 success : function(r)
 106                 {
 107                     var res = Roo.decode(r.responseText);
 108
 109                     if(!res.success){
 110                         return;
 111                     }
 112
 113                     Roo.example.Editor.previewPanel.body().dom.innerHTML = res.data.email;
 114
 115                     Roo.each(Roo.example.Editor.previewPanel.body().select('.campaign-editable', true).elements, function(el){
 116
 117                         var target = el.attr('data-target');
 118
 119                         Roo.example.Editor[target] = new Roo.bootstrap.editor.TextBlock({ panel : 'thanks-email' }).render(el);
 120
 121                     })
 122
 123                     Roo.each(Roo.example.Editor.previewPanel.body().select('.campaign-image-editable', true).elements, function(el){
 124
 125                         var target = el.attr('data-target');
 126
 127                         Roo.example.Editor[target] = new Roo.bootstrap.editor.ImageBlock({ panel : 'thanks-email' }).render(el);
 128                         Roo.example.Editor[target].parent = el;
 129
 130                         Roo.example.Editor[target].on('upload', function(){
 131                             Roo.log('fire upload');
 132                             Campaign.Dialog.Image.show(
 133                                 {
 134
 135                                 },
 136                                 function(){
 137                                     Roo.MessageBox.alert('Notice', 'Sent');
 138                                 }
 139                             );
 140                         })
 141
 142                     })
 143
 144                     for ( var p in res.data.campaign.emails ){
 145                         var f = res.data.campaign.emails[p];
 146
 147                         for (var d in f['message']){
 148                             Roo.example.Editor[d].setValue(f['message'][d])
 149                         }
 150
 151                         for (var d in f['image']){
 152                             var width = Roo.example.Editor[d].parent.getWidth();
 153                             Roo.example.Editor[d].setValue(baseURL + '/Images/Thumb/' + width + '/' + f['image'][d]);
 154                         }
 155
 156                     }
 157
 158                 }
 159             });
 160         });
 161
 162
 163
 164     </script>
 165   </body>
 166 </html>