tinymce官方文档:http://tinymce.ax-z.cn/
允许上传本地视频
在init中加上如下代码,需要修改服务器上传地址。
file_picker_callback: (callback, value, meta) => {
if (meta.filetype == 'media') {
let input = document.createElement('input') //创建一个隐藏的input
input.setAttribute('type', 'file')
input.setAttribute('accept', '.mp4')
// let _this = this;
input.onchange = function() {
let file = this.files[0] //选取第一个文件
if (file.size / 1024 / 1024 > 10) {
//文件大于10M
_this.$message.error('文件大小超出10MB限制, 请压缩或降低文件质量! ')
return
}
// _this.uploadVideo(file, 'media') // 上传视频拿到url
//---------
let content = file
let formData = new FormData()
formData.append('file', content)
console.log(file, formData)
axios({
method: 'post',
//服务器上传地址
url: '/sys/upload/uploadFile',
data: formData,
headers: {
// 修改请求头
'Content-Type': 'multipart/form-data'
}
}).then(res => {
if (res.success) {
_this.resVideo = res.result.url
_this.uploaded = true
console.log(333, _this.uploaded)
callback(_this.resVideo, { title: file.name }) //将url显示在弹框输入框中
} else {
console.log(res.message)
_this.$message.warning(res.message)
}
})
}
//触发点击
input.click()
}
}
允许粘贴图片
导入import "tinymce/plugins/paste"
![](https://i-blog.csdnimg.cn/blog_migrate/7c32c48d3bd7a925b3d0265fd93ec33f.png)
init中添加paste_data_images: true,//图片是否可粘贴
这样即可实现粘贴图片。(不能粘贴doc文件中的图片)
工具栏添加字体字号行高颜色等
![](https://i-blog.csdnimg.cn/blog_migrate/93228f27b2c2504da40b845c233ed068.png)
init中添加如下代码
fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
font_formats: "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
lineheight_formats: '1 1.5 2 2.5 3 3.5 4 4.5 5',
//配置默认字体
setup: function(editor) {
editor.on('init', function(ed) {
ed.target.editorCommands.execCommand("fontName", false, "微软雅黑");
});
},
ul和ol显示时会超出div 怎么设缩进?
一般情况下,ul是有这个属性的,所以会显示缩进。
![](https://i-blog.csdnimg.cn/blog_migrate/25a21f90581b3c23c0873dc42dafc1c8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/187cdaaf9cc95338827b10afbffbab6c.png)
自己项目中ul默认没有这个属性,因此需要加上。
![](https://i-blog.csdnimg.cn/blog_migrate/600d655a4a24698a11101940625ee1f5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/33696bc7a7191998caae613406626b7f.png)
/deep/ .contentBox ul{
padding-inline-start: 40px !important;
}
/deep/ .contentBox ol{
padding-inline-start: 40px !important;
}
图片超出div怎么处理?
将图片的最大宽度设为100%,高度自适应即可。
/deep/ .contentBox img {
max-width: 100% !important;
height: auto !important;
}