This paper recordsvueusetinymce-vue

First install dependencies

npm i @tinymce/tinymce-vue -S

Note: When this article was recorded, the installed version was 4.0.0″ @tinymce/ tinymCE-vue “: “^4.0.0”, vUE version 3.0

“Vue” : “^ 3.0.0”, “vue – the router” : “^ 4.0.0-0” and “vuex” : “^ 4.0.0-0”

Packaging components

<template> <Editor :init="init" v-model="value" /> </template> <script> import Editor from "@tinymce/tinymce-vue"; Tinymce-vue import HTTP from "@/ HTTP "; Export default {name: "app", components: {Editor: Editor}, props: {content: {// Rich text content for component property bindings Type: String, default: ""}}, computed: {// Used to get and update values outside the component value: {get() {return this.content; }, set(newVal) { this.$emit("update:content", newVal); }}}, data() {return {init: {// language: "zh_CN", "autolink autosave save directionality code visualblocks visualchars fullscreen link table hr pagebreak nonbreaking toc insertdatetime advlist lists wordcount image imagetools textpattern noneditable quickbars emoticons", // Uploads: true, images_upload_handler: true, images_upload_handler: function(blobInfo, success) { let formData = new FormData(); formData.append("file", blobInfo.blob(), blobInfo.filename()); http({ url: "/upload/uploadFile", method: "post", data: formData }).then(res => { success(res.data); }); }, // Toolbar: "undo redo bold italic underline strikethrough fontselect fontsizeselect formatselect alignleft aligncenter alignright alignjustify outdent indent numlist bullist forecolor backcolor removeformat pagebreak emoticons fullscreen image link ", // use import to import importCss_append: true, // show technical support branding: false, height: 400, // Toolbar_mode: "wrap", contextmenu: "link image imagetools table" } }; }}; </script> <style lang="less" scoped></style>Copy the code

More Chinese: please refer to the website (http://tinymce.ax-z.cn/ official: https://www.tiny.cloud/docs/quick-start/