Vue2中型编辑器插件

Vue2中型编辑器插件
插件名称 vue2-medium-editor
发布时间 2020年8月4日
插件作者 tui2tone

受中型启发的弹出式编辑器,支持图像上传器和描述。

安装和下载:

# Yarn
$ yarn add vue2-content-editor

# NPM
$ npm install vue2-content-editor --save

使用

添加到全局组件

import Vue from 'vue'
import MediumEditor from 'vue2-content-editor'

Vue.component('medium-editor', MediumEditor)

用法

<medium-editor :content='content' :options='options' />

<script>
export default {
    data() {
        return {
            content: "",
            options: {
            }
        }
    }
}
</script>

不要忘记在项目中包含CSS文件

medium-editor/dist/css/medium-editor.css
vue2-medium-editor/src/themes/default.css

Nuxt.js的用法

创建一个插件

import Vue from 'vue'
import MediumEditor from 'vue2-content-editor'

Vue.component('medium-editor', MediumEditor)

使用禁用ssr模式在nuxt.config.js中导入插件

plugins: [
    { src: '~/plugins/medium-editor', ssr: false },
]

包括一个CSS文件

css: [
    'medium-editor/dist/css/medium-editor.css',
    'vue2-medium-editor/src/themes/default.css'
]