<template>
|
<main>
|
<textarea :id="tinymceId"></textarea>
|
</main>
|
</template>
|
<script>
|
import tinymce from "tinymce/tinymce";
|
import "tinymce/skins/content/default/content.css";
|
import "tinymce/themes/silver";
|
import "tinymce/themes/silver/theme";
|
// import "tinymce/models/dom";
|
import "tinymce/icons/default/icons";
|
import "tinymce/plugins/table";
|
import "tinymce/plugins/lists";
|
import "tinymce/plugins/wordcount";
|
import "tinymce/plugins/image";
|
export default {
|
name: "teditor",
|
props: {
|
value: {
|
type: String,
|
default: (data) => {
|
return "";
|
},
|
},
|
baseUrl: {
|
type: String,
|
default: "",
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
plugins: {
|
type: [String, Array],
|
default: "lists table kityformula-editor",
|
}, //必填
|
toolbar: {
|
type: [String, Array],
|
default:
|
"codesample bold italic underline alignleft aligncenter alignright alignjustify | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat | kityformula-editor",
|
}, //
|
},
|
data() {
|
return {
|
tinymceId:
|
"vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""),
|
};
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
// process.env.VUE_APP_PUBLIC_PATH + "/tinymce/langs/zh_CN.js"
|
init() {
|
const _this = this
|
const initData = {
|
target: (this.container ? this.container : document).querySelector(
|
"#" + this.tinymceId
|
),
|
language_url:
|
process.env.VUE_APP_PUBLIC_PATH + "/tinymce/langs/zh_CN.js", // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
|
language: "zh_CN", //语言
|
skin_url: process.env.VUE_APP_PUBLIC_PATH + "/tinymce/skins/ui/oxide", // skin路径，具体路径看自己的项目
|
height: 400, //编辑器高度
|
branding: false, //是否禁用“Powered by TinyMCE”
|
menubar: "edit insert format table", //顶部菜单栏显示
|
image_dimensions: false, //去除宽高属性
|
plugins: this.plugins, //这里的数据是在props里面就定义好了的
|
toolbar: this.toolbar, //这里的数据是在props里面就定义好了的
|
font_formats:
|
"Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;", //字体
|
fontsize_formats: "11px 12px 14px 16px 18px 24px 36px 48px 64px 72px", //文字大小
|
// paste_convert_word_fake_lists: false, // 插入word文档需要该属性
|
paste_webkit_styles: "all",
|
paste_merge_formats: true,
|
nonbreaking_force_tab: false,
|
paste_auto_cleanup_on_paste: false,
|
promotion: false,
|
statusbar: false,
|
file_picker_types: "file",
|
content_css:
|
process.env.VUE_APP_PUBLIC_PATH +
|
"/tinymce/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
|
external_plugins: {
|
"kityformula-editor":
|
process.env.VUE_APP_PUBLIC_PATH +
|
"/tinymce/plugins/kityformula-editor/plugin.min.js",
|
},
|
// 文件上传
|
file_picker_callback: (callback, value, meta) => {
|
// Provide file and text for the link dialog
|
if (meta.filetype == "file") {
|
callback("mypage.html", { text: "My text" });
|
}
|
|
// Provide image and alt text for the image dialog
|
if (meta.filetype == "image") {
|
callback("myimage.jpg", { alt: "My alt text" });
|
}
|
|
// Provide alternative source and posted for the media dialog
|
if (meta.filetype == "media") {
|
callback("movie.mp4", { source2: "alt.ogg", poster: "image.jpg" });
|
}
|
},
|
init_instance_callback: (editor) => {
|
if(_this.value) {
|
editor.setContent(_this.value)
|
}
|
editor.on("NodeChange Change KeyUp SetContent",(e) => {
|
_this.$emit("getContent", editor.getContent())
|
});
|
},
|
};
|
tinymce.init(initData);
|
},
|
},
|
};
|
</script>
|
