【VUE】vue中TinyMCE图片 “data-mce-src” 属性的问题

原创

我是Superman丶 2022-12-13 10:28:19 博主文章分类：问题异常 ©著作权

文章标签 vue.js javascript 前端 ide 上传 文章分类 运维

©著作权归作者所有：来自51CTO博客作者我是Superman丶的原创作品，请联系作者获取转载授权，否则将追究法律责任

我正在用 tinyMCE 4.0.11,遇到些问题，因为它会给 img 标签添加一个 “data-mcee-src” 属性，这个属性会重写 “src” 属性。

比如我添加一个图片它的src=“http://example.com/img.jpg”，

它的“data-mce-src”属性就会自动在开始加一个“/”，变成 “/http://example.com/img.jpg”.

我怎样才能阻止 tinymce添加“data-mce-src”属性呢？

JEECGBOOT

src/components/Tinymce/src/Editor.vue

就是在tinyMCE初始化配置里添加两个参数，告诉插件说不要使用相对路径：

relative_urls: false, remove_script_host: false,

【VUE】vue中TinyMCE图片 “data-mce-src” 属性的问题_上传

{
language: _this.language, // 显示语种
selector: #${_this.tinymceId}, // 容器的id
height: _this.height, // 高度
body_class: \'panel-body \',
object_resizing: false, // 图片和表格是否开启在编辑器内部缩放
toolbar: _this.toolbar.length > 0 ? _this.toolbar : toolbar, // 工具栏，参数类型是个数组
menubar: _this.menubar, // 菜单栏的配置，也是数组
end_container_on_empty_block: true, // 如果在空的内部块元素中按enter键，则此选项允许您拆分当前容器块元素。
readonly : !_this.isEditable, // 是否只读
powerpaste_word_import: \'clean\', // 此设置控制如何筛选从Microsoft Word粘贴的内容
advlist_bullet_styles: \'square\', //此选项允许您在默认bullist工具栏控件中包含特定的无序列表项标记 默认值：default,circle,disc,square
// 此选项允许您在默认的numlist工具栏控件中包含特定的有序列表项标记,默认值：default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman
advlist_number_styles: \'default\',
imagetools_cors_hosts: [\'www.tinymce.com\', \'codepen.io\'], // 指定跨域地址
default_link_target: \'_blank\', // 链接默认打开方式
link_title: false, // 是否允许禁用链接对话框中的链接标题输入字段
media_alt_source: false, // 是否允许禁用“介质”对话框中的“替代源”输入字段
media_dimensions: false, // 是否允许您禁用“介质”对话框中的“尺寸”输入字段
media_filter_html: false, // 是否允许禁用视频/对象元素的XSS卫生过滤器
media_live_embeds: true, // 启用此选项后，用户将看到可编辑区域中嵌入视频内容的实时预览，而不是占位符图像
media_poster: false,//是否允许您禁用“媒体”对话框中的“海报”输入字段
forced_root_block: \'p\', //根元素的标签，***使用p标签，不使用p元素作为根块会严重削弱编辑器的功能
force_p_newlines: true,//
importcss_append: true, // 如果设置为true，则此选项会将导入的样式附加到“格式”菜单的末尾，并替换默认格式
content_style: content_style, // CONFIG: ContentStyle 这块很重要， 在最后呈现的页面也要写入这个基本样式保证前后一致， table和img的问题基本就靠这个来填坑了
insert_button_items: \'image\', // 此选项的值应该是用空格分隔的菜单项控件标识符列表，或者对于菜单分隔符
// CONFIG: Paste
paste_retain_style_properties: \'all\',
// word需要它
paste_word_valid_elements: \'[]\', // 此选项使您能够配置特定于MS Office的有效_元素
paste_data_images: true,// 粘贴的同时能把内容里的图片自动上传，非常强力的功能
paste_convert_word_fake_lists: false,// 插入word文档需要该属性
paste_webkit_styles: \'all\', //此选项允许您指定在WebKit中粘贴时要保留的样式
paste_merge_formats: true, //此选项启用粘贴插件的合并格式功能
paste_auto_cleanup_on_paste: false, //
nonbreaking_force_tab: true, // 此选项允许您在用户按下键盘tab键时强制TinyMCE插入三个实体
file_brower_callback_type: \'media\', // 此选项允许您使用空格或逗号分隔的类型名称列表指定所需的文件选取器类型。目前有三种有效类型：文件、图像和媒体
file_picker_types: \'media\',// 此选项允许您通过空格或逗号分隔的类型名称列表指定所需的文件选取器类型。目前有三种有效类型：文件、图像和媒体
// CONFIG: Font
fontsize_formats: \'10px 11px 12px 14px 16px 18px 20px 24px 36pt\',
// CONFIG: StyleSelect 样式
style_formats: [
{
title: \'首行缩进\',
block: \'p\',
styles: { \'text-indent\': \'2em\' }
},
{
title: \'行高\',
items: [
{ title: \'1\', styles: { \'line-height\': \'1\' }, inline: \'span\' },
{ title: \'1.5\', styles: { \'line-height\': \'1.5\' }, inline: \'span\' },
{ title: \'2\', styles: { \'line-height\': \'2\' }, inline: \'span\' },
{ title: \'2.5\', styles: { \'line-height\': \'2.5\' }, inline: \'span\' },
{ title: \'3\', styles: { \'line-height\': \'3\' }, inline: \'span\' }
]
}
],
// FontSelect
font_formats: font_formats,
// Tab 此选项允许您指定当用户在编辑器中按tab键时要聚焦的元素ID,您也可以使用特殊的“：prev”和“：next”值。然后将焦点放在DOM中TinyMCE实例之前/之后的上一个或下一个输入元素上。
tabfocus_elements: \':prev,:next\',
// Image
imagetools_toolbar: \'editimage\', // 图片控制的工具栏
plugins: plugins, // 使用到的插件，参数类型为数组
// 初始化编辑器实例时要执行的函数
init_instance_callback: editor => {
// do something
},
// 上传 图片 监听
images_upload_handler: function(blobInfo, success, failure) {
// do something
},
// 点击上传 文件监听
file_picker_callback: function(callback, value, meta) {
// 上传视频
if (meta.filetype == \'media\') {
// 光标定位
window.tinyMCE.activeEditor.selection.setContent(<span id="${_this.tinymceId}_mouse_positioning"> </span>)
// 获取 请求接口人员参数
const account = getStorageByKey(\'PAI-account\')
const employeeObjId = account ? JSON.parse(account).employee.id : \'\'
// 创建 文件选择标签
var input = document.createElement(\'input\')
input.setAttribute(\'type\', \'file\')
// 设置选择文件后上传事件
input.onchange = function() {
// 当前input选择的文件
var file = this.files[0]
// 文件上传参数
const fd = new FormData()
fd.append(\'file\', file)
fd.append(\'groupId\', employeeObjId)
// 文件上传
axios({
url: \'zuul/file-rest/api/file/upload\',
method: \'post\',
headers: {
\'Content-Type\': \'multipart/form-data\'
},
data: fd
}).then(
res => {
if (res.responseCode === \'100\') {
// 获取上传成功后的文件地址
var a = ${window.location.protocol}${window.USER_IMG_URL}
let src = _this.imgId(a, res.relativePath)
// 获取 tinymce 对象的 activeEditor
var obj = window.tinymce.activeEditor
// 获取光标定位
var mouse_positioning = obj.dom.get(${_this.tinymceId}_mouse_positioning)
// 清空光标定位标记
obj.selection.select(mouse_positioning, false)
// 在定位处插入视频
obj.selection.setContent(<p>                 <span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="no" data-mce-p-scrolling="no" data-mce-p-src=${src} data-mce-html="%20">                   <!-- muted 不要删，解决chrom 浏览器自动播放问题 -->                   <video width="100%" muted loop="loop" controls="controls" autoplay="autoplay" @canplay="canplay">                     <source src="${src}" type="video/mp4"/>                     <source src="" type="video/webm"/>                   </video>                 </span>               </p>)
_this.$notify({
message: _this.$t(\'common.successUploadFile\'),
type: \'success\',
duration: 1500
})
}
}
).catch(
err => {
_this.$notify({
type: \'error\',
duration: 1500,
message: _this.$t(\'common.failedUploadFile\')
})

      }
    )
  }
  // 上传
  input.click()
}
},
// 允许指定将在呈现TinyMCE编辑器实例之前执行的回调
setup(editor) {
// do something
}
}