vue编辑器组件_中型编辑器包装的Vue2组件

vue编辑器组件

Vue2中型编辑器 (Vue2 Medium Editor)

Vue2 component for Medium Editor wrapper with https://github.com/yabwe/medium-editor But all plugins are re-writing in Vue.js

适用于带有https://github.com/yabwe/medium-editor的中型编辑器包装的Vue2组件，但是所有插件都在Vue.js中重写

View demo 查看演示 Download Source 下载源

特征 (Features)

• Medium like editor

  中型编辑器

• Image uploader and description

  图片上传器和说明

  • Image width configable width for normal / expand / full screen sizing
    图像宽度可配置的宽度，用于常规/扩展/全屏尺寸

• Embed Gist

  嵌入要点

用法 (Usage)

安装 (Installation)

yarn add https://github.com/tui2tone/vue2-medium-editor

用法 (Usage)

add to global component

添加到全局组件

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

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

usage

用法

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

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

Don't forget to include css file in your project

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

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

Nuxt.js的用法 (Nuxt.js Usage)

create a plugins

创建一个插件

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

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

import a plugin in nuxt.config.js with disable ssr mode

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

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

include a css file

包括一个CSS文件

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

翻译自: https://vuejsexamples.com/vue2-component-for-medium-editor-wrapper/

vue编辑器组件