vuejs medium editor

Vuejs中型编辑器

使用https://github.com/yabwe/medium-editor，vue 2和3 js组件，但所有插件都在vue.js中重新编写所有媒体编辑器配置。

演示

演示

特征

• 像编辑器这样的媒介
• 图像上传器和描述
  • 图像宽度可配置正常 /展开 /全屏尺寸的可配置宽度
  • imgur上传
• 嵌入要点
• 内联代码语法突出显示
• 嵌入视频
  • YouTube视频和短裤
  • Vimeo视频
  • 织机视频

用法

安装

 yarn add vuejs-medium-editor

# Vue 3
yarn add vuejs-medium-editor@next

或者

 npm install vuejs-medium-editor

# Vue 3
npm install vuejs-medium-editor@next

用法

在VUE 2中添加到全局组件

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

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

或VUE 3

 import { createApp } from 'vue'
import MediumEditor from 'vuejs-medium-editor'
import App from './App.vue'

const app = createApp ( App )

app . component ( 'medium-editor' , MediumEditor )
app . mount ( '#app' )

不要忘记将CSS文件包含在VUE 2的项目中

 import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/src/themes/default.css'
// for the code highlighting
import 'highlight.js/styles/github.css'

或以下styles

<style lang = "css" >
@import "~medium-editor/dist/css/medium-editor.css" ;
@import "~vuejs-medium-editor/src/themes/default.css" ;
/*@import '~highlight.js/styles/github.css';*/
@import '~highlight.js/styles/github.css' ;
< / style >

对于VUE 3

 import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/dist/themes/default.css'
// for the code highlighting
import 'highlight.js/styles/github.css'

或以下styles

<style lang = "css" >
@import "medium-editor/dist/css/medium-editor.css" ;
@import "vuejs-medium-editor/dist/themes/default.css" ;
/*@import '~highlight.js/styles/github.css';*/
@import 'highlight.js/styles/github.css' ;
< / style > 

例子

< medium-editor
  v-model = " content "
  : options = " options "
  : onChange = " onChange "
  v-on : uploaded = " uploadCallback "
/>

<script>
import Editor from 'vuejs-medium-editor'

export default {
  data() {
    return {
      content: '',
      options: {},
    }
  },
  components: {
    'medium-editor': Editor,
  },
  methods: {
    onChange() {
      console.log(this.content)
    },
    uploadCallback(url) {
      console.log('uploaded url', url)
    },
  },
}
</script>

可用道具

• prefl（字符串） - 预填充的编辑器值 - 默认值，
• ReadOnly（boolean） - 使编辑器仅阅读。默认值 - false
• 选项 - 用于传递编辑器选项，请参见下文
• Onchange-通过Onchange事件
• hideimage-隐藏图像上传选项（默认-false）
• hidegist-隐藏要点代码嵌入 - 默认（false）
• hidevideo-隐藏视频嵌入 - 默认（false）

事件

• 上传 - imgur映像上传回调

选项

工具栏

您也可以自定义工具栏按钮

options: {
  toolbar : {
    buttons : [
      'bold' ,
      'italic' ,
      'underline' ,
      'quote' ,
      'h1' ,
      'h2' ,
      'h3' ,
      'pre' ,
      'unorderedlist' ,
    ]
  }
}

可用选项：所有选项均可在此处使用，您也可以覆盖中等编辑器中的选项；

options: {
  buttons : [
    'anchor' ,
    {
      name : 'pre' ,
      action : 'append-pre' ,
      aria : 'code highlight' ,
      tagNames : [ 'pre' ] ,
      contentDefault : '<b><\></b>' ,
      contentFA : '<i class="fa fa-code fa-lg"></i>' ,
    } ,
  ]
}

图像

使用工具栏中的映像选项，添加图像链接，突出显示要编辑，然后选择图像图像图标

buttons: [
  {
    name : 'image' ,
    action : 'image' ,
    aria : 'insert image from url' ,
    tagNames : [ 'img' ] ,
    contentDefault : '<b>image</b>' ,
    contentFA : '<i class="fa fa-picture-o"></i>' ,
  } ,
]

另外，可用选项：感谢原始仓库上的Ergofriend拖拉请求

 options: {
    uploadUrl : "https://api.imgur.com/3/image" ,
    uploadUrlHeader : { 'Authorization' : 'Client-ID a3tw6ve4wss3c' } ,
    file_input_name : "image" ,
    file_size : 1024 * 1024 * 10 ,
    imgur : true ,
 }

代码突出显示

1. 代码突出显示是使用亮点内置pre 。

您应该在样式中包括highligh.js CSS文件

<style >
    /*default css  */
    @import 'highlight.js/styles/default.css' ;
    /* github style */
    @import 'highlight.js/styles/github.css' ;
< / style >

您可以在这里获得更多主题样式

2. 使用GIST，也内置的代码凸高。单击 +按钮，然后单击代码（添加GIST），然后添加GIST URL，单击Enter以完成

仅阅读示例

< medium-editor : prefill = " defaultValue " : read-only = " true " />

nuxt.js使用率

创建一个插件文件vuejs-medium-editor.js insiral /plugins dir

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

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

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

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

包括VUE 2的CSS文件

css: [
  'medium-editor/dist/css/medium-editor.css' ,
  'vuejs-medium-editor/src/themes/default.css' ,
  'highlight.js/styles/github.css' , //if using code highlight
]

对于VUE 3

css: [
  'medium-editor/dist/css/medium-editor.css' ,
  'vuejs-medium-editor/dist/themes/default.css' ,
  'highlight.js/styles/github.css' , //if using code highlight
] 

关于我

Magak Emmanuel

执照

麻省理工学院

愉快的编码，前叉之前的明星？？？