对Quill富文本插件上传图片修改,调整部分功能
对Quill富文本插件上传图片修改,调整部分功能
因为之前项目中有用到富文本的功能,所以就去研究了一下,富文本插件也挺多 比较推荐的就是quill 和ckeditor ,貌似ckeditor功能更为全面也更大, 但是quill有适配vue的quill-vue版本,而且项目上需要的功能也不是特别复杂所以就选了quill,下面说一些对quill的适配修改吧 ,可能对第一次用人来说会比较蒙蔽.还有一种说法富文本是所有前端组件最复杂最坑的一个,复杂度很高,所以要找到一个稳定靠谱的富文本工具也很难,所以尽量找一些比较靠谱坑少的富文本插件
import {quillEditor, Quill} from 'vue-quill-editor' //引入插件
const sizeStyle = Quill.import("attributors/style/size")
sizeStyle.whitelist = ["12px", "16px", "20px", "24px", "36px", "48px", "60px", "80px"]
Quill.register(sizeStyle, true) //配置更多字体大小选项
const Font = Quill.import('formats/font');
Font.whitelist = ['Arial', 'serif', 'sans-serif', 'SimSum', 'SimHei', 'YaHei', 'KaiTi', 'FangSong', 'YouYuan']; //引入更多字体
Quill.register(Font, true);
//由于quill的图片用的是base64的形式嵌入到文章中 ,这样不太符合我们的需求 ,所以对他进行了改造,通过绑定插件的图片上传点击事件来实现真正的图片上传 这里结合了element的上传图片组建 也可以自己写个上传组件
// 图片上传成功回调 插入到编辑器中
upScuccess(e, file, fileList) {
this.saving = false
this.fullscreenLoading = false
let vm = this
let url = ''
if (this.uploadType === 'image') { // 获得文件上传后的URL地址
url = this.ur + 'download/' + e.body[0]
} else if (this.uploadType === 'video') {
url = this.ur + 'download/' + e.body[0]
}
if (url != null && url.length > 0) { // 将文件上传后的URL地址插入到编辑器文本中
let value = url
// API: https://segmentfault.com/q/1010000008951906
// this.$refs.myTextEditor.quillEditor.getSelection();
// 获取光标位置对象，里面有两个属性，一个是index 还有 一个length，这里要用range.index，即当前光标之前的内容长度，然后再利用 insertEmbed(length, 'image', imageUrl)，插入图片即可。
vm.addRange = vm.$refs.myQuillEditor.quill.getSelection()
value = value.indexOf('http') !== -1 ? value : 'http:' + value
vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, Quill.sources.USER) // 调用编辑器的 insertEmbed 方法，插入URL
} else {
this.$message.error(`${vm.uploadType}插入失败`)
}
this.$refs['upload'].clearFiles() // 插入成功后清除input的内容
},
// 点击图片ICON触发事件
imgHandler(state) {
this.accept = 'image/*'
this.uploadType = 'image'
this.$nextTick(()=> {
this.addRange = this.$refs.myQuillEditor.quill.getSelection()
if (state) {
let fileInput = document.getElementById('imgInput')
fileInput.click() // 加一个触发事件
}
})
},
// 页面加载后执行 为编辑器的图片图标和视频图标绑定点击事件
以上对图片的字体,大小和图片上传做了处理 ,下面是我对字体颜色配置还有一些其他的配置的组件html部分
<el-upload
name="files"
:with-credentials="true"
class="upload-demo"
:action="ur + 'auth/upload'"
:data="{rank:3,docType:1}"
:on-success='upScuccess'
:on-error='errorUpload'
:before-upload='beforeUpload'
:accept="accept"
ref="upload"
style="display:none">
<el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,请稍候">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> //实际接收上传图片的事件的组件
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
<div id="toolbar" slot="toolbar">
<!-- Add a bold button -->
<span class="ql-formats">
<select class="ql-size">
<option value="12px">12px</option>
<option selected>默认大小</option>
<option value="16px">16px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
<option value="36px">36px</option>
<option value="48px">48px</option>
<option value="60px">60px</option>
<option value="80px">80px</option>
</select>
<select class="ql-font">
<option selected="selected">默认字体</option>
<option value="SimHei">黑体</option>
<option value="YaHei">微软雅黑</option>
<option value="KaiTi">楷体</option>
<option value="SimSun">宋体</option>
<option value="FangSong">仿宋</option>
<option value="YouYuan">圆幼</option>
<option value="serif"></option>
<option value="monospace"></option>
</select>
</span>
<span class="ql-formats"><select class="ql-color">
<option selected="selected"></option>
<option value="#e60000"></option>
<option value="#ff9900"></option>
<option value="#ffff00"></option>
</select>
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
<button type="button" class="ql-underline"></button>
<button type="button" class="ql-blockquote"></button>
<button type="button" class="ql-strike"></button>
<button type="button" class="ql-code-block"></button>
<button type="button" class="ql-header" value="1"></button>
<button type="button" class="ql-header" value="2"></button>
</span>
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<span class="ql-formats">
<button type="button" class="ql-list" value="ordered"></button>
<button type="button" class="ql-list" value="bullet"></button>
</span>
<!-- Add font size dropdown -->
<!-- Add subscript and superscript buttons -->
<!-- You can also add your own -->
<span class="ql-formats"> <button type="button" class="ql-link"></button><button type="button"
class="ql-image"></button><button
type="button" class="ql-video"></button></span>
<span class="ql-formats"> <button type="button" class="ql-clean"></button></span>
</div>
</quill-editor>
//虽然配置项可以写在options里面 但是与由于一些自定义的选项不能写进去配置变量里,所以我都写成了html
由于字体的设置是以class的形式设置进去的 ,为了让富文本显示正确的字体,必须在css中写入这些类名的字体样式,还有很重要的一点,如果文章显示在其他的地方,一定要在那个位置写上同样的css,比如有其他项目得到了这些文本内容就需要写上下面这些css
#toolbar .ql-font span[data-label="Aref Ruqaa"]::before {
font-family: "Aref Ruqaa";
}
#toolbar .ql-font span[data-value="KaiTi"]::before {
font-family: "KaiTi";
}
#toolbar .ql-font span[data-value="SimSun"]::before {
font-family: "STSong";
}
#toolbar .ql-font span[data-value="YaHei"]::before {
font-family: "Microsoft Yahei";
}
#toolbar .ql-font span[data-value="SimHei"]::before {
font-family: "SimHei";
}
#toolbar .ql-font span[data-value="FangSong"]::before {
font-family: "FangSong";
}
#toolba .ql-font span[data-value="YouYuan"]::before {
font-family: "YouYuan";
}
//上面是对选项的字体的配置
/* Set content font-families */
.ql-font-KaiTi {
font-family: "KaiTi";
}
.ql-font-YaHei {
font-family: "Microsoft Yahei";
}
.ql-font-SimSun {
font-family: "SimSun";
}
.ql-font-SimHei {
font-family: "SimHei";
}
.ql-font-FangSong {
font-family: "FangSong";
}
.ql-font-YouYuan {
font-family: "YouYuan";
}
//真正文本的样式