Quill自定義上傳圖片

時間 2019-11-09
標籤 quill 自定義上傳圖片简体版
原文原文鏈接
Quill自定義上傳圖片
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Quill-Demo</title>
 
        <link href="https://cdn.bootcss.com/quill/1.3.6/quill.snow.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/quill/1.3.6/quill.bubble.css" rel="stylesheet">
        <style>
            body {
                padding: 10px 30px;
            }
            #editor {
                min-height: 180px;
            }
        </style>
    </head>
 
    <body>
 
        <form method="POST" action="test.php">
            <div>
                <!--當toolbar以container的形式註冊時須要顯式地寫出這些標籤-->
                <div id="editor_header" style="display: none;">
                        <!--字體大小-->
                        <select class="ql-size">
                            <option value="small"></option>
                            <!-- 默認按鈕 -->
                            <option selected></option>
                            <option value="large"></option>
                            <option value="huge"></option>
                        </select>
                        <!--加粗按鈕-->
                        <button class="ql-bold"></button>
                        <!--上標、下標按鈕-->
                        <button class="ql-script" value="sub"></button>
                        <button class="ql-script" value="super"></button>
                       <!--自定義按鈕-->
                        <button id="my_button"></button>
                </div>
                <div id="editor" class="showContent">
                    <!--回顯的內容，庫中查出來的放這-->
                    <!--能夠直接在指定元素內加入文本或者html標籤-->
                    Quill自定義上傳圖片
                </div>
                <input type="hidden"  id="richText" name="richText" style="display: none;" value="" />  <!--用於form表單提交-->
            </div>    
            <form enctype="multipart/form-data" id="imgFrom">
                <!-- this.files[0] 圖片列表的第0項，也就是當前選擇的圖片 -->
                <input name="imgData" type="file" οnchange="updateImg(this.files[0])" id="imgData" style="display: none;">
            </form>
            <br />
            <input type="submit" value="提交" id="su" οnclick="submitData()" /> <!--id用於form表單時，將富文本編輯器的值，賦給隱藏域-->
        </form>
        
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/quill/1.3.6/quill.js"></script>
        <script>

            /* 編輯器操做條選項 */
            var toolbarOptions = [
                ['bold', 'italic', 'underline', 'strike'], //開關按鈕
                ['blockquote', 'code-block'],
                [{'header': 1}, {'header': 2}], //自定義按鈕值
                [{'list': 'ordered'}, {'list': 'bullet'}],
                [{'script': 'sub'}, {'script': 'super'}], // 上標/下標
                [{'indent': '-1'}, {'indent': '+1'}], // 減小縮進/縮進
                [{'direction': 'rtl'}], // 文本方向
                [{'size': ['small', false, 'large', 'huge']}], // 自定義下拉
                [{'header': [1, 2, 3, 4, 5, 6, false]}],
                [{'color': []}, {'background': []}], //使用主題的默認下拉
                [{'font': []}],
                [{'align': []}],
                ['clean'], //移除格式化
                ['image'],
                ['video'],
                ['formula'] //須要加載cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js
            ];
 
            /* 實例化編輯器 */
            var quill = new Quill('#editor', {
                /*debug: 'info',*/
 
                modules: {
                    //formula: true, //公式；須要加載cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js
                    //syntax: true,  //高亮；須要加載cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js
                    /*toolbar: {
                        container:"#editor_header"
                    }*/ // 或者 toolbar :'#editor_header'
                    toolbar:toolbarOptions  //指定編輯器操做條
                },
                theme: 'snow', //主題，有兩種，snow和bubble
                placeholder:'請輸入',
                readOnly: false
            });

            $('input[name="imgData"]').change(function(){
                const range = quill.getSelection();
                if (range) {
                    quill.insertEmbed(range.index, 'image',""+'http://m.dzrjia.cn/public/uploads/images/00358.jpg'); //將上傳好的圖片，插入到富文本的range.index（當前光標處）
                } 
            })
 
            //修改樣式
            var Align = Quill.import('attributors/style/align');
            Align.whitelist = ['right', 'center', 'justify'];
            Quill.register(Align, true);
 
            /* 傳入布爾值，控制編輯器是否可用 */
            quill.enable(); 
            //quill.blur(); //失去焦點
            //quill.focus(); //得到焦點
 
           
                   
            /* 事件的綁定；注意：text-change這個獲取值放這的話是編輯器內容發生改變的時候才能獲取到值,若是想每次提交都有值，要放到提交那 */
            quill.on('text-change', function(delta, oldDelta, source) { 
                // console.log(delta);             //當前輸入的
                // console.log(oldDelta);          //上一次輸入的
                // console.log(source);
                //res = quill.container.firstChild.innerHTML; //獲取當前富文本編輯器實例的內容（帶html標籤）
                //console.log(res); 
            });
 
            /* 自定義按鈕 */
            var myBtn = document.querySelector("#my_button");
            myBtn.addEventListener("click",function(){
                //console.log('my-btn')
            });
 
            //【自定義上傳圖片1】經過addHander來監聽image事件
            let toolbar = quill.getModule('toolbar');
            toolbar.addHandler('image', () => {
                document.getElementById('imgData').click();
            });
            
            //【自定義上傳圖片2】發送ajax處理好圖片
            function updateImg(file){
                alert()
                var formData = new FormData();
                formData.append('avatar', file);        //追加的自定義節點，第一個參數：php用$_FILES接收時的key；第2個參數：當前圖片
                console.log(formData.get("avatar"));    //打印當前圖片的信息
                $.ajax({                                //發送ajax
                    url:'index.php',                        //url
                    type:'post',                        //以post發送
                    data:formData,             //要發送的數據。後端接收$_POST['user']
                    dataType:'json',                  //返回的數據類型
                    cache:false,
                    traditional: true,
                    contentType: false,
                    processData: false,
                    success:function(res){
                        console.log(res);
                        //圖片上傳成功以後的回調
                        const range = quill.getSelection();
                        if (range) {
                            quill.insertEmbed(range.index, 'image',""+res); //將上傳好的圖片，插入到富文本的range.index（當前光標處）
                        }       
                    }
                });
            };
            
            //form表單的提交
            function submitData(){
                 res = quill.container.firstChild.innerHTML; //獲取當前富文本編輯器實例的內容（帶html標籤）
                console.log(res); //獲取當前富文本編輯器實例的內容（帶html標籤）
                $("#richText").val(res);
            };
            
        </script>
    </body>
 
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。