summernote를 vue.disc 2와 함께 사용

summernote를 vue.disc 2와 함께 사용

나는 내 vue.param 2 spa에서 여름 노트를 사용하고 싶다, 그리고 모든 페이지가 여름 노트를 사용하는 것은 아니기 때문에 여름 노트를 컴포넌트로 만들기 위해 추가한다.

export default {
    editor_function(){
     //summernote function in summernote.min.js
    }
}

그리고 여름 노트와 전화가 필요한 내 .vue 파일로 Import합니다.editor_function에mounted()기능하지만 오류가 발생했습니다.unknown codemirrornpm이 내 vue 프로젝트를 단일 app.disc 파일로 컴파일할 때.

그래서 인덱스에 summernote.min.disclude만 포함하면 됩니다.그것은 vue js spa가 시작되기 전에 로드된다는 것을 의미합니다(이것은 일부 페이지에서만 이 플러그인이 필요하기 때문에 매우 이상적이지 않지만 작동하려면 이것이 필요합니다).

그 후는 동작하고 있습니다만, 여름 노트로부터 출력 데이터를 vuej로 가져오는 방법을 알 수 없게 되어, v-를 추가합니다.model안으로textarea이것처럼.

<textarea class="summernote" v-model="content"></textarea>

나도 이렇게 커스텀 입력을 하려고 했지만 작동하지 않았다.

<textarea class="summernote" 
          :value="content"
          @input="content = $event.target.value"></textarea>

하지만 v-model 콘텐츠에 바인딩되지 않았을 뿐이므로 여름 노트/콘텐츠 출력을 게시할 때 비어 있습니다.

그래서 summernote를 vue js 2에서 동작하게 하는 방법은? summernote와 vue js용 패키지를 찾았는데 이전 버전 vue js(v.1 maybe?)에서만 동작하며 vue js 2와 호환되지 않습니다.

코멘트가 코드 표시가 서툴러서 이렇게 대답했습니다.

<template>
<div id="app">
  <summernote
    name="editor"
    :model="content"
    v-on:change="value => { content = value }"
  ></summernote>
</div>
</template>

<script>
export default {
  data() {
    return {
        content: null   
    }
  },
  components: {
    'summernote' : require('./Summernote')
  }
}
</script>

서머노트 모듈은 이런 식으로 사용하시면 될 것 같습니다.
나는 소스코드를 조사했다.여름 노트를 포장한 것이기 때문에 꽤 간단하고 짧습니다.

갱신하다
서머노트 구성과 플러그인을 쉽게 설정할 수 있도록 프로젝트를 중단하고 코드를 변경했습니다.이 버전에서는 구성을 개체 소품으로 전달할 수 있습니다.플러그인을 html로 가져와 추가할 수도 있습니다.script태그를 붙입니다.
아래의 샘플 코드를 참조해 주세요.

<template>
<div id="app">
  <summernote
    name="editor"
    :model="content"
    v-on:change="value => { content = value }"
    :config="config"
  ></summernote>
</div>
</template>

<script>
export default {
  data() {
    return {
        content: null,
        // ↓ It is what the configuration object looks like. ↓
        config: {
            height: 100,
            toolbar: [
                // [groupName, [list of button]]
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['gxcode']], // plugin config: summernote-ext-codewrapper
          ],
        }, 
    }
  },
  components: {
    'summernote' : require('./Summernote')
  }
}
</script>

네가 내 생각을 이해했으면 좋겠어.또한 분기된 프로젝트를 조사하여 자세한 내용을 확인할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/45876750/using-summernote-with-vue-js-2