vuejs medium editor
v3.0.0
https://github.com/yabwe/medium-editor가있는 중간 편집기 래퍼의 Vue 2 및 3 JS 구성 요소이지만 모든 플러그인은 vue.js에서 다시 쓰러지고 있습니다. 모든 중간 편집기 구성이 지원됩니다.
데모
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' )Vue 2의 프로젝트에 CSS 파일을 포함시키는 것을 잊지 마십시오.
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>도구 모음 버튼도 사용자 정의 할 수 있습니다
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 Pull 요청에 감사드립니다.
options: {
uploadUrl : "https://api.imgur.com/3/image" ,
uploadUrlHeader : { 'Authorization' : 'Client-ID a3tw6ve4wss3c' } ,
file_input_name : "image" ,
file_size : 1024 * 1024 * 10 ,
imgur : true ,
}pre 추가해야합니다. 위의 옵션 참조). 스타일 내에 highligh.js CSS 파일을 포함시켜야합니다.
<style >
/*default css */
@import 'highlight.js/styles/default.css' ;
/* github style */
@import 'highlight.js/styles/github.css' ;
< / style >여기에서 더 많은 테마 스타일을 얻을 수 있습니다
< medium-editor : prefill = " defaultValue " : read-only = " true " /> 플러그인 파일을 만듭니다 vuejs-medium-editor.js 내부 /plugins dir
import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'
Vue . component ( 'medium-editor' , MediumEditor )Disable SSR 모드를 사용하여 nuxt.config.js에서 플러그인을 가져옵니다
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
MIT
행복한 코딩, 포크 전의 별 ???
