quill 富文字編輯器官網 https://quilljs.com/

因為是國外的編輯器,且沒有中文文件,研究起來相對吃力,特此做個分享

考慮兩點,一是輕量級,二是介面乾淨,簡約.

考慮過ckeditor,也是國外的,相對quill來說使用方式太過麻煩,遂放棄.

進入正題:

    主要摸索的問題點是該編輯器自定義圖片上傳

    在github逛了許久,問如何自定義上傳圖片的人不在少數,卻沒有尋求到能直接有效的示例的方法,於是決定將自己摸索出來的用法貼出來,供大家修改使用,希望能起到些許幫助作用,廢話不多說,上程式碼:

1,配置一個隱藏的input按鈕,用於非同步上傳圖片

<div id="editor">
    <p>Hello World!</p>
</div>
<div id="imageArea">
    <input name="file" lay-type="file" class="layui-upload-file" type="file" lay-title="新增附件" >
</div>
 

2,獲取圖片按鈕點選事件,配置上傳地址,返回資料,自定義json格式,方便獲取

<script type="text/javascript">

	function imageHandler(){
		$("input[name='file']").click();
	}
    
	$(function(){
		var quillEditor = this.editor;  
		var toolbarOptions = [['bold', 'italic'], ['link', 'image']];
		quillEditor = new Quill('#editor', {
			modules: {
				toolbar: {
					container: toolbarOptions,
					handlers: {
				        'image': imageHandler
				      }
				    }
			  },
		    theme: 'snow'
		  });
		
		
		layui.use('upload', function(){
			  layui.upload({
			    url: 'oaNoticeController.do?uploadImage', 
			    method:'post',
			    success: function(res){ 
			    	quillEditor.insertEmbed(quillEditor.getSelection().index, 'image', res.data.src)  // 獲取滑鼠在編輯器中位置,圖片位置根據滑鼠位置插入
			  		//$("#photos").attr("src",res.data.src)
			    }
			});
		});
		
		$("#imageArea").hide();
 	}); 
	
</script>