Introduction to TinyMC Editor
TinyMCE is an easy-to-use and powerful WYSIWYG rich text editor. Compared with other rich text editors, it has rich plug-ins, supports multiple languages, can meet daily business needs, and is free.
TinyMCE Chinese documentation address: TinyMCE Chinese documentation Chinese manual
1. Installation
vue-cli version: 3.x+
1.Install tinymce
npm install tinymce -S2. Install tinymce
npm install @tinymce/tinymce-vue -S
After these two components are installed, create a new folder static/tinymce in the public directory. After the directory is created, find the tinymce/skins directory under the node_modules folder, and copy the skins directory to the static/tinymce folder we created. As shown below
vue-cli version: 2.x
1.Install tinymce
npm install tinymce -S2. Install tinymce-vue
npm install @tinymce/[email protected] -S Note: After installation, find the tinymce/skins directory in node_modules, and then copy the skins directory to the static directory; if it is a typescript project built using vue-cli 3.x, place it in the public directory. All static directories in this article are related Treat it this way
3. The default interface of tinymce is English, so you also need to download a Chinese language pack.
Then put this language pack in the static directory
This is how to put the vue-cli2 project
This is how to put the vue-cli3 project
2. Configure Chinese language
Go to the official website to download the Chinese language package zh_CN.js
Link: https://pan.baidu.com/s/1ZTxgZKt3bRVi_iWM9ds__g Extraction code: k94m After copying this content, open the Baidu Netdisk mobile app for more convenient operation.
Create a new langs folder in the static/tinymce folder you just created to store the Chinese language pack we downloaded, as shown in the figure below
vue-cli2.x is the same
3.Components
<template>
<!-- 富文本 -->
<div>
<editor v-model="content" :init="init" :disabled="disabled"></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";
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"
},
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 | fullscreen preview"
}
},
data() {
return {
//初始化配置
init: {
//menubar: true, // 菜单栏显隐
language_url: "/static/tinymce/langs/zh_CN.js",
//language_url: '../../static/tinymce/langs/zh_CN.js', // vue-cli2.x
language: "zh_CN",
skin_url: "/static/tinymce/skins/ui/oxide",
//skin_url: '../../static/tinymce/skins/ui/oxide', // vue-cli2.x
//content_css: '../../static/tinymce/skins/content/default/content.css',// vue-cli2.x
height: 770,
min_height: 770,
max_height: 770,
toolbar_mode: "wrap",
plugins: this.plugins,
toolbar: this.toolbar,
content_style: "p {margin: 5px 0;}",
fontsize_formats: "12px 14px 16px 18px 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,
// 图片上传
images_upload_handler: (blobInfo, success, failure) => {
// const img = 'data:image/jpeg;base64,' + blobInfo.base64()
// success(img)
const formData = new FormData()
formData.append('file', blobInfo.blob())
reserveTableFoodDescribe(formData).then(res => {
if (res.code === '10000') {
const file = res.data
success(file.url)
return
}
failure('上传失败')
}).catch(() => {
failure('上传出错')
})
}
},
content: this.value
};
},
mounted() {
tinymce.init({});
},
methods: {
},
watch: {
value(newValue) {
this.content = newValue;
},
content(newValue) {
this.$emit("input", newValue);
}
}
};
</script>
<style scoped lang="scss">
</style>4. Component usage
import Editor from "@/components/imcoder-tinymce";
components: { Editor },
<editor v-model="yourContent"></editor>