vue tinymce

vue-tinymce

Vue 개발자에게 제공되는 Tinymce 구성 요소

목적

개발자를위한 Tinymce의 VUE 구성 요소를 간단하게 사용합니다. 개발자에게 매우 간단하고 이해하기 쉬운 소스 코드를 참조로 제공하며,이 구성 요소를 프로젝트에 직접 사용할 수도 있습니다. 문제를 발견하면 문제를 언급하고 피드백을 기대할 수 있습니까?

사용 방법

구성 요소를 설치하십시오

yarn add @packy-tang/vue-tinymce
# or
npm install @packy-tang/vue-tinymce

소개

 < template >
    <!-- 全局引入TinyMCE -->
    < script src =" //unpkg.com/[email protected]/tinymce.min.js " > </ script >
    <!-- App -->
    < div id =" app " >
        < vue-tinymce
            v-model =" content "
            :setup =" setup "
            :setting =" setting " />
    </ div >
</ template >
< script >
    import Vue from "vue"
    import VueTinymce from "@packy-tang/vue-tinymce"

    //安装组件
    Vue . use ( VueTinymce )

    new Vue ( {
        el : "#app" ,
        data : function ( ) {
            return {
                content : "<p>html content</p>" ,
                setting : {
                    height : 500
                }
            }
        } ,
        methods : {
            setup ( editor ) {
                console . log ( editor )
            }
        }
    } )
</ script >

다른 사용 예제

• vue-cli 사용 예 : 포털
• 웹 팩 사용 예 예 : 포털 (채워질)

재산

이름	설명하다
:content	String 유형, 텍스트 내용이 편집기에 전달되면 v-model 사용하여 양방향 바인딩을 달성 할 수 있습니다.
@change	유형 Function , Input Change Redo Undo ExecCommand KeyUp NodeChange 이벤트 이벤트 이벤트 이벤트 응답이 텍스트 내용을 반환 한 후 트리거됩니다.
:setting	Object , 편집기 설정을 입력하고 setup 권장되지 않습니다.
:setup	유형 Function , 일반적으로 사용 및 사용자 정의 된 편집기 처리, 일부 처리는 구성 요소 내부에서 수행되었으며 여기에 사용자 정의 코드를 추가하는 것이 좋습니다.

더 많은 사용법 세부 사항

더 알고 싶다면 사용법 세부 사항으로 이동하십시오.

로컬 디버깅

 # 运行本地例子
$ npm run serve 
# 构建
$ npm run build
# 发布版本
$ npm run release

지원을 구축하십시오

이 저장소는 SAO-ESM으로 템플릿으로 구축됩니다.

특허

저작권 (c) packy-tang [email protected]

MIT 프로토콜에 따른 오픈 소스 소프트웨어.