TinyMCE相关问题总结

陈丽不想说话
1,057 阅读4分钟

1.安装相关 官方文档(英文)：www.tiny.cloud/docs/

中文文档：tinymce.ax-z.cn/configure/i…

在我们的vue项目中使用时，需要同时安装tinymce与@tinymce/tinymce-vue

npm install @tinymce/tinymce-vue tinymce

安装时需要注意版本，建议使用最新版，除非有特殊要求，比如tinymce@5.5.1版本的images_dataimg_filter不会去识别大写的PNG，导致选择后没有反应且无法处理报错，而tinymce@5.3.1的images_dataimg_filter可以识别但是对于其他非图片文件无法进行处理

安装后，在node_modules/tinymce/plugins下可以看到自带的所有插件

在需要的组件引入: import tinymce from 'tinymce/tinymce'; import Editor from '@tinymce/tinymce-vue'; import { zh_CN } from '@/components/tinymce_zh_CN'; import 'tinymce/skins/ui/oxide/skin.min.css'; import 'tinymce/skins/ui/oxide/content.inline.min.css'; import 'tinymce/icons/default'; import 'tinymce/themes/silver'; // 更多插件参考：www.tiny.cloud/docs/plugin… import 'tinymce/plugins/image'; // 插入上传图片插件 import 'tinymce/plugins/media'; // 插入视频插件 import 'tinymce/plugins/table'; // 插入表格插件 import 'tinymce/plugins/lists'; // 列表插件 import 'tinymce/plugins/link'; // 列表插件 import 'tinymce/plugins/preview'; // 预览 2.配置相关 基础配置有language，height，width，plugins，toolbar等

language：使用的语言，默认是英文，其他语言需要去下载对应的语言包然后放在固定的位置，国际化要注意 language: getLanguage(),

if (getLanguage() === 'zh_CN') {
  tinymce.addI18n('zh_CN', zh_CN);
} else {
  tinymce.addI18n('en_US', {});
}

	/**
 * 获取当前语言key值
 */
const getLanguageKey = () => {
  if (process.env.NODE_ENV === 'development') {
    return lang;
  }
  return JSON.parse(sessionStorage.getItem('wo_lang')).key;
};

height，width：宽高，可以设置为number(px为单位)或string(百分比)

width: {
    type: [Number, String],
    default: '100%'
},
height: {
    type: [Number, String],
    default: 300
},

plugins：插件，在node_modules/tinymce/plugins下可以看到自带的所有插件，或者独立安装，需要启用的需要在该配置项下配置，例如’preview lists image media table link’等

toolbar：工具栏配置，引入的插件不一定要显示，显示与否由该配置控制，格式为Array或String，用竖杠分割具体位置

fontsize_formats：使用fontselect插件之后的配置，可以选择的fontsize，‘8pt 10pt 12pt 14pt 18pt 24pt 36pt’

relative_urls：使用相对路径，默认是true，建议关闭

remove_script_host：使用当前页面的url时会移除前缀，默认true，建议关闭

link_assume_external_targets：使用link插件后的配置，可以配置’http’新增link后如果没有输入http://会自动补足

images_upload_handler：TinyMce提供的自定义图片上传，有这个配置时，图片上传弹框左边栏会多一个上传选项，不建议使用这个配置，会自动屏蔽掉不支持的图片格式，且不会走进这个方法，没有提示，不好处理，推荐使用file_picker_callback来处理

file_picker_callback：需要先配置file_picker_types，即支持上传的插件，比如media或link，配置之后链接输入框之后会多一个上传按钮，点击上传后会走到file_picker_callback方法里

