Vue使用tinymce富文本编辑器

1. 下载依赖
2. 引用依赖
3. 内置方法

"dependencies": {
    "@tinymce/tinymce-vue": "^3.0.1",
    "tinymce": "~5.5.0",
},

import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default"; //富文本工具栏图标
import "../../../static/tinymce/langs/zh_CN.js"; //汉化包

 <editor v-model="myValue" :init="init" :disabled="disabled">
                </editor>

<script>
components: {
    Editor
},
data() {
    return {
        init: {
                language: "zh_CN",
                skin_url: "/tinymce/skins/ui/oxide",
                height: "100%",
                fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
                plugins: this.plugins,
                toolbar: this.toolbar,
                branding: false,
                menubar: false
              },
		plugins: {
          type: [String, Array],
          default: "lists image media table wordcount"
        },
        toolbar: {	
          type: [String, Array],
          // lineheight 行高
          default:
            "lineheight | undo redo | fontsizeselect | fontselect |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat"
        },
        myValue: this.value,
    }
}
</script>

内置方法

 // 在光标后加入内容 content即为要添加的内容
tinymce.activeEditor.execCommand("mceInsertContent", false, conetent);
let selectContent = tinymce.activeEditor.selection.getContent({
    format: "text"
}); //加上参数就只获取文字
let selectContentHtml = tinymce.activeEditor.selection.getContent(); // 获取带标签的内容