项目中需要用到在线填写表格的功能，我选择使用了TinyMCE，TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器，这里做了一个小demo，页面如下：
第1步：引入TinyMCE脚本
首先我们需要下载一份源文件放在本地，点这里下载，下载社区版即可，下载好之后放入public的static文件目录下，并在html文件中引入：
<script type="text/javascript" src="/static/tinymce/tinymce.min.js"></script>
第2步：引入汉化插件
为了方便用户操作，我们可以使用汉化插件，点击这里下载中文汉化包，下载之后放入tinymce文件中，并在html文件中引入：
<script type="text/javascript" src="/static/tinymce/zh_CN.js"></script>
第3步：将TinyMCE初始化为页面的一部分
html部分:
<template><div id="report"><form method="post"><textarea id="mytextarea"></textarea></form><input class="submit" type="button" @click="submit" value="提交"><input class="submit" type="button" @click="setContent" value="设置内容"></div></template>
JS部分:
<script>export default {data(){return{tinyID:'mytextarea',reportSize:'',}},mounted(){// 页面加载的时候初始化组件this.init();},beforeDestroy(){//移除tinymcetinymce.remove()},methods:{init(){tinymce.init({selector: '#mytextarea',skin:'oxide-dark',language:'zh_CN',//可根据需求增加或删除插件plugins : 'print paste preview searchreplace autolink directionality visualblocks visualchars fullscreen image template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave ', //字符串方式//toolbar为分好组的工具，可自定义分类 用 | 分割toolbar: ' undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough anchor | alignleft aligncenter alignright alignjustify outdent indent | \styleselect formatselect fontselect fontsizeselect | table image charmap emoticons hr pagebreak |bullist numlist | blockquote subscript superscript removeformat | \insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',// height: 650, //编辑器高度min_height: 800,/*content_css: [ //可设置编辑区内容展示的css，谨慎使用'/static/reset.css','/static/ax.css','/static/css.css',],*/fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',link_list: [{title: '预置链接1', value: '' },{title: '预置链接2', value: 'http://tinymce.ax-' }],image_list: [{title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },{title: '预置图片2', value: '/img/bd_logo1.png' }],image_class_list: [{title: 'None', value: '' },{title: 'Some class', value: 'class-name' }],importcss_append: true,paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图像。//设置上传图片的最大尺寸content_style:'img {max-width:80%;height:auto;}',//上传图片images_upload_handler: (blobInfo, succFun, failFun)=>{var formData;var file = blobInfo.blob();//转化为易于理解的file对象console.log(file)formData = new FormData();formData.append('file', file, file.name );//此处与源文档不一样this.axios({url:'/api/file/getPicUrl',method:'post',data:formData}).then(res=>{console.log(res);if(res.data.location){succFun(res.data.location) //成功之后返回图片地址return}else{failFun(res.data.message)//失败返回错误提示return}})},toolbar_sticky: true,autosave_ask_before_unload: false,setup:(editor)=>{editor.on('init',()=>{//设置内容editor.setContent(this.reportSize)})}});},//提交submit(){var cnt = tinymce.editors[this.tinyID].getContent();console.log(cnt);},//设置内容setContent(){tinymce.editors[this.tinyID].setContent('<div>这里就是需要展示的内容了哦</div>');},}}</script>
想要进一步了解功能的，可以查看TinyMCE中文文档：http://tinymce.ax-/
