|
|
@ -1,5 +1,6 @@ |
|
|
|
<template> |
|
|
|
<editor v-model="content" tag-name="div" :init="init" /> |
|
|
|
<editor id="editors" v-model="content" tag-name="div" :init="init" /> |
|
|
|
<!-- <textarea id="editors" v-model="content" /> --> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
@ -66,6 +67,7 @@ export default { |
|
|
|
let token = this.getUserToken(); |
|
|
|
|
|
|
|
let init = { |
|
|
|
selector: '#editors', |
|
|
|
language_url: require("./zh_CN.js"), // 中文语言包路径 |
|
|
|
language: "zh_CN", |
|
|
|
skin_url: require("tinymce/skins/ui/oxide/skin.css"), // 编辑器皮肤样式 |
|
|
@ -78,6 +80,7 @@ export default { |
|
|
|
toolbar_mode: "none", |
|
|
|
toolbar_drawer: "sliding", |
|
|
|
toolbar_mode: "sliding", |
|
|
|
outputFormat: 'p', |
|
|
|
plugins: |
|
|
|
"wordcount visualchars visualblocks toc textpattern template tabfocus spellchecker searchreplace save quickbars print preview paste pagebreak noneditable nonbreaking media insertdatetime importcss imagetools image hr help fullscreen fullpage directionality codesample code charmap link code table lists advlist anchor autolink autoresize autosave", // 插件需要import进来 |
|
|
|
toolbar: |
|
|
@ -150,7 +153,9 @@ export default { |
|
|
|
revert_data, |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() {}, |
|
|
|
mounted() { |
|
|
|
tinymce.init(this.init) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
vModel(editor) { |
|
|
|
// 控制连续写入时setContent的触发频率 |
|
|
@ -159,16 +164,32 @@ export default { |
|
|
|
if (editor && val !== prevVal && val !== editor.getContent()) { |
|
|
|
if (typeof val !== "string") val = val.toString(); |
|
|
|
debounceSetContent.call(editor, val); |
|
|
|
return |
|
|
|
} |
|
|
|
// debounceSetContent.call(editor, this.dormatHtml(val)); |
|
|
|
}); |
|
|
|
|
|
|
|
editor.on("change keyup undo redo", () => { |
|
|
|
// console.log('editor.getContent()---', editor.getContent({ format : 'p' })) |
|
|
|
const c = editor.getContent({ format : 'p' }) |
|
|
|
this.$emit("input", editor.getContent()); |
|
|
|
// debounce(500, this.$emit("input", editor.getContent({ format : 'p' }))); |
|
|
|
; |
|
|
|
}); |
|
|
|
editor.on("blur", () => { |
|
|
|
// console.log('editor.blur--', editor.getContent({ format : 'p' })) |
|
|
|
// editor.getContent(editor.getContent({ format : 'p' })) |
|
|
|
this.$emit("blur"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
dormatHtml(content) { |
|
|
|
let c = '' |
|
|
|
if (content.indexOf('DOCTYPE') != -1) { |
|
|
|
c = content.slice(45, -16); |
|
|
|
} |
|
|
|
console.log('content', typeof content) |
|
|
|
return c || content |
|
|
|
}, |
|
|
|
getUserToken() { |
|
|
|
return localStorage.getItem("token"); |
|
|
|
}, |
|
|
|