tinymce富文本在vue3中使用
tinymce富文本api说明
基于vue3的tinymce富文本
快速上手
1、引入tinymce
npm install tinymce
npm install @tinymce/tinymce-vue
2、将tinymce静态资源包复制到public中（其中包括皮肤和中文包）
3、将封装好的组件Tinymce包复制到components文件夹中
API
| 参数 | 说明 | 类型 | 初始值 |
|---|---|---|---|
| value | 富文本内容 | String | |
| toolbar | 工具栏配置 | String, Array | 自行查看代码配置 |
| toolbar | 插件配置 | String, Array | 自行查看代码配置 |
| height | 富文本高度 | Number, String | 400 |
| width | 富文本宽度 | Number, String | auto |
| imageUploadUrl | 上传图片地址 | String | |
| videoUploadUrl | 上传视频地址 | String | |
| options | 一些配置包括readonly | object | {} |
事件
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 富文本内容变化时的回调 | function(value) |
注意：配置了imageUploadUrl和videoUploadUrl接口地址才能使用接口上传图片和视频功能
组件简单使用
<Tinymce v-model:value="value" />
import { Tinymce } from '/@/components/Tinymce/index';
配置 上传了+禁用+宽高
<Tinymce
v-model:value="value"
:imageUploadUrl="imageUploadUrl"
:videoUploadUrl="videoUploadUrl"
:options="{ readonly: true }"
@change="handleChange"
/>
封装代码
<template>
<div :class="prefixCls" :style="{ width: containerWidth }">
<textarea
:id="tinymceId"
ref="elRef"
:style="{ visibility: 'hidden' }"
v-if="!initOptions.inline"
></textarea>
<slot v-else></slot>
</div>
</template>
<script lang="ts">
import type { Editor, RawEditorSettings } from 'tinymce';
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/icons/default/icons';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/code';
import 'tinymce/plugins/codesample';
import 'tinymce/plugins/directionality';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/media';
import 'tinymce/plugins/nonbreaking';
import 'tinymce/plugins/noneditable';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/print';
import 'tinymce/plugins/save';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/spellchecker';
import 'tinymce/plugins/tabfocus';
import 'tinymce/plugins/table';
import 'tinymce/plugins/template';
import 'tinymce/plugins/textpattern';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/visualchars';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/image';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/imagetools';
import 'tinymce/plugins/help';
import 'tinymce/plugins/quickbars';
import 'tinymce/plugins/importcss';
import 'tinymce/plugins/toc';
import 'tinymce/plugins/emoticons';
import {
defineComponent,
computed,
nextTick,
ref,
unref,
watch,
onDeactivated,
onBeforeUnmount,
PropType,
} from 'vue';
import ImgUpload from './ImgUpload.vue';
import { toolbar, plugins } from './tinymce';
import { buildShortUUID } from '/@/utils/uuid';
import { bindHandlers } from './helper';
import { onMountedOrActivated } from '@vben/hooks';
import { useDesign } from '/@/hooks/web/useDesign';
import { isNumber } from '/@/utils/is';
import { useLocale } from '/@/locales/useLocale';
import { useAppStore } from '/@/store/modules/app';
import { useUserStoreWithOut } from '/@/store/modules/user';
const tinymceProps = {
options: {
type: Object as PropType<Partial<RawEditorSettings>>,
default: () => ({}),
},
value: {
type: String,
},
toolbar: {
type: [String, Array] as PropType<string | string[]>,
default: toolbar,
},
plugins: {
type: [String, Array] as PropType<string | string[]>,
default: plugins,
},
height: {
type: [Number, String] as PropType<string | number>,
required: false,
default: 400,
},
width: {
type: [Number, String] as PropType<string | number>,
required: false,
default: 'auto',
},
// 上传图片的url
imageUploadUrl: {
type: String,
required: false,
},
// 上传视频接口
videoUploadUrl: {
type: String,
required: false,
},
};
export default defineComponent({
name: 'Tinymce',
components: { ImgUpload },
inheritAttrs: false,
props: tinymceProps,
emits: ['change', 'update:value', 'inited', 'init-error'],
setup(props, { emit, attrs }) {
const userStore = useUserStoreWithOut();
const editorRef = ref<Nullable<Editor>>(null);
const fullscreen = ref(false);
const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
const elRef = ref<Nullable<HTMLElement>>(null);
const { prefixCls } = useDesign('tinymce-container');
const appStore = useAppStore();
const containerWidth = computed(() => {
const width = props.width;
if (isNumber(width)) {
return `${width}px`;
}
return width;
});
const skinName = computed(() => {
return appStore.getDarkMode === 'light' ? 'oxide' : 'oxide-dark';
});
const langName = computed(() => {
const lang = useLocale().getLocale.value;
return ['zh_CN', 'en'].includes(lang) ? lang : 'zh_CN';
});
// 如果传递了上传接口地址就展示接口上传功能
const updateMedia = () => {
const { imageUploadUrl, videoUploadUrl } = props;
let result = {};
if (imageUploadUrl) {
result.images_upload_handler = function (blobInfo, succFun, failFun) {
let xhr, formData;
let file = blobInfo.blob(); // 转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', imageUploadUrl);
xhr.setRequestHeader('zj-unicom-token', userStore.getToken);
xhr.onload = function () {
let json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
succFun(json.data);
};
formData = new FormData();
formData.append('file', file, file.name);
xhr.send(formData);
};
}
if (videoUploadUrl) {
result.file_picker_callback = function (callback) {
// 模拟出一个input用于添加本地文件
let input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', '.mp3, .mp4');
input.click();
input.onchange = function () {
let file = this.files[0];
let xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', videoUploadUrl);
xhr.setRequestHeader('zj-unicom-token', userStore.getToken);
xhr.onload = function () {
let json = JSON.parse(xhr.responseText);
if (xhr.status != 200 || json.code != 200) {
callback(json.message || '上传失败');
return;
}
callback(json.data);
};
let formData = new FormData();
formData.append('file', file, file.name);
xhr.send(formData);
};
};
}
return result;
};
const initOptions = computed((): RawEditorSettings => {
const { height, options, toolbar, plugins } = props;
const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
return {
selector: `#${unref(tinymceId)}`,
height,
toolbar,
menubar: 'file edit insert view format table',
plugins,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px',
language_url: publicPath + 'resource/tinymce/langs/' + langName.value + '.js',
language: langName.value,
branding: false,
default_link_target: '_blank',
link_title: false,
object_resizing: false,
auto_focus: true,
skin: skinName.value,
skin_url: publicPath + 'resource/tinymce/skins/ui/' + skinName.value,
content_css:
publicPath + 'resource/tinymce/skins/ui/' + skinName.value + '/content.min.css',
...options,
setup: (editor: Editor) => {
editorRef.value = editor;
editor.on('init', (e) => initSetup(e));
},
deprecation_warnings: false,
automatic_uploads: false,
file_picker_types: 'media',
...updateMedia(),
};
});
const disabled = computed(() => {
const { options } = props;
const getDisabled = (options && Reflect.get(options, 'readonly')) || attrs.disabled;
const editor = unref(editorRef);
if (editor) {
editor.setMode(getDisabled ? 'readonly' : 'design');
}
return !!getDisabled || false;
});
watch(
() => attrs.disabled,
() => {
const editor = unref(editorRef);
if (!editor) {
return;
}
editor.setMode(attrs.disabled ? 'readonly' : 'design');
},
);
watch(
() => editorRef.value,
() => {
const editor = unref(editorRef);
if (!editor) {
return;
}
editor.setMode(attrs.disabled ? 'readonly' : 'design');
},
);
watch(
() => appStore.getDarkMode,
() => {
destroy();
initEditor();
},
);
onMountedOrActivated(() => {
if (!initOptions.value.inline) {
tinymceId.value = buildShortUUID('tiny-vue');
}
nextTick(() => {
setTimeout(() => {
initEditor();
}, 30);
});
});
onBeforeUnmount(() => {
destroy();
});
onDeactivated(() => {
destroy();
});
function destroy() {
if (tinymce !== null) {
tinymce?.remove?.(unref(initOptions).selector!);
}
}
function initEditor() {
const el = unref(elRef);
if (el) {
el.style.visibility = '';
}
tinymce
.init(unref(initOptions))
.then((editor) => {
emit('inited', editor);
})
.catch((err) => {
emit('init-error', err);
});
}
function initSetup(e) {
const editor = unref(editorRef);
if (!editor) {
return;
}
const value = props.value || '';
editor.setContent(value);
bindModelHandlers(editor);
bindHandlers(e, attrs, unref(editorRef));
}
function setValue(editor: Recordable, val: string, prevVal?: string) {
if (
editor &&
typeof val === 'string' &&
val !== prevVal &&
val !== editor.getContent({ format: attrs.outputFormat })
) {
editor.setContent(val);
}
}
function bindModelHandlers(editor: any) {
const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
watch(
() => props.value,
(val: string, prevVal: string) => {
setValue(editor, val || '', prevVal);
},
{
immediate: true,
},
);
editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
const content = editor.getContent({ format: attrs.outputFormat });
emit('update:value', content);
emit('change', content);
});
editor.on('FullscreenStateChanged', (e) => {
fullscreen.value = e.state;
});
}
function handleInsertImg(url: string) {
const editor = unref(editorRef);
if (!editor || !url) {
return;
}
editor.execCommand('mceInsertContent', false, `<img src="${url}"/>`);
const content = editor?.getContent() ?? '';
setValue(editor, content);
}
function handleImageUploading(name: string) {
const editor = unref(editorRef);
if (!editor) {
return;
}
editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
const content = editor?.getContent() ?? '';
setValue(editor, content);
}
function handleDone(name: string, url: string) {
const editor = unref(editorRef);
if (!editor) {
return;
}
const content = editor?.getContent() ?? '';
const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
setValue(editor, val);
}
function getUploadingImgName(name: string) {
return `[uploading:${name}]`;
}
return {
prefixCls,
containerWidth,
initOptions,
elRef,
tinymceId,
handleInsertImg,
handleImageUploading,
handleDone,
editorRef,
fullscreen,
disabled,
};
},
});
</script>
<style lang="less" scoped></style>
<style lang="less">
@prefix-cls: ~'@{namespace}-tinymce-container';
.@{prefix-cls} {
position: relative;
line-height: normal;
textarea {
visibility: hidden;
z-index: -1;
}
}
</style>
文件包
官网地址：http://tinymce.ax-z.cn/
2630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
