当前位置：首页 > news >正文

vue3 tinymce7版本完美适配基本需求（特殊需求外）

news 2025/2/21 3:23:55

直接上代码然后根据自己需求来调整代码内的toolbar功能设置
另外添加两个没有plugin的插件首行缩进以及调整段落大小（目前没有太细看文档不入门也不太好看懂～）我这是从版本4升级到6的
已解决弹窗上使用问题
后面会出个相关配置文档的

代码

<template><div class="tinymce-boxz"><Editor v-model="content" :api-key="apiKey" :init="init" /></div>
</template><script>
import Editor from '@tinymce/tinymce-vue';
import { reactive, ref, toRefs, watchEffect } from 'vue';
import axios from 'axios';
export default {name: 'Tinymce',components: {Editor,},props: {//默认值modelValue: {type: String,default: '',},},setup(props, context) {const content = ref(props.modelValue);// 监听 props.modelValue，确保父组件数据变化时同步到本地watch(() => props.modelValue,(newValue) => {content.value = newValue;});// 监听本地 content 值的变化，向父组件发出更新事件watchEffect(() => {context.emit('update:modelValue', content.value);});const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/common/uploadOneFileToQiniu');const tiny = reactive({apiKey: '9i8khq1jzwwj7hda35fpc0q1e14zsb4ev23vaif34nqif0fw', //https://github.com/tinymce/tinymce-vue/blob/main/src/demo/views/Iframe.vueinit: {language: 'zh_CN', //语言类型placeholder: '在这里输入文字', //textarea中的提示信息min_width: 320,min_height: 220,height: 500, //注：引入autoresize插件时，此属性失效resize: 'both', //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号branding: false, //tiny技术支持信息是否显示// statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示// elementpath: false, //元素路径是否显示font_size_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px',font_formats:'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', //字体样式plugins:' preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave emoticons  paragraphspacing', //插件配置 axupimgs indent2emtoolbar: ['fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | bullist numlist | blockquote subscript superscript removeformat ','styleselect formatselect fontselect fontsizeselect |  table image axupimgs media emoticons charmap hr pagebreak insertdatetime  selectall visualblocks searchreplace | code print preview |  lineheight formatpainter|fontsize | indent2em  | paragraphspacing  ',], //工具栏配置，设为false则隐藏external_plugins: {indent2em: '/plugins/tinymce/indent2em.js', // 本地插件路径（相对路径）},indent2em_val: '2em', // 插件的默认缩进值setup: function (editor) {// 段落间距插件editor.ui.registry.addMenuButton('paragraphspacing', {text: '段落间距',tooltip: '设置段落间距',fetch: function (callback) {const paragraphspacing = ['4px','6px','8px','10px','12px','14px','16px','18px','22px','24px','26px','28px','30px','32px',];let selectedItem = '0px';const items = paragraphspacing.map(function (item) {return {type: 'togglemenuitem',text: item,onAction: function () {selectedItem = item;editor.undoManager.transact(function () {editor.focus();editor.formatter.register({paragraphspacing: {block: 'p',styles: { margin: `${item} 0` },},});editor.formatter.apply('paragraphspacing', {value: item,});});},onSetup: function (api) {api.setActive(selectedItem === item);},};});callback(items);},});},// menubar: "file edit my1", //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”// images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了// images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.phppaste_data_images: true, //图片是否可粘贴//此处为图片上传处理函数images_upload_handler: (blobInfo, success, failure) => {// 这里用base64的图片形式上传图片,let reader = new FileReader(); //本地预览reader.readAsDataURL(blobInfo.blob());reader.onloadend = function () {const imgbase64 = reader.result;success(imgbase64);console.log(imgbase64, '图片地址');};},file_picker_types: 'file image media', //file image media分别对应三个类型文件的上传：link插件，image和axupimgs插件，media插件。想屏蔽某个插件的上传就去掉对应的参数// 文件上传处理函数file_picker_callback: function (callback, value, meta) {// meta.filetype  //根据这个判断点击的是什么file image medialet filetype; //限制文件的上传类型,需要什么就添加什么的后缀if (meta.filetype == 'image') {filetype = '.jpg, .jpeg, .png, .gif, .ico, .svg';} else if (meta.filetype == 'media') {filetype = '.mp3, .mp4, .avi, .mov';} else {filetype ='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4, .jpg, .jpeg, .png, .gif, .ico, .svg';}console.log(filetype, '类型', value, 'value');let inputElem = document.createElement('input'); //创建文件选择inputElem.setAttribute('type', 'file');inputElem.setAttribute('accept', filetype);inputElem.click();inputElem.onchange = () => {let file = inputElem.files[0]; // 获取文件对象if (!file) return; // 如果未选择文件，直接返回// 使用 FormData 上传文件let formData = new FormData();formData.append('file', file); // 假设服务端要求的字段名是 'file'// 上传到服务器axios.post(uploadUrl.value, formData, {headers: {'Content-Type': 'multipart/form-data',},}).then((res) => {console.log(res, '上传成功返回的文件 URL');// 成功后回调，将文件 URL 插入编辑器callback(res.data.url, { title: res.data.fileName });});};},},});//内容有变化，就更新内容，将值返回给父组件watchEffect(() => {context.emit('update:value', content.value);});return {content,...toRefs(tiny),};},
};
</script><style scoped>
.tinymce-boxz > textarea {display: none;
}
</style>
<style>
/* 隐藏apikey没有绑定这个域名的提示 */
.tox-notifications-container .tox-notification--warning {display: none !important;
}.tox.tox-tinymce {max-width: 100%;
}/* 在el-dialog中tinymce z-index 被太小而被遮挡时要加这两句 */
.tox-tinymce-aux {z-index: 99999 !important;
}.tinymce.ui.FloatPanel {z-index: 99;
}
</style>

插件文件indent2em

tinymce.PluginManager.add('indent2em', function(editor, url) {var pluginName='首行缩进';var global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools');var indent2em_val = editor.getParam('indent2em_val', '2em');var doAct = function () {var dom = editor.dom;var blocks = editor.selection.getSelectedBlocks();var act = '';global$1.each(blocks, function (block) {if(act==''){act = dom.getStyle(block,'text-indent')==indent2em_val ? 'remove' : 'add';}if( act=='add' ){dom.setStyle(block, 'text-indent', indent2em_val);}else{var style=dom.getAttrib(block,'style');var reg = new RegExp('text-indent:[\\s]*' + indent2em_val + ';', 'ig');style = style.replace(reg, '');dom.setAttrib(block,'style',style);}});};editor.ui.registry.getAll().icons.indent2em || editor.ui.registry.addIcon('indent2em','<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M170.666667 563.2v-102.4H887.466667v102.4zM170.666667 836.266667v-102.4H887.466667v102.4zM512 290.133333v-102.4H887.466667v102.4zM238.933333 341.333333V136.533333l204.8 102.4z" fill="#2c2c2c" p-id="5210"></path></svg>');var stateSelectorAdapter = function (editor, selector) {return function (buttonApi) {return editor.selection.selectorChangedWithUnbind(selector.join(','), buttonApi.setActive).unbind;};};editor.ui.registry.addToggleButton('indent2em', {icon: 'indent2em',tooltip: pluginName,onAction: function () {doAct();},onSetup: stateSelectorAdapter(editor, ['*[style*="text-indent"]','*[data-mce-style*="text-indent"]',])});editor.ui.registry.addMenuItem('indent2em', {text: pluginName,onAction: function() {doAct();}});editor.addCommand('indent2em', doAct  );return {getMetadata: function () {return  {name: pluginName,url: "http://tinymce.ax-z.cn/more-plugins/indent2em.php",};}};
});