一、安装
npm install @tinymce/tinymce-vue -S
二、封装建一个组件
<template>
<div>
<Editor
api-key="xxxxx"
tinymceScriptSrc="/tinymce/tinymce.min.js"
:init="{
language: 'zh_CN',
height: 500,
paste_data_images: true, // 允许粘贴图像
paste_webkit_styles: 'all',
automatic_uploads: true,
convert_urls: false,
image_caption: true,
content_style: `
*{
margin:0;
padding:0;
}
body{
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,
Microsoft Yahei, sans-serif !important;
}
h1,h2,h3,h4,h5,h6,h7{
font-size: 18px;
}
p,font{
font-size: 16px;
font-weight: 400;
color: #262626;
line-height: 24px;
text-align: justify;
word-break: break-all;
letter-spacing: 1.5px;
}
p{
text-indent:0;
margin:0;
}
strong span{
display: block;
}
div img,p img,img,span img{
width:50% !important;
height:auto;
text-align:center;
border-radius: 4px;
display: block;
margin: 15px auto 0 auto;
}
figcaption{
text-align:center !important;
margin: 20px 0 !important;
}
figure{
margin: 0 auto !important;
}
`,
toolbar: [
'image media video bold fontsize forecolor backcolor italic underline strikethrough styleselect fontsizeselect alignleft aligncenter alignright alignjustify outdent indent lineheight cut copy outdent indent undo redo blockquote table preview fullscreen',
],
menubar: false,
branding: false,
fontsize_formats: '11px 12px 14px 16px 17px 18px 24px 36px 48px',
lineheight_formats: '10px 20px 30px 40px 50px 60px',
imagetools_toolbar: 'imageoptions',
file_picker_callback: file_picker_callback,
paste_preprocess: paste_preprocess,
init_instance_callback: init_instance_callback,
images_upload_handler: example_image_upload_handle,
urlconverter_callback: urlconverter_callback,
}"
v-model="content"
:plugins="['image', 'fullscreen', 'media', 'preview', 'paste']"
@change="handleChange"
>Editor>
div>
template>
<script lang="ts" setup<