在vue2中怎么使用ckeditor，或者有其他的富文本编译器支持本地图片和视频上传？

Z时代
2024-02-12
分类：IT

回答：

推荐使用tinymce
http://tinymce.ax-z.cn/general/upload-images.php

回答：

ck官方支持vue2啊。。。ckeditor5-vue2

"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^27.1.0",
"@ckeditor/ckeditor5-vue2": "^1.0.5",}

main.js
---
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';import CKEditor  from '@ckeditor/ckeditor5-vue2';

editor.vue
---
<ckeditor
:editor="editor"
v-on:ready="editorReady"
v-model="body"
:config="editorConfig"
></ckeditor>
---
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
import CKEditor      from '@ckeditor/ckeditor5-vue2';
---
editorReady: function (editor) {
//调试存在一个报错 Input argument is not an HTMLInputElement
//但是是 lastpass 报的 @see https://stackoverflow.com/questions/55617318/textareaautosize-with-formik
editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
return new MyUploadAdapter(loader);
};},
---
/**
* 自定义上传图片插件
@see https://blog.csdn.net/mouday/article/details/107404734
*/
class MyUploadAdapter {
constructor(loader) {this.loader = loader;}
async upload() {
let data = new FormData();
data.append("file", await this.loader.file);
// 方法返回数据格式： {default: "url"}
let result = await helper.query('news_file', data);return {default: result,};}}

回答：

手上正好有个tinymce的例子：

<template>
    <div :id="editorId" >{{ value }}</div>
</template>
<script>
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/silver/theme.min'
    import 'tinymce/icons/default/icons.min'
    import 'tinymce/skins/ui/oxide/skin.min.css'
    import '../../assets/tiny-zh/zh_CN.js'
    import 'tinymce/plugins/image'
    import 'tinymce/plugins/imagetools'
    import 'tinymce/plugins/media'
    import 'tinymce/plugins/preview'
    import 'tinymce/plugins/link'
    import 'tinymce/plugins/code'
    import 'tinymce/plugins/table'
    import 'tinymce/plugins/print'
    import 'tinymce/plugins/fullscreen'
    import 'tinymce/plugins/hr'
    import 'tinymce/plugins/textpattern'
    import 'tinymce/plugins/lists'
    import 'tinymce/plugins/advlist'
    import 'tinymce/plugins/searchreplace'
    import 'tinymce/plugins/help'
    import 'tinymce/plugins/wordcount'
    export default {
        name: "TinyEditor",
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            height: {
                default: 300,
                type: Number
            },
            uploadImg: {
                default: (blobInfo, success, failure, progress) => {
                    return;
                }
            },
            placeholder: {
                default: '请输入',
                type: String
            },
            value: {
                default: '',
                type: String
            }
        },
        data() {
            return {
                editor: null,
                editorId: 'tinyEditor_' + Math.random().toString().replace('.',''),
            }
        },
        mounted() {
            this.create();
        },
        methods: {
            create() {
                const _this = this;
                tinymce.init({
                    selector: `#${this.editorId}`,
                    language:'zh_CN',
                    height: this.height,
                    placeholder: this.placeholder,
                    inline: false,
                    plugins :
                        'image imagetools preview link code table print fullscreen hr textpattern lists advlist searchreplace help media wordcount',
                    toolbar:
                        'searchreplace |' +
                        ' undo redo |' +
                        ' bold italic |' +
                        ' formatselect forecolor backcolor quickimage |' +
                        ' alignleft aligncenter alignright |' +
                        ' table bullist numlist hr |' +
                        ' link image media|' +
                        ' fullscreen preview print ',
                    images_upload_handler: this.uploadImg,
                    setup: (editor) => {
                        editor.on('input change undo redo execCommand KeyUp', function(e) {
                            _this.$emit('change', editor.getContent());
                        })
                    }
                }).then(res => {
                    console.log(res);
                    this.editor = res[0];
                }).catch(() => {
                    this.editor = null;
                });
            },
            setData(HTML) {
                if (!this.editor) { return }
                this.editor.setContent(HTML);
                this.$emit('change', this.editor.getContent());
            },
            appendData(HTML) {
                if (!this.editor) { return }
                this.editor.execCommand('mceInsertContent', false, HTML);
                this.$emit('change', this.editor.getContent());
            },
            getData() {
                if (!this.editor) { return }
                return this.editor.getContent();
            },
            clearData() {
                if (!this.editor) { return }
                this.editor.setContent('');
                this.$emit('change', this.editor.getContent());
            },
            destroy() {
                if (!this.editor) { return }
                this.editor.destroy();
                this.editor = null;
            },
            setDisable() {
                if (!this.editor) { return }
                this.editor.setMode('readonly');
            },
            setEnable() {
                this.editor.setMode('design');
            },
        },
    }
</script>