{
language: _this.language, // 顯示語種
selector: #${_this.tinymceId}, // 容器的id
height: _this.height, // 高度
body_class: 'panel-body ',
object_resizing: false, // 圖片和表格是否開啟在編輯器內部縮放
toolbar: _this.toolbar.length > 0 ? _this.toolbar : toolbar, // 工具欄，參數類型是個數組
menubar: _this.menubar, // 菜單欄的配置，也是數組
end_container_on_empty_block: true, // 如果在空的內部塊元素中按enter鍵，則此選項允許您拆分當前容器塊元素。
readonly : !_this.isEditable, // 是否只讀
powerpaste_word_import: 'clean', // 此設置控制如何篩選從Microsoft Word粘貼的內容
advlist_bullet_styles: 'square', //此選項允許您在默認bullist工具欄控件中包含特定的無序列表項標記 默認值：default,circle,disc,square
// 此選項允許您在默認的numlist工具欄控件中包含特定的有序列表項標記,默認值：default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman
advlist_number_styles: 'default',
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'], // 指定跨域地址
default_link_target: '_blank', // 鏈接默認打開方式
link_title: false, // 是否允許禁用鏈接對話框中的鏈接標題輸入字段
media_alt_source: false, // 是否允許禁用“介質”對話框中的“替代源”輸入字段
media_dimensions: false, // 是否允許您禁用“介質”對話框中的“尺寸”輸入字段
media_filter_html: false, // 是否允許禁用視頻/對象元素的XSS衛生過濾器
media_live_embeds: true, // 啟用此選項后，用戶將看到可編輯區域中嵌入視頻內容的實時預覽，而不是占位符圖像
media_poster: false,//是否允許您禁用“媒體”對話框中的“海報”輸入字段
forced_root_block: 'p', //根元素的標簽，最好使用p標簽，不使用p元素作為根塊會嚴重削弱編輯器的功能
force_p_newlines: true,//
importcss_append: true, // 如果設置為true，則此選項會將導入的樣式附加到“格式”菜單的末尾，並替換默認格式
content_style: content_style, // CONFIG: ContentStyle 這塊很重要， 在最后呈現的頁面也要寫入這個基本樣式保證前后一致， table和img的問題基本就靠這個來填坑了
insert_button_items: 'image', // 此選項的值應該是用空格分隔的菜單項控件標識符列表，或者對於菜單分隔符
// CONFIG: Paste
paste_retain_style_properties: 'all',
// word需要它
paste_word_valid_elements: '[]', // 此選項使您能夠配置特定於MS Office的有效_元素
paste_data_images: true,// 粘貼的同時能把內容里的圖片自動上傳，非常強力的功能
paste_convert_word_fake_lists: false,// 插入word文檔需要該屬性
paste_webkit_styles: 'all', //此選項允許您指定在WebKit中粘貼時要保留的樣式
paste_merge_formats: true, //此選項啟用粘貼插件的合並格式功能
paste_auto_cleanup_on_paste: false, //
nonbreaking_force_tab: true, // 此選項允許您在用戶按下鍵盤tab鍵時強制TinyMCE插入三個實體
file_brower_callback_type: 'media', // 此選項允許您使用空格或逗號分隔的類型名稱列表指定所需的文件選取器類型。目前有三種有效類型：文件、圖像和媒體
file_picker_types: 'media',// 此選項允許您通過空格或逗號分隔的類型名稱列表指定所需的文件選取器類型。目前有三種有效類型：文件、圖像和媒體
// CONFIG: Font
fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px 36pt',
// CONFIG: StyleSelect 樣式
style_formats: [
{
title: '首行縮進',
block: 'p',
styles: { 'text-indent': '2em' }
},
{
title: '行高',
items: [
{ title: '1', styles: { 'line-height': '1' }, inline: 'span' },
{ title: '1.5', styles: { 'line-height': '1.5' }, inline: 'span' },
{ title: '2', styles: { 'line-height': '2' }, inline: 'span' },
{ title: '2.5', styles: { 'line-height': '2.5' }, inline: 'span' },
{ title: '3', styles: { 'line-height': '3' }, inline: 'span' }
]
}
],
// FontSelect
font_formats: font_formats,
// Tab 此選項允許您指定當用戶在編輯器中按tab鍵時要聚焦的元素ID,您也可以使用特殊的“：prev”和“：next”值。然后將焦點放在DOM中TinyMCE實例之前/之后的上一個或下一個輸入元素上。
tabfocus_elements: ':prev,:next',
// Image
imagetools_toolbar: 'editimage', // 圖片控制的工具欄
plugins: plugins, // 使用到的插件，參數類型為數組
// 初始化編輯器實例時要執行的函數
init_instance_callback: editor => {
// do something
},
// 上傳 圖片 監聽
images_upload_handler: function(blobInfo, success, failure) {
// do something
},
// 點擊上傳 文件監聽
file_picker_callback: function(callback, value, meta) {
// 上傳視頻
if (meta.filetype == 'media') {
// 光標定位
window.tinyMCE.activeEditor.selection.setContent(<span id="${_this.tinymceId}_mouse_positioning"> </span>)
// 獲取 請求接口人員參數
const account = getStorageByKey('PAI-account')
const employeeObjId = account ? JSON.parse(account).employee.id : ''
// 創建 文件選擇標簽
var input = document.createElement('input')
input.setAttribute('type', 'file')
// 設置選擇文件后上傳事件
input.onchange = function() {
// 當前input選擇的文件
var file = this.files[0]
// 文件上傳參數
const fd = new FormData()
fd.append('file', file)
fd.append('groupId', employeeObjId)
// 文件上傳
axios({
url: 'zuul/file-rest/api/file/upload',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
data: fd
}).then(
res => {
if (res.responseCode === '100') {
// 獲取上傳成功后的文件地址
var a = ${window.location.protocol}${window.USER_IMG_URL}
let src = _this.imgId(a, res.relativePath)
// 獲取 tinymce 對象的 activeEditor
var obj = window.tinymce.activeEditor
// 獲取光標定位
var mouse_positioning = obj.dom.get(${_this.tinymceId}_mouse_positioning)
// 清空光標定位標記
obj.selection.select(mouse_positioning, false)
// 在定位處插入視頻
obj.selection.setContent(<p> <span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen" data-mce-p-frameborder="no" data-mce-p-scrolling="no" data-mce-p-src=${src} data-mce-html="%20"> <!-- muted 不要刪，解決chrom 瀏覽器自動播放問題 --> <video width="100%" muted loop="loop" controls="controls" autoplay="autoplay" @canplay="canplay"> <source src="${src}" type="video/mp4"/> <source src="" type="video/webm"/> </video> </span> </p>)
_this.$notify({
message: _this.$t('common.successUploadFile'),
type: 'success',
duration: 1500
})
}
}
).catch(
err => {
_this.$notify({
type: 'error',
duration: 1500,
message: _this.$t('common.failedUploadFile')
})
}
)
}
// 上傳
input.click()
}
},
// 允許指定將在呈現TinyMCE編輯器實例之前執行的回調
setup(editor) {
// do something
}
}