[前端] 文本編輯器: Quill

日期：
Quill
https://github.com/quilljs/quill

Demo Page
https://surmon-china.github.io/vue-quill-editor/

Quill 是一個以 JavaScript 開發的富文本編輯器，可以在網頁中進行各種圖文排版，不需要依賴其他的 JavaScript 函式庫，且它有非常多的功能，支援許多基本類似 Word 編輯文章的功能。

以下為vue版

Vue-Quill-Editor
https://github.com/surmon-china/vue-quill-editor


以下為單html檔測試範例︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>QuillEditor Vue Demo</title>

    <!--使用vue-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

    <!--使用quill-->
    <link href="https://cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>

</head>
<body>

    <quill-editor id="app" style="height:250px;" v-model="content"></quill-editor>

    <script type="text/javascript">

        //使用Vue.use加載VueQuillEditor
        Vue.use(VueQuillEditor);

        new Vue({
            el: '#app',
            data: {
                content: 'I am Example',
            },
        });

    </script>

</body>
</html>

載入後畫面為︰



#Javascript, frontend, Rich Text Editor, Quill, vue, directly in browser, 富文本, 文本編輯器

留言

張貼留言