/*
使用public本地库
*/
// 引入tinymce主件
import tinymce from ‘…/…/…/public/tinymce/tinymce’
// 引入tinymce-vue组件
import Editor from ‘&＃64;tinymce/tinymce-vue’
// 必须引入主体才能汉化和显示
import ‘…/…/…/public/tinymce/themes/silver’
import ‘…/…/…/public/tinymce/icons/default/icons’
// 引入富文本编辑器主题的js和css
import ‘…/…/…/public/tinymce/themes/silver/theme.min’
import ‘…/…/…/public/tinymce/skins/ui/oxide/skin.min.css’
// 扩展插件
import ‘…/…/…/public/tinymce/plugins/image’
import ‘…/…/…/public/tinymce/plugins/link’
import ‘…/…/…/public/tinymce/plugins/code’
import ‘…/…/…/public/tinymce/plugins/table’
import ‘…/…/…/public/tinymce/plugins/lists’
import ‘…/…/…/public/tinymce/plugins/wordcount’ // 字数统计插件
import ‘…/…/…/public/tinymce/plugins/media’ // 插入视频插件
import ‘…/…/…/public/tinymce/plugins/template’ // 模板插件
import ‘…/…/…/public/tinymce/plugins/fullscreen’
import ‘…/…/…/public/tinymce/plugin
s/paste’
import ‘…/…/…/public/tinymce/plugins/preview’
import ‘…/…/…/public/tinymce/plugins/contextmenu’
import ‘…/…/…/public/tinymce/plugins/textcolor’
export default {
name: ‘Tinymce’,
components: {
Editor,
},
props: {
height: {
type: Number,
default: 500,
},
id: {
type: String,
default: ‘tinymceEditor’,
},
value: {
type: String,
default: ‘’,
},
// plugins: {
// type: [String, Array],
// default:
// ‘link lists image code table wordcount media fullscreen preview paste contextmenu textcolor’,
// },
plugins: {
type: [String, Array],
default:
‘link lists image code table wordcount media fullscreen preview paste’,
},
toolbar: {
type: [String, Array],
default:
‘fontselect | bold italic underline strikethrough | link unlink image | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | removeformat’,
},
},
data() {
return {
editorInit: {
language_url: ‘tinymce/langs/zh_CN.js’,
language: ‘zh_CN’,
skin_url: ‘tinymce/skins/ui/oxide’,
content_css: ‘tinymce/skins/content/default/content.css’,
height: this.height,
content_style: ‘* { padding:0; margin:0; } img {max-width:100% !important }’,
plugin_preview_width: 375, // 预览宽度
plugin_preview_height: 668,
lineheight_val:
‘1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5’,
fontsize_formats: ‘8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt’,
font_formats:
“微软雅黑&＃61;‘微软雅黑’;宋体&＃61;‘宋体’;黑体&＃61;‘黑体’;仿宋&＃61;‘仿宋’;楷体&＃61;‘楷体’;隶书&＃61;‘隶书’;幼圆&＃61;‘幼圆’;Andale Mono&＃61;andale mono,times;Arial&＃61;arial,helvetica,sans-serif;Arial Black&＃61;arial black,avant garde;Book Antiqua&＃61;book antiqua,palatino;Comic Sans MS&＃61;comic sans ms,sans-serif;Courier New&＃61;courier new,courier;Georgia&＃61;georgia,palatino;Helvetica&＃61;helvetica;Impact&＃61;impact,chicago;Symbol&＃61;symbol;Tahoma&＃61;tahoma,arial,helvetica,sans-serif;Terminal&＃61;terminal,monaco;Times New Roman&＃61;times new roman,times;Trebuchet MS&＃61;trebuchet ms,geneva;Verdana&＃61;verdana,geneva;Webdings&＃61;webdings;Wingdings&＃61;wingdings”,
plugins: this.plugins,
powerpaste_word_import: ‘merge’,
toolbar: this.toolbar,
paste_data_images: true,
statusbar: true, // 底部的状态栏
menubar: true, // 最上方的菜单
branding: false, // 水印“Powered by TinyMCE”
convert_urls: false,//去除URL转换
images_upload_handler: (blobInfo, success, failure) &＃61;> {
this.$emit(‘handleImgUpload’, blobInfo, success, failure)
},
},
editorId: this.id,
newValue: ‘’,
}
},
watch: {
newValue(newValue) {
this.$emit(‘input’, newValue)
},
},
mounted() {
tinymce.init({})
},
beforeDestroy() {
this.clear()
tinymce.remove()
},
computed: {
editorValue: {
get() {
return this.value
},
set(val) {
this.newValue &＃61; val
},
},
},
methods: {
// https://github.com/tinymce/tinymce-vue &＃61;> All available events
clear() {
this.editorValue &＃61; ‘’
},
},
}
id&＃61;“editor”
ref&＃61;“editor”
v-model&＃61;“content”
:height&＃61;“realHeight”
&＃64;handleImgUpload&＃61;“imgUpload”
京公网安备 11010802041100号