vue-quill-editor 在指定位置插入文字

因为项目需求需要在编辑器的指定位置插入文字，话不多说直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>vue_back</title>
    <link href=/static/css/app.23b4d95f1a5c49396715d274d0679b1d.css rel=stylesheet>
</head>
<body>
    <link href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.css" rel="stylesheet">

    <!-- 创建容器 -->
    <div id="editor">
        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
        <p><br></p>
    </div>
    <a onclick="clickMe()" >点击插入</a>
    <!-- 引入Quill -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/quill/1.3.6/quill.js"></script>
    <script>
        var quill = new Quill('#editor', {
            theme: 'snow'
        });

        function clickMe() {
            quill.focus();
            var range = quill.getSelection();
            console.log(range)
            if (range) {
                if (range.length == 0) {
                    console.log('User cursor is at index', range.index);
                    quill.insertText(range.index, "---"+Math.round(Math.random()*10)+'Hello' + Math.round(Math.random()*10)+"");
                } else {
                    var text = quill.getText(range.index, range.length);
                    quill.insertText(range.index, '123');
                    console.log('User has highlighted: ', text);
                }
            } else {
                console.log('User cursor is not in editor');
            }
        }
    </script>
</body>
</html>

vue-quill-editor 在指定位置插入文字

悦读