官网地址 wangEditor官网
工具栏配置
共有58个key
toolbarKeys: [
"bold","underline","italic","through","code","sub","sup","clearStyle","color",
"bgColor","fontSize","fontFamily","indent","delIndent",
"justifyLeft","justifyRight","justifyCenter","justifyJustify",
"lineHeight","insertImage","deleteImage","editImage","viewImageLink",
"imageWidth30","imageWidth50","imageWidth100","divider",
"emotion","insertLink","editLink","unLink","viewLink","codeBlock","blockquote","headerSelect","header1",
"header2","header3","header4","header5","todo","redo","undo","fullScreen","bulletedList",
"numberedList","insertTable","deleteTable","insertTableRow","deleteTableRow","insertTableCol",
"deleteTableCol","tableHeader","tableFullWidth",
"insertVideo","uploadVideo","uploadImage","codeSelectLang"
]
把所有工具栏列出来,就是下图:
解决ios无法选中的问题
div *{ -webkit-user-select:text; outline: none; }
div{ -webkit-user-select:text; outline: none; }
使用
模板
<template>
<view>
<!-- <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet" /> -->
<view class="bg-f46 radius10">
<Toolbar :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor style="height: 400px; overflow-y: hidden;" v-model="html"
:defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated"/>
</view>
</view>
</template>
script
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
export default {
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: '',
toolbarConfig: {
toolbarKeys: ['bold', 'underline', 'through', 'clearStyle', 'fontSize',
'indent', 'delIndent', 'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify',
'bulletedList', 'numberedList',
'uploadVideo', 'uploadImage','deleteImage', 'editImage'],
},
editorConfig: {
autoFocus: false,
placeholder: '请输入内容...' ,
hoverbarKeys: {
'image': {},
'video': {},
},
MENU_CONF: {
uploadImage: {},
uploadVideo: {}
}
},
mode: 'simple', // 'default' or 'simple'
};
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时,及时销毁编辑器
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor) // 一定要用 Object.seal() ,否则会报错
},
/** 初始化富文本编辑器 */
initEditor() {
let that=this;
// 上传图片
this.editorConfig.MENU_CONF['uploadImage'] = {
// 自定义上传
customBrowseAndUpload(insertFn) {
uni.chooseImage({
count: 1,
sourceType: ['camera','album'],
sizeType: ['compressed', 'original'],
success: (rey) => {
const tempFilePaths = rey.tempFilePaths[0]
uni.showLoading({ title: '上传中',mask: true });
uni.uploadFile({
url: that.uploadUrl,
filePath: tempFilePaths,
name: 'file',
success:(ret) =>{
var res=JSON.parse(ret.data);
uni.hideLoading();
if(res.code==1){
let str = res.data.split('/');
insertFn(res.data, str[str.length - 1], res.data);
} else{
that.toast(res.msg)
}
}
})
},
fail: (err) => { console.log(err.code) }
})
},
}
// 上传视频
this.editorConfig.MENU_CONF['uploadVideo'] = {
// 自定义上传
customBrowseAndUpload(insertFn) {
uni.chooseVideo({
count: 1,
sourceType: ['camera', 'album'],
success: function (rey) {
// console.log(rey.tempFile)
uni.showLoading({ title: '上传中',mask: true });
uni.uploadFile({
url: that.uploadUrl,
file: rey.tempFile,
fileType: 'video',
name: 'file',
success: (uploadFileRes) => {
let res = JSON.parse(uploadFileRes.data)
uni.hideLoading();
if(res.code==1){
insertFn(res.data, res.data+'?x-oss-process=video/snapshot,t_100,f_jpg')
} else{
that.toast(res.msg)
}
},
});
},
fail: (err) => { console.log(err.code) }
});
},
}
},
}
};
</script>