Главная страница>Ресурсы для создания веб-сайтов>Другие ресурсы
Скачать

️ Обратите внимание: этот репозиторий устарел

Редактор пользовательского интерфейса Vue Vueper был управляется отдельно от репозитория редактора Toast UI. В результате распределения этих проблем мы решили установить каждую репозиторий обертки и управлять репозиторием как моно-репо из репозитория редактора Toast UI.

С этого момента, пожалуйста, отправьте вопросы или вклад, связанные с тостом пользовательского интерфейса, реагируя на тост для тостов, репозиторий редактора пользовательского интерфейса. Спасибо?.

Редактор Toast UI для Vue

Это Vue Component Curping Toast UI Editor.

Оглавление

  • Соберите статистику об использовании открытого исходного кода
  • Установить
    • Используя NPM
  • Использование редактора
    • Нагрузка
    • Осуществлять
    • Использование V-модели
    • Реквизит
    • Событие
    • Метод
  • Использование зрителей
    • Нагрузка
    • Осуществлять
    • Реквизит
    • Событие
  • Получить шаги запроса
  • Документы
  • Внося
  • Лицензия

Соберите статистику об использовании открытого исходного кода

Vue Purper of Toast UI Editor применяет Google Analytics (GA) для сбора статистики об использовании открытого исходного кода, чтобы определить, насколько широко используется редактор Toast UI во всем мире. Это также служит важным индексом для определения будущего курса проектов. location.hostname (например, «ui.toast.com») должен быть собран, и единственной целью является не что иное, как измерить статистику по использованию. Чтобы отключить GA, используйте следующие варианты usageStatistics когда объявите компонент Vue Orbper. 

 var options = {
    ...
    usageStatistics : false
}

Или включите включите tui-code-snippet.js ( v1.4.0 или более поздней версии ), а затем немедленно напишите параметры следующим образом: 

 tui . usageStatistics = false ;

? Установить

Используя NPM 

npm install --save @toast-ui/vue-editor

Использование редактора

Нагрузка

Вы можете использовать редактор Toast UI для Vue в качестве формата Moudule или пространства имен. Также вы можете использовать однофайтный компонент (SFC of Vue). При использовании формата модуля и SFC вы должны загрузить tui-editor.css , tui-editor-contents.css и codemirror.css в сценарии.

  • Использование модуля Ecmascript 

     import 'tui-editor/dist/tui-editor.css' ;
import 'tui-editor/dist/tui-editor-contents.css' ;
import 'codemirror/lib/codemirror.css' ;
import { Editor } from '@toast-ui/vue-editor'

  • Использование модуля CommonJS 

     require ( 'tui-editor/dist/tui-editor.css' ) ;
require ( 'tui-editor/dist/tui-editor-contents.css' ) ;
require ( 'codemirror/lib/codemirror.css' ) ;
var toastui = require ( '@toast-ui/vue-editor' ) ;
var Editor = toastui . Editor ;

  • Использование единого файлового компонента 

     import 'tui-editor/dist/tui-editor.css' ;
import 'tui-editor/dist/tui-editor-contents.css' ;
import 'codemirror/lib/codemirror.css' ;
import Editor from '@toast-ui/vue-editor/src/Editor.vue'

  • Используя пространство имен 

     var Editor = toastui . Editor ;

Осуществлять

Сначала реализовать <editor/> в шаблоне. 

 < template >
    < editor />
</ template >

А затем добавьте Editor в components в вашем компоненте или экземпляре Vue, как это: 

 import { Editor } from '@toast-ui/vue-editor'

export default {
  components : {
    'editor' : Editor
  }
}

или 

 import { Editor } from '@toast-ui/vue-editor'
new Vue ( {
    el : '#app' ,
    components : {
        'editor' : Editor
    }
} ) ;

Использование V-модели

Если вы используете V-модель, вы должны объявить data для привязки. (❗ При использовании редактора в режиме wysiwyg v-model может вызвать снижение производительности.)

