Vue.js的Trix文本编辑器组件

Vue-Trix文字编辑器 (Vue-Trix Text Editor)

Simple and lightweight Trix rich-text editor component for Vue.js.

Vue.js的简单轻量级Trix RTF编辑器组件。

View demo 查看演示 Download Source 下载源

export default { // ... components: { VueTrix } }

导出默认的{// ...组件：{VueTrix}}

## Component Usages

### Create a simple editor

Add `VueTrix` component into `*.vue` template

```XML
  <template>
    <!-- ... -->
    <VueTrix v-model="editorContent"/>
    <!-- ... -->
  </template>

与表格整合 (Integrating with Forms)

<form ...>
    <VueTrix inputId="editor1" v-model="editorContent"/>
  </form>

道具说明 (Props descriptions)

• inputId: This is referenced id of the hidden input field defined

  inputId ：这是定义的隐藏输入字段的参考id

绑定编辑器更改 (Binding editor changes)

The <VueTrix/> element emits several events which you can use to observe and respond to changes in editor state.

<VueTrix/>元素会发出多个事件，您可以用来观察和响应编辑器状态的更改。

• @trix-attachment-add fires after an attachment is added to the document. You can access the Trix attachment object through the attachment property on the event. If the attachment object has a file property, you should store this file remotely and set the attachment’s URL attribute.

  @trix-attachment-add附件添加到文档后， @trix-attachment-add触发@trix-attachment-add 。 您可以通过事件的附件属性访问Trix附件对象。 如果附件对象具有文件属性，则应远程存储此文件并设置附件的URL属性。

• @trix-attachment-remove fires when an attachment is removed from the document. You can access the Trix attachment object through the attachment property on the event. You may wish to use this event to clean up remotely stored files.

  从文档中@trix-attachment-remove触发@trix-attachment-remove 。 您可以通过事件的附件属性访问Trix附件对象。 您可能希望使用此事件来清理远程存储的文件。

翻译自: https://vuejsexamples.com/trix-text-editor-component-for-vue-js/