I write quite a few single page vue 2 files but have never tried using a "component" before. Can someone help spot the problem with my code? The error I'm getting is "Editor is not defined". Every example out there has you importing the vue module but I'm not using a builder so I thought just including the script(s) would work. I have removed a lot of extraneous code to make it simpler to read (I hope).

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
...
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.jsdelivr.net/npm/tinymce-vue/dist/tinymce-vue.min.js"></script>


<div id="vue_app">
...
        <div v-show="showtable">
            ...
            <table class="tbdesign">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    ...
                    <th>Func</th>
                </tr>
                <tr v-for='row in filteredRows' :key="row.property_id">
                    <td :id="row.property_id">{{row.property_id}}</td>
                    <td>{{ row.name }}</td>
                    ...
                    <td><div v-on:click="editRow(row.property_id)" href="#">Edit</div>
                    </td>
                </tr>
            </table>
        </div>
    </section>
    <section v-if="showeditor">
        <div >
          ...
          <form>
                <div>
                    
                        <div>
                            <label for="name">Name:</label> <input class="detail_update  id="name" type="text" v-model="editrow.name" />
                        </div>
            
                        ...
                    
                        <div class="form-group col">
                            Description:<br>
                             <editor
                               apiKey="no-api-key"
                              v-model="editrow.description"
                              :init="{
                                height: 500,
                                menubar: true,
                                plugins: [
                                  'advlist autolink lists link image charmap',
                                  'searchreplace visualblocks code fullscreen',
                                  'print preview anchor insertdatetime media',
                                  'paste code help wordcount table'
                                ],
                                toolbar:
                                  'undo redo | formatselect | bold italic | \
                                  alignleft aligncenter alignright | \
                                  bullist numlist outdent indent | help'
                              }"
                            >
                            </editor>
                        </div>
                    
                        <div class="form-group col">
                            <button v-on:click="submitData" type="button">Save</button> 
                        </div>
                   
                </div>
            </form>
       </div>
...
</div>
<script type="module">
    var app = new Vue({
        el: '#vue_app',
        data() {
            return {
                rows: [],
                row: [],
                ...
                editrow: [],
                ...
                errors: []               
            }
        },
        components: {
           'editor': Editor 
        },
        mounted() {
            this.init();
        },
        computed: {
            ...
        },
        methods: {
            init() {
                this.loading = true;
                axios.get('/dap/api/?/functions/get_properties/')
                .then(response => {
                    this.rows = response.data;
                    console.log(response.data);
                    this.showtable = true;
                })
                .catch(function(error) {
                    this.errored = true;
                    alert(error);
                })
                .finally(() => this.loading = false)
            },
            
            ...
            checkData() {
                ...
            },
            submitData() {
                ...
            },
            editRow(rowID) {
                for (var i = 0; i < this.rows.length; i  ) {
                    if (this.rows[i]['property_id'] == rowID) {
                        this.editrow = this.rows[i];
                        this.showeditor = true;
                        this.showtable = false;
                        break;
                    }
                }
            }
        }
    });
</script>

CodePudding user response：

Editor is not actually defined anywhere in your code, and <script type="module"> uses strict mode, requiring all referenced variables to be declared upfront. Since the Editor variable doesn't exist, the script immediately fails with the error you observed. However, it doesn't look like you actually need <script type="module"> here, so you could just use a regular <script>.

Every example out there has you importing the vue module but I'm not using a builder so I thought just including the script(s) would work.

The examples that import .vue files use a build system to automatically compile the imports with vue-loader. In this case you're using a pre-compiled script from CDN, so no loader is needed, but you do need to reference the correct symbol that the tinymce-vue script defines.

The tinymce-vue script sets its exports on window.TinymceVue. The pre-built Editor.vue component happens to be exported as the same name as the root export: window.TinymceVue.TinymceVue.

So you should locally register tinymce-vue's Editor component as:

<script>
new Vue({
  components: {
    editor: window.TinymceVue.TinymceVue,
  }
})
</script>

demo