做一个富文本合同编辑的需求，发现从合同word文档上复制过来的文字都是宋体，但手动编辑添加上去的文字都是默认系统字体。为了优化用户体验所以要想办法修改默认字体。
<template>
<!-- 富文本 -->
<div>
<editor v-model="content" :init="init"></editor>
</div>
</template>
<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";// 字数统计
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";//颜色
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/link";//超链接
import "tinymce/plugins/advlist";//高级列表
import "tinymce/plugins/codesample";
import "tinymce/plugins/hr";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";//自动链接
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/template";
import "tinymce/plugins/charmap";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autoresize";
// 扩展插件
import "../../../static/tinymce/plugins/lineheight/plugin";
// import "../assets/tinymce/plugins/bdmap/plugin";
//上传图片接口 需修改成自己的
import minioApi from "@admin/api/epmsAdmin/minio/minioApi";
export default {
components: {
Editor,
},
props: {
value: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
plugins: {
type: [String, Array],
default:
"preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave autoresize code lineheight",
},
toolbar: {
type: [String, Array],
default:
"code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap hr pagebreak insertdatetime | code lineheight",
},
},
data() {
return {
//初始化配置
init: {
language_url: "/static/tinymce/langs/zh_CN.js",
language: "zh_CN",
skin_url: "/static/tinymce/skins/ui/oxide",
content_css: `/static//tinymce/skins/content/default/content.css`,
width: "21cm",
height: 650,
min_height: 650,
max_height: 650,
toolbar_mode: "wrap",
plugins: this.plugins,
toolbar: this.toolbar,
valid_elements:
"p[*],span[*],div[*],input[*],ul,ol,li,strong/b,em,h1,h2,h3,h4,h5,h6,table[*],tbody[*],tr[*],td[*],img[*],video[*]",
content_style: "p {margin: 5px 0;}",
fontsize_formats: "12px 14px 16px 18px 20px 24px 36px 48px 56px 72px",
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;",
branding: false,
menubar: false,
setup: function(editor){ //设置默认字体样式
editor.on('init', function(e) {
this.getBody().style.fontSize = '16px';
this.getBody().style.color = '#000';
this.getBody().style.fontFamily = '宋体';
});
},
//此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
let formdata = new FormData();
let blob = blobInfo.blob();
formdata.append("file", blob);
//需修改图片传输接口
minioApi.upload(formdata).then((res) => {
let url = this.$fileBaseUrl + res.data.url;
success(url);
});
// const img = "data:image/jpeg;base64," + blobInfo.base64();
// success(img);
}
},
content: this.value,
editorInstance: null,
};
},
mounted() {
tinymce.init({
content_style: "div {font-size:24px; color: #843FA1; font-famliy: impact,chicago;}"
});
this.editorInstance = tinymce;
},
methods: {
//往富文本插入内容
insert(text) {
// var elem = tinymce.activeEditor.dom.get("tinymce");
tinymce.activeEditor.execCommand("mceInsertContent", false, text);
},
},
watch: {
value(newValue) {
this.content = newValue;
},
content(newValue) {
this.$emit("input", newValue);
},
},
};
</script>
<style lang="scss">
.tox-tinymce-aux {
z-index: 5000 !important;
}
</style>
