|
|
@@ -1,176 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="tinymce-container editor-container">
|
|
|
- <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import plugins from './plugins'
|
|
|
-import toolbar from './toolbar'
|
|
|
-import { createStorage } from '@/api/storage'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'tinymce',
|
|
|
- props: {
|
|
|
- id: {
|
|
|
- type: String
|
|
|
- },
|
|
|
- value: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- toolbar: {
|
|
|
- type: Array,
|
|
|
- required: false,
|
|
|
- default() {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- menubar: {
|
|
|
- default: 'file edit insert view format table'
|
|
|
- },
|
|
|
- height: {
|
|
|
- type: Number,
|
|
|
- required: false,
|
|
|
- default: 360
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- hasChange: false,
|
|
|
- hasInit: false,
|
|
|
- tinymceId: this.id || 'vue-tinymce-' + +new Date()
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- value(val) {
|
|
|
- if (!this.hasChange && this.hasInit) {
|
|
|
- this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val))
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.initTinymce()
|
|
|
- },
|
|
|
- activated() {
|
|
|
- this.initTinymce()
|
|
|
- },
|
|
|
- deactivated() {
|
|
|
- this.destroyTinymce()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initTinymce() {
|
|
|
- const _this = this
|
|
|
- window.tinymce.init({
|
|
|
- selector: `#${this.tinymceId}`,
|
|
|
- height: this.height,
|
|
|
- language: 'zh_CN',
|
|
|
- body_class: 'panel-body ',
|
|
|
- object_resizing: false,
|
|
|
- toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
|
|
|
- menubar: this.menubar,
|
|
|
- plugins: plugins,
|
|
|
- end_container_on_empty_block: true,
|
|
|
- powerpaste_word_import: 'clean',
|
|
|
- code_dialog_height: 450,
|
|
|
- code_dialog_width: 1000,
|
|
|
- advlist_bullet_styles: 'square',
|
|
|
- advlist_number_styles: 'default',
|
|
|
- default_link_target: '_blank',
|
|
|
- link_title: false,
|
|
|
- init_instance_callback: editor => {
|
|
|
- if (_this.value) {
|
|
|
- editor.setContent(_this.value)
|
|
|
- }
|
|
|
- _this.hasInit = true
|
|
|
- editor.on('NodeChange Change KeyUp', () => {
|
|
|
- this.hasChange = true
|
|
|
- this.$emit('input', editor.getContent({ format: 'raw' }))
|
|
|
- })
|
|
|
- },
|
|
|
- images_upload_handler: function(blobInfo, success, failure) {
|
|
|
- const formData = new FormData()
|
|
|
- formData.append('file', blobInfo.blob())
|
|
|
- createStorage(formData).then(res => {
|
|
|
- success(res.data.data.url)
|
|
|
- }).catch(() => {
|
|
|
- failure('上传失败,请重新上传')
|
|
|
- })
|
|
|
- }
|
|
|
- // 整合七牛上传
|
|
|
- // images_dataimg_filter(img) {
|
|
|
- // setTimeout(() => {
|
|
|
- // const $image = $(img);
|
|
|
- // $image.removeAttr('width');
|
|
|
- // $image.removeAttr('height');
|
|
|
- // if ($image[0].height && $image[0].width) {
|
|
|
- // $image.attr('data-wscntype', 'image');
|
|
|
- // $image.attr('data-wscnh', $image[0].height);
|
|
|
- // $image.attr('data-wscnw', $image[0].width);
|
|
|
- // $image.addClass('wscnph');
|
|
|
- // }
|
|
|
- // }, 0);
|
|
|
- // return img
|
|
|
- // },
|
|
|
- // images_upload_handler(blobInfo, success, failure, progress) {
|
|
|
- // progress(0);
|
|
|
- // const token = _this.$store.getters.token;
|
|
|
- // getToken(token).then(response => {
|
|
|
- // const url = response.data.qiniu_url;
|
|
|
- // const formData = new FormData();
|
|
|
- // formData.append('token', response.data.qiniu_token);
|
|
|
- // formData.append('key', response.data.qiniu_key);
|
|
|
- // formData.append('file', blobInfo.blob(), url);
|
|
|
- // upload(formData).then(() => {
|
|
|
- // success(url);
|
|
|
- // progress(100);
|
|
|
- // })
|
|
|
- // }).catch(err => {
|
|
|
- // failure('出现未知问题,刷新页面,或者联系程序员')
|
|
|
- // console.log(err);
|
|
|
- // });
|
|
|
- // },
|
|
|
- })
|
|
|
- },
|
|
|
- destroyTinymce() {
|
|
|
- if (window.tinymce.get(this.tinymceId)) {
|
|
|
- window.tinymce.get(this.tinymceId).destroy()
|
|
|
- }
|
|
|
- },
|
|
|
- setContent(value) {
|
|
|
- window.tinymce.get(this.tinymceId).setContent(value)
|
|
|
- },
|
|
|
- getContent() {
|
|
|
- window.tinymce.get(this.tinymceId).getContent()
|
|
|
- },
|
|
|
- imageSuccessCBK(arr) {
|
|
|
- const _this = this
|
|
|
- arr.forEach(v => {
|
|
|
- window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- this.destroyTinymce()
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.tinymce-container {
|
|
|
- position: relative
|
|
|
-}
|
|
|
-.tinymce-textarea {
|
|
|
- visibility: hidden;
|
|
|
- z-index: -1;
|
|
|
-}
|
|
|
-.editor-custom-btn-container {
|
|
|
- position: absolute;
|
|
|
- right: 4px;
|
|
|
- top: 4px;
|
|
|
- /*z-index: 2005;*/
|
|
|
-}
|
|
|
-.editor-upload-btn {
|
|
|
- display: inline-block;
|
|
|
-}
|
|
|
-</style>
|