cdn import rich text is not working, nothing to show #598

ilostycom · 2024-10-12T09:53:03Z

Version
@vueup/vue-quill version [1.2.0]

Describe the bug
rich text content show nothing. what can i do to show it ?

To Reproduce

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
</head>

<body>
    <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/index.css" rel="stylesheet" />
    <!-- import JavaScript -->
    <script src="https://unpkg.com/[email protected]/dist/index.full.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/locale/zh-cn.js"></script>
    <script src="https://unpkg.com/@element-plus/[email protected]/dist/index.iife.min.js"></script>

    <!-- or point to a specific VueQuill release -->
    <script src="https://unpkg.com/@vueup/[email protected]/dist/vue-quill.global.prod.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@vueup/[email protected]/dist/vue-quill.snow.prod.css">


    <div id="app" class="clearfix" style="width: 90%; margin-top: 10px;">
        <h5>富文本内容</h5>
        <quill-editor theme="snow" ref="editor" toolbar="minimal" style="height:300px;" placeholder="请输入关于我们模块的内容"
            v-model="content"></quill-editor>
        <el-button @click="getContent">获取内容</el-button>

    </div>


    <script lang="tsx">
        const {
            createApp,
            reactive,
            ref,
            computed,
            nextTick,
            onMounted,
        } = Vue;

        const { QuillEditor } = VueQuill;

        const {
            ElInput,
            ElMessage,
            ElLoading,
            ElCheckbox
        } = ElementPlus;
        const { ElIcon, Plus, Edit } = ElementPlusIconsVue;


        const app = createApp({
            data() {
                const content = ref("<p>content 111<\/p><p><br><\/p><p>content 2222<\/p><p><br><\/p><p>content 33333<\/p><p><br><\/p><p>content 44444<\/p>");
                const editor = ref(null);
                const getContent = () => {
                    if (editor.value) {
                        const htmlContent = editor.value.getEditor().root.innerHTML;
                        console.log(htmlContent);
                    } else {
                        console.log(editor.value)
                    }
                };

                return {
                    content,
                    editor,

                    getContent,
                };
            },
        })
        app.use(ElementPlus, {
            locale: ElementPlusLocaleZhCn,
        });
        app.config.errorHandler = function (err, vm, info) {
            console.log(err);
            console.error(`全局错误捕获: ${err.message}`);
            // 这里可以执行一些自定义操作，比如发送错误信息到服务器
        };
        app.component('QuillEditor', QuillEditor);
        app.mount('#app');
    </script>
</body>

</html>

brower: chrome 125.0.6422.142

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

cdn import rich text is not working, nothing to show #598

cdn import rich text is not working, nothing to show #598

ilostycom commented Oct 12, 2024

cdn import rich text is not working, nothing to show #598

cdn import rich text is not working, nothing to show #598

Comments

ilostycom commented Oct 12, 2024