// 文件上传处理函数
file_picker_callback: (callback, value, meta) => {
// 支持的拓展名
let filetype =
            '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3,.wav, .mp4,.3gp,.avi,.wmv,.rmvb,.apk';
// 文件格式，不建议直接使用拓展名判断，因为大小写问题，大写PNG与小写png都是image/png，需要注意的是，上传文档时doc与docx格式不同，excel也是
const imageTypeCheck =
'image/jpg, image/jpeg, image/png, image/gif, image/tif, image/bmp';
const videoTypeCheck = 'video/mp4, video/wav, audio/mpeg, audio/wav';
const fileTypeCheck =
 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, ' +
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel' +
            'application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation' +
            'application/pdf, application/vnd.ms-excel, text/xml, application/json, text/plain, application/msword' +
            'application/x-zip-compressed';
// 后端接收上传文件的地址,meta.filetype表示从哪个插件点进来
switch (meta.filetype) {
	case 'image':
		filetype = '.jpg, .jpeg, .png, .gif';
		break;
	case 'media':
		filetype = '.mp3,.wav, .mp4,.3gp,.avi,.wmv,.rmvb';
		break;
	case 'file':
	default:
}
// 创建一个type是file的input来接受文件
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', filetype);
input.click();
const that = this;
// 选取文件之后触发各种校验
input.onchange = function() {
const formData = new FormData();
const file = this.files[0];
const fileExtend = file.name
.substring(file.name.lastIndexOf('.'))
.toLowerCase();
// 文件类型校验
if (
meta.filetype === 'image' &&
!imageTypeCheck.includes(file.type)
) {
	that.$message.error(
	that.$t('cmp.contentMgnt.fileUploadTypeLimit')
);
return false;
}
if (
	meta.filetype === 'media' &&
	!videoTypeCheck.includes(file.type)
) {
	that.$message.error(
	that.$t('cmp.contentMgnt.fileUploadTypeLimit')
);
return false;
}
if (
	meta.filetype === 'file' &&
	!fileTypeCheck.includes(file.type)
) {
	that.$message.error(
	that.$t('cmp.contentMgnt.fileUploadTypeLimit')
);
return false;
}
// 文件大小校验
if (file.size <= 0) {
	that.$message.error(that.$t('cmp.upload.emptyFile'));
	return false;
}
const size = renderSize(file.size, 'MB');
if (meta.filetype === 'image' && size > 2) {
	that.$message.error(that.$t('cmp.contentMgnt.imgSizeLimit'));
	return false;
}
if (meta.filetype === 'media' && size > 500) {
	that.$message.error(
	that.$t('cmp.contentMgnt.fileSizeLimit', {
		a: 500
	})
);
return false;
}
if (meta.filetype === 'file' && size > 20) {
	that.$message.error(
	that.$t('cmp.contentMgnt.fileSizeLimit', {
		a: 20
	})
);
return false;
}
// 自定义上传函数
formData.append('object', file);
formData.append('randCode', RandCode.getInstance().getRandCode());
formData.append('bucketName', '');
that.loading = true;
let uploadFileFunction = generateUploadFileId;
if (fileExtend === '.txt') {
	uploadFileFunction = generateUploadTxtFileId;
}
// 上传接口
uploadFileFunction(formData).then(async resp => {
that.loading = false;
if (resp && resp.ret && resp.ret.code === 0) {
// 把接口返回结果推到父组件来处理objectId与Url的替换
	that.$emit('uploadData', resp);
	callback(resp.accessUrl);
} else {
	that.$message.error(that.$t('cmp.contentMgnt.uploadFail'));
	return false;
}
	await RandCode.getInstance().refreshRandCode();
	return true;
});
};
}
},

3.转码相关 建议使用encodeURIComponent转码,tinyMCE在可能会自动填入&的转码amp;需要注意一些额外出现的转码和url的处理，且转码后与后端java关于url的处理可能出现不一致

4.占位符 上传视频或者文件时可以设置默认占位符，文件一般会使用输入的文字，视频不设置时为空白，可以通过设置content_style配置项来修改，例如视频，可以修改mce-object-video样式：

content_style:
          '.mce-object-video{background: transparent url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A) no-repeat center;border: 1px solid #aaa;}',

5.上传相关 文件上传到后端后会返回url与objectId，url有效期5分钟，在保存与展示的时候需要相互替换

avatar
文章
阅读
粉丝