sitexa/qeditor.html

## qeditor.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>quill RTF editor</title>
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <style>
    #editor {
      height: 350px;
    }
  </style>
</head>
<body>
<div id="editor">
</div>
<div>
  <button id="btn1">获取html</button>
  <button id="btn2">获取text</button>
</div>

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  // 1,配置项，上传服务器地址
  const server_url = 'http://localhost:10003';
  // 2,配置项，上传行为路径，对应FileController的方法。
  const action_path = '/manage/file/uploadImage';
  // 3,配置项，图片下载路径，
  const image_path = '/upload/';

  const editor_options = {
    theme: 'snow',
    modules: {
      toolbar: {
        container: [['bold', 'italic', 'underline', 'strike'], ['link', 'image', 'video']],
        handlers: {image: quill_img_handler},
      },
    },
  };

  function quill_img_handler() {
    let fileInput = this.container.querySelector('input.ql-image[type=file]');

    if (fileInput == null) {
      fileInput = document.createElement('input');
      fileInput.setAttribute('type', 'file');
      fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
      fileInput.classList.add('ql-image');
      fileInput.addEventListener('change', () => {
        const files = fileInput.files;
        const range = this.quill.getSelection(true);

        if (!files || !files.length) {
          console.log('No files selected');
          return;
        }

        const formData = new FormData();
        formData.append('file', files[0]);

        this.quill.enable(false);

        axios.post(server_url + action_path, formData)
          .then(response => {
            this.quill.enable(true);
            this.quill.editor.insertEmbed(range.index, 'image', server_url + image_path + response.data.data.picName);
            this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
            fileInput.value = '';
          })
          .catch(error => {
            console.log('quill image upload failed');
            console.log(error);
            this.quill.enable(true);
          });
      });
      this.container.appendChild(fileInput);
    }
    fileInput.click();
  }
  const quill = new Quill('#editor', editor_options);

  document.getElementById('btn1').addEventListener('click', function () {
    var contents = quill.container.firstChild.innerHTML
    alert(contents)
  }, false)

  document.getElementById('btn2').addEventListener('click', function () {
    var length = quill.getLength();
    var txt = quill.getText(0,length);
    alert(txt)
  }, false)

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>quill RTF editor</title>
	<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
	<style>
	#editor {
	height: 350px;
	}
	</style>
	</head>
	<body>
	<div id="editor">
	</div>
	<div>
	<button id="btn1">获取html</button>
	<button id="btn2">获取text</button>
	</div>

	<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
	// 1,配置项，上传服务器地址
	const server_url = 'http://localhost:10003';
	// 2,配置项，上传行为路径，对应FileController的方法。
	const action_path = '/manage/file/uploadImage';
	// 3,配置项，图片下载路径，
	const image_path = '/upload/';

	const editor_options = {
	theme: 'snow',
	modules: {
	toolbar: {
	container: [['bold', 'italic', 'underline', 'strike'], ['link', 'image', 'video']],
	handlers: {image: quill_img_handler},
	},
	},
	};

	function quill_img_handler() {
	let fileInput = this.container.querySelector('input.ql-image[type=file]');

	if (fileInput == null) {
	fileInput = document.createElement('input');
	fileInput.setAttribute('type', 'file');
	fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
	fileInput.classList.add('ql-image');
	fileInput.addEventListener('change', () => {
	const files = fileInput.files;
	const range = this.quill.getSelection(true);

	if (!files \|\| !files.length) {
	console.log('No files selected');
	return;
	}

	const formData = new FormData();
	formData.append('file', files[0]);

	this.quill.enable(false);

	axios.post(server_url + action_path, formData)
	.then(response => {
	this.quill.enable(true);
	this.quill.editor.insertEmbed(range.index, 'image', server_url + image_path + response.data.data.picName);
	this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
	fileInput.value = '';
	})
	.catch(error => {
	console.log('quill image upload failed');
	console.log(error);
	this.quill.enable(true);
	});
	});
	this.container.appendChild(fileInput);
	}
	fileInput.click();
	}
	const quill = new Quill('#editor', editor_options);

	document.getElementById('btn1').addEventListener('click', function () {
	var contents = quill.container.firstChild.innerHTML
	alert(contents)
	}, false)

	document.getElementById('btn2').addEventListener('click', function () {
	var length = quill.getLength();
	var txt = quill.getText(0,length);
	alert(txt)
	}, false)

	</script>
	</body>
	</html>