vue tinymce

Vue-Tinymce

Компоненты tinymce предоставлены разработчикам Vue

Цель

Простое использование компонентов VUE Tinymce для разработчиков. Предоставьте очень простой и простой для понимания исходный код для разработчиков в качестве ссылки, и, конечно, вы также можете использовать этот компонент непосредственно для вашего проекта. Если вы найдете проблему, вы можете упомянуть проблему и ожидать от обратной связи?

Как использовать

Установите компоненты

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 , Change Input Undo Redo ExecCommand событие KeyUp , запускаемое после ответа на событие NodeChange Возвращает текстовое содержимое
:setting	Тип Object , настройки редактора, setup здесь не рекомендуется
:setup	Function типа, обычно используемая и настроенная обработка редактора, некоторая обработка была выполнена внутри компонента, рекомендуется добавить пользовательский код здесь

Больше деталей использования

Если вы хотите узнать больше, перейдите к деталям использования

Местная отладка

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

Строить поддержку

Этот репозиторий построен с SAO-ESM в качестве шаблона.

Лицензия

Copyright (c) Packy-Tang [email protected]

Программное обеспечение с открытым исходным кодом в соответствии с протоколом MIT.