How to write exts?

[weiyinfu]

Version

1.4.0

Test Environment

linux,webpack,vue
I write one page like below.

<template>
  <editor :exts="exts" />
</template>
<script>
import "tui-editor/dist/tui-editor.css";
import "tui-editor/dist/tui-editor-contents.css";
import "codemirror/lib/codemirror.css";
import { Editor } from "@toast-ui/vue-editor";
import tui from "tui-editor";
tui.defineExtension("youtube", () => {
  console.log("extension is defined");//This sentence is never reached !
});
export default {
  components: { Editor },
  data() {
    return {
      exts: ["youtube"]
    };
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="less">
</style>

Current Behavior

console.log("extension is defined"); this sentence cannot be reached !

Expected Behavior

When I write youtube,it should become one link.

But now it doesn't work,how can I run the youtube demo in vue. Can you write one specific ext demo like this link:make new extensions

[BabyManisha]

@weiyinfu - Looks like there is no support for extensions (exts) in the editor as prop, you need to pass extensions as editor options like below:

<template>
    <div id="app">
        <editor
        v-model="editorText"
        :options="editorOptions"
        previewStyle="vertical"
        />
    </div>
</template>
<script>
import 'tui-editor/dist/tui-editor.css';
import 'tui-editor/dist/tui-editor-contents.css';
import 'codemirror/lib/codemirror.css';
import 'tui-editor/dist/tui-editor-extColorSyntax'
import 'tui-editor/dist/tui-editor-extUML'
import 'tui-editor/dist/tui-editor-extChart'
import 'tui-editor/dist/tui-editor-extTable'
import { Editor } from '@toast-ui/vue-editor'

export default {
    name: 'App',
    components: {
        'editor': Editor
    },
    data() {
        return {
            editorText: '# CCC'+'\n'+
                        ''+'\n'+
                        '| @cols=2:merged |'+'\n'+
                        '| --- | --- |'+'\n'+
                        '| table | table |'+'\n'+
                        ''+'\n'+
                        '```chart'+'\n'+
                        ',category1,category2'+'\n'+
                        'Jan,21,23'+'\n'+
                        'Feb,31,17'+'\n'+
                        ''+'\n'+
                        'type: column'+'\n'+
                        'title: Monthly Revenue'+'\n'+
                        'x.title: Amount'+'\n'+
                        'y.title: Month'+'\n'+
                        'y.min: 1'+'\n'+
                        'y.max: 40'+'\n'+
                        'y.suffix: $'+'\n'+
                        '```'+'\n'+
                        ''+'\n'+
                        '```',
            editorOptions: {
                exts: ['uml', 'chart', 'table']
            }
        };
    }
};
</script>

If you want to send extensions as props to editor you can use this: BabyManisha/toast-ui.vue-editor

Hope this helps, Thank you.