vue中使用tinymcevue创建富文本编辑器组件，安卓内存监控悬浮窗

/*

使用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; ‘’

},

},

}

• 第五步&＃xff1a;使用的组件

id&＃61;“editor”

ref&＃61;“editor”

v-model&＃61;“content”

:height&＃61;“realHeight”

&＃64;handleImgUpload&＃61;“imgUpload”