example: 🎨 apply Preview, Print, Fullscreen extensions to examples

Leecason · Mar 1, 2020 · e664019 · e664019
1 parent 15500cd
commit e664019
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 50 deletions.
diff --git a/examples/views/Basic.vue b/examples/views/Basic.vue
@@ -37,6 +37,8 @@ import {
   TrailingNode,
   FormatClear,
   History,
+  Print,
+  Fullscreen,
 } from 'element-tiptap';
 
 export default {
@@ -70,6 +72,8 @@ export default {
         new TrailingNode(),
         new FormatClear(),
         new History(),
+        new Print(),
+        new Fullscreen(),
       ],
 
       content: `

diff --git a/examples/views/Preview.vue b/examples/views/Preview.vue
@@ -3,16 +3,11 @@
     <div class="editor">
       <el-tiptap
         :extensions="extensions"
-        v-model="output.html"
+        :content="content"
         @onUpdate="onUpdate"
       />
     </div>
 
-    <div class="preview section">
-      <h2 class="section__title">Preview</h2>
-      <div class="el-tiptap-editor__content" v-html="output.html"></div>
-    </div>
-
     <div class="section">
       <h2 class="section__title">HTML</h2>
       <pre><code>{{ output.html }}</code></pre>
@@ -44,6 +39,7 @@ import {
   Indent,
   LineHeight,
   TrailingNode,
+  Preview,
   History,
 } from 'element-tiptap';
 
@@ -68,54 +64,15 @@ export default {
         new OrderedList(),
         new Indent(),
         new TrailingNode(),
+        new Preview(),
         new History(),
       ],
 
+      content: '<h2>Test Text</h2><p>You can input to see the <strong>output</strong></p><p>And <strong>preview</strong> the content with the <strong>Preview Menu Button</strong></p>',
+
       output: {
-        json: {
-          type: 'doc',
-          content: [
-            {
-              type: 'heading',
-              attrs: {
-                textAlign: null,
-                indent: 0,
-                lineHeight: null,
-                level: 2
-              },
-              content: [
-                {
-                  type: 'text',
-                  text: 'Preview'
-                }
-              ]
-            },
-            {
-              type: 'paragraph',
-              attrs: {
-                textAlign: null,
-                indent: 0,
-                lineHeight: null
-              },
-              content: [
-                {
-                  type: 'text',
-                  marks: [
-                    {
-                      type: 'bold'
-                    }
-                  ],
-                  text: 'This is a Test Text. '
-                },
-                {
-                  type: 'text',
-                  text: 'You can input to see the output...'
-                }
-              ]
-            }
-          ]
-        },
-        html: '<h2>Test Text</h2><p>You can input to see the output...</p>',
+        json: '',
+        html: '',
       },
     };
   },