quill富文本编辑器

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>