test Grid

demo-source · Jul 23, 2020 · 24af227 · 24af227
1 parent 04c5c7e
commit 24af227
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/static/index.html b/static/index.html
@@ -6,19 +6,23 @@
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <title>Test tui.editor</title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
-
-  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.css">
-  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-viewer.css">
-
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toast-ui/editor@2/dist/toastui-editor.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5/lib/codemirror.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tui-grid@4/dist/tui-grid.css">
+  <link rel="stylesheet" href="/main.css">
 </head>
 
 <body>
 
+  <div id="grid"></div>
   <div id="editor"></div>
 
 </body>
 
-<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/codemirror@5/lib/codemirror.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@toast-ui/editor@2/dist/toastui-editor.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@toast-ui/editor@2/dist/i18n/ru-ru.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tui-grid@4/dist/tui-grid.js"></script>
 <script type="module" src="/main.js"></script>
 
 </html>
diff --git a/static/main.css b/static/main.css
@@ -0,0 +1,4 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}
diff --git a/static/main.js b/static/main.js
@@ -1,4 +1,30 @@
 const { Editor } = window.toastui
+const { Grid } = window.tui
+const grid = new Grid({
+  el: document.getElementById('grid'),
+  data: [{
+    name: 'name',
+    title: 'title'
+  }],
+  scrollX: false,
+  scrollY: false,
+  columns: [
+    {
+      header: 'Page name',
+      name: 'name',
+      editor: 'text'
+    },
+    {
+      header: 'Page title',
+      name: 'title',
+      editor: 'text'
+    }
+  ]
+})
 const editor = new Editor({
-  el: document.querySelector('#editor')
+  el: document.querySelector('#editor'),
+  height: 'auto',
+  previewStyle: 'vertical',
+  initialEditType: 'wysiwyg',
+  language: 'ru'
 })