example: 🎨 embed exmaple route

Leecason · Jan 1, 2020 · d74485f · d74485f
1 parent 290ac2c
commit d74485f
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 0 deletions.
diff --git a/examples/router/index.js b/examples/router/index.js
@@ -5,6 +5,7 @@ const Index = () => import('../views/Index.vue');
 const Basic = () => import('../views/Basic.vue');
 const MenuBubble = () => import('../views/MenuBubble.vue');
 const Table = () => import('../views/Table.vue');
+const Embed = () => import('../views/Embed.vue');
 const Event = () => import('../views/Event.vue');
 const Output = () => import('../views/Output.vue');
 
@@ -30,6 +31,11 @@ const routes = [
         path: '/table',
         component: Table,
       },
+      {
+        name: 'Embed',
+        path: '/embed',
+        component: Embed,
+      },
       {
         name: 'Event',
         path: '/event',

diff --git a/examples/views/Embed.vue b/examples/views/Embed.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="el-tiptap-editor__wrapper">
+    <el-tiptap
+      :extensions="extensions"
+      :content="content"
+      placeholder="Write something ..."
+    />
+  </div>
+</template>
+
+<script>
+import {
+  Doc,
+  Text,
+  Paragraph,
+  Bold,
+  Underline,
+  Italic,
+  Strike,
+  Iframe,
+  TrailingNode,
+  History,
+} from 'element-tiptap';
+
+export default {
+  data () {
+    return {
+      extensions: [
+        new Doc(),
+        new Text(),
+        new Paragraph(),
+        new Bold(),
+        new Underline(),
+        new Italic(),
+        new Strike(),
+        new Iframe(),
+        new TrailingNode(),
+        new History(),
+      ],
+
+      content: `
+        <p>
+          Insert video with <b>iframe</b> extension.
+        </p>
+        <iframe src="https://www.youtube.com/embed/NFPR2gxNtLU" frameborder="0" allowfullscreen></iframe>
+      `,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-tiptap-editor {
+  &__wrapper {
+    width: 60vw;
+  }
+}
+</style>
diff --git a/examples/views/Index.vue b/examples/views/Index.vue
@@ -48,6 +48,19 @@
           </span>
         </router-link>
 
+        <router-link
+          :to="{ name: 'Embed' }"
+          v-slot="{ navigate, isActive }"
+        >
+          <span
+            :class="{ 'router-link--active': isActive }"
+            class="router-link"
+            @click="navigate"
+          >
+            Embed
+          </span>
+        </router-link>
+
         <router-link
           :to="{ name: 'Event' }"
           v-slot="{ navigate, isActive }"