В приведенном ниже примере editorText привязывает текст редактора. 

 < template >
    < editor v-model =" editorText " />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
  components : {
    'editor' : Editor
  } ,
  data ( ) {
      return {
          editorText : ''
      }
  }
}
</ script >

Реквизит

Имя Тип По умолчанию Описание
ценить Нить '' Эта опора может изменить содержание редактора. Если вы используете v-model , не используйте ее .
параметры Объект Следующие defaultOptions Варианты tui.editor. Это для initailize tui.editor.
высота Нить '300px' Эта опора может контролировать высоту редактора.
Предварительный просмотр Нить 'Tab' Эта опора может изменить стиль предварительного просмотра редактора. ( tab или vertical )
режим Нить 'charkdown' Эта опора может изменить режим редактора. ( markdown или wysiwyg )
HTML Нить - Если вы хотите изменить контент редактора, используя формат HTML, используйте эту опору.
видимый Логический истинный Эта опора может контролировать видимую от Иидитора. 
 const defaultOptions = {
    minHeight : '200px' ,
    language : 'en_US' ,
    useCommandShortcut : true ,
    useDefaultHTMLSanitizer : true ,
    usageStatistics : true ,
    hideModeSwitch : false ,
    toolbarItems : [
        'heading' ,
        'bold' ,
        'italic' ,
        'strike' ,
        'divider' ,
        'hr' ,
        'quote' ,
        'divider' ,
        'ul' ,
        'ol' ,
        'task' ,
        'indent' ,
        'outdent' ,
        'divider' ,
        'table' ,
        'image' ,
        'link' ,
        'divider' ,
        'code' ,
        'codeblock'
    ]
} ;

Пример : 

 < template >
    < editor
    :value =" editorText "
    :options =" editorOptions "
    :html =" editorHtml "
    :visible =" editorVisible "
    previewStyle =" vertical "
    height =" 500px "
    mode =" wysiwyg "
    />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    data ( ) {
        return {
            editorText : 'This is initialValue.' ,
            editorOptions : {
                hideModeSwitch : true
            } ,
            editorHtml : '' ,
            editorVisible : true
        } ;
    } ,
} ;
</ script >

Событие

  • нагрузка: это будет испускается, когда редактор полностью загружается
  • Изменение: это будет испускаться при изменении контента
  • StateChange: это будет испускаться при изменении формата по позиции курсора
  • Фокус: это будет испускаться, когда редактор получит фокус
  • размытие: это будет испускается, когда редактор свободный фокус

Пример : 

 < template >
    < editor
    @load =" onEditorLoad "
    @focus =" onEditorFocus "
    @blur =" onEditorBlur "
    @change =" onEditorChange "
    @stateChange =" onEditorStateChange "
    />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    methods : {
        onEditorLoad ( ) {
            // implement your code
        } ,
        onEditorFocus ( ) {
            // implement your code
        } ,
        onEditorBlur ( ) {
            // implement your code
        } ,
        onEditorChange ( ) {
            // implement your code
        } ,
        onEditorStateChange ( ) {
            // implement your code
        } ,
    }
} ;
</ script >

Метод

Если вы хотите больше манипулировать редактором, вы можете использовать метод invoke , чтобы вызвать метод tui.editor. Для получения дополнительной информации о методе см. Метод tui.editor.

Во -первых, вам нужно назначить атрибут ref <editor/> , а затем вы можете использовать метод invoke через this.$refs как это: 

 < template >
    < editor ref =" tuiEditor " />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    methods : {
        scroll ( ) {
            this . $refs . tuiEditor . invoke ( 'scrollTop' , 10 ) ;
        } ,
        moveTop ( ) {
            this . $refs . tuiEditor . invoke ( 'moveCursorToStart' ) ;
        } ,
        getHtml ( ) {
            let html = this . $refs . tuiEditor . invoke ( 'getHtml' ) ;
        }
    }
} ;
</ script >

? Использование зрителей

Нагрузка

  • Использование модуля Ecmascript 

     import 'tui-editor/dist/tui-editor-contents.css' ;
import 'highlight.js/styles/github.css' ;
import { Viewer } from '@toast-ui/vue-editor'

  • Использование модуля CommonJS 

     require ( 'tui-editor/dist/tui-editor-contents.css' ) ;
require ( 'highlight.js/styles/github.css' ) ; 
var toastui = require ( '@toast-ui/vue-editor' ) ;
var Viewer = toastui . Viewer ;

  • Использование единого файлового компонента 

     import 'tui-editor/dist/tui-editor-contents.css' ;
import 'highlight.js/styles/github.css' ;
import Viewer from '@toast-ui/vue-editor/src/Viewer.vue'

  • Используя пространство имен 

     var Viewer = toastui . Viewer ;

Осуществлять

Сначала реализовать <viewer/> в шаблоне. 

 < template >
    < viewer />
</ template >

А затем добавьте Viewer к components в вашем компоненте или экземпляре Vue, как это: 

 import { Viewer } from '@toast-ui/vue-editor'

export default {
  components : {
    'viewer' : Viewer
  }
}

или 

 import { Viewer } from '@toast-ui/vue-editor'
new Vue ( {
    el : '#app' ,
    components : {
        'viewer' : Viewer
    }
} ) ;

Реквизит

Имя Тип По умолчанию Описание
ценить Нить '' Эта опора может изменить содержание зрителя.
высота Нить '300px' Эта опора может контролировать высоту зрителя.
пост Множество Эта опора может применять расширения зрителя.

Пример : 

 < template >
    < viewer
    :value =" viewerText "
    height =" 500px "
    />
</ template >
< script >
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components : {
        'viewer' : Viewer
    } ,
    data ( ) {
        return {
            viewerText : '# This is Viewer.n Hello World.' ,
        } ;
    } ,
} ;
</ script >

Событие

  • нагрузка: это будет испускается, когда редактор полностью загружается
  • Изменение: это будет испускаться при изменении контента
  • StateChange: это будет испускаться при изменении формата по позиции курсора
  • Фокус: это будет испускаться, когда редактор получит фокус
  • размытие: это будет испускается, когда редактор свободный фокус

Пример : 

 < template >
    < viewer
    @load =" onEditorLoad "
    @focus =" onEditorFocus "
    @blur =" onEditorBlur "
    @change =" onEditorChange "
    @stateChange =" onEditorStateChange "
    />
</ template >

< script >
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components: {
        'viewer': Viewer
    },
    methods: {
        onEditorLoad() {
            // implement your code
        },
        onEditorFocus() {
            // implement your code
        },
        onEditorBlur() {
            // implement your code
        },
        onEditorChange() {
            // implement your code
        },
        onEditorStateChange() {
            // implement your code
        },
    }
};

? Получить шаги запроса

Продукты тоста пользовательского интерфейса являются открытым исходным кодом, поэтому вы можете создать запрос на тягу (PR) после решения проблем. Запустите сценарии NPM и развивайте себя со следующим процессом.

Настраивать

Вилка develop филиал в ваш личный репозиторий. Клонировать его на локальный компьютер. Установите модули узла. Перед началом разработки вы должны проверить ошибки Haveany. 

$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install

Развивать

Давайте начнем разработку!

Потянуть запрос

Перед PR проверьте, чтобы проверить наконец, а затем проверить любые ошибки. Если у него нет ошибки, совершите, а затем нажмите!

Для получения дополнительной информации о шаге PR, пожалуйста, см. Ссылки в разделе.

Внося

  • Нормы поведения
  • Внесение руководства
  • Совершить соглашение

Лицензия

Это программное обеспечение лицензировано в соответствии с MIT © NHN.

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все