trix_Trix富文本编辑器周围的Vue包装器

trix

Vue Trix Rich Text编辑器 (Vue Trix Rich Text Editor)

A Vue wrapper around the Trix rich-text editor, with support for images and auto-save.

围绕Trix富文本编辑器的Vue包装器，支持图像和自动保存。

While you can use v-model to bind the editor contents (the formatted HTML) to your own Vue instance or component,you won't get true two-way binding with this component. That means that if you update the value of your content outside of the editor, it will not be taken into account by the editor. This means you have to treat the editor as the source of truth, not whatever you bind it to. The reason for this is that Trix only reads in the initial content once on initialization, so to force two-way binding, we would have to make Trix re-evaluate and rebuild the entire document on every keystroke, which is not really worth it.

尽管您可以使用v-model将编辑器内容(格式为HTML)绑定到您自己的Vue实例或组件，但是您将无法获得与此组件真正的双向绑定。 这意味着，如果您在编辑器外部更新内容的值，那么编辑器将不会考虑该值。 这意味着您必须将编辑器视为真理的源头，而不是绑定到真理的源头。 原因是Trix在初始化时只读取一次初始内容，因此要进行双向绑定，我们将不得不让Trix在每次击键时重新评估并重建整个文档，这确实不值得。

安装 (Installation)

npm install @dymantic/vue-trix-editor

使用范例 (Usage Example)

// simple rich-text editor, the html output is bound to whatever my_html is
// the editor will initailly be populated with the contents from my_html
<trix-vue v-model="my_html"></trix-vue>

// same as above, but will allow adding images
<trix-vue v-model="my_html" image-upload-path="/url/to/upload/images"></trix-vue>

// simple rich-text editor, with a "save" button. Will send editor contents as POST to save-path
<trix-vue v-model="my_html" save-path="/url/to/save/contents"></trix-vue>

// same as above, but will auto-save at given interval (in seconds) if changes have been made
<trix-vue v-model="my_html" save-path="/url/to/save/contents" :save-interval="10"></trix-vue>

// all together now, and allow up to 20MB images
<trix-vue v-model="my_html"
          image-upload-path="/url/to/upload/images"
          max-image-file-size="20"
          save-path="/url/to/save/contents"
          :save-interval="10"
></trix-vue>

上载图片 (Uploading images)

If you use the upload images, by supplying the endpoint where your server accepts the image to the image-upload-path prop, you need to implement the server side parts yourself. Then ensure that the server reponds with the a body that includes {src: [URL FOR YOUR STORED IMAGE]}. If this is not present in the response, the image will not be inserted.

如果使用上载图像，则通过将服务器接受图像的端点提供给image-upload-path属性，需要自己实现服务器端部件。 然后，确保服务器响应的正文包含{src: [URL FOR YOUR STORED IMAGE]} 。 如果响应中不存在此图像，则不会插入图像。

By deafult, a max file size of 5MB is allowed for images, but this may be set via the max-image-file-size prop.

默认情况下，图片的最大文件大小为5MB，但这可以通过max-image-file-size属性设置。

道具 (Props)

The following props can be used to define the components behaviour

以下道具可用于定义组件行为

Prop name	required	default	Notes
initial-content	false	""	The content to populate the editor with initially (or use v-model)
image-upload-path	false	""	Supplying a value here allows for image uploads
max-image-file-size	false	5	Specify the maximum image filesize in MB
save-path	false	""	Supplying a url will allow content to be saved
save-as	false	"content"	If using save feature, the name of the form field will be this
save-interval	false	null	Time in seconds to auto-save. Only saves if there are changes since last save
placeholder	false	''	The placeholder to be used for the empty state of the editor

道具名称	需要	默认	笔记
初始内容	假	”	最初用于填充编辑器的内容(或使用v-model)
图像上传路径	假	”	在此处提供值可上传图片
最大图像文件大小	假	5	指定最大图像文件大小(MB)
保存路径	假	”	提供网址将允许保存内容
另存为	假	“内容”	如果使用保存功能，则表单字段的名称为
保存间隔	假	空值	自动保存的时间(以秒为单位)。 仅在自上次保存以来有更改的情况下保存
占位符	假	''	用于编辑器空状态的占位符

大事记 (Events)

The editor will fire the following events:

编辑器将触发以下事件：

Event name	payload	Notes
image-rejected	(file, message)	Fired if a user's image cannot be attached, either due to network error or invalid file
image-attached	null	Fired after an image has been successfully uploaded and inserted into document
content-changed	null	Fired whenever editor content changes.
content-saved	null	Fired after editor contents have been successfully saved (200-ish response from server)
content-save-failed	null	Fired an error occurs while saving content to provided endpoint

活动名称	有效载荷	笔记
图像被拒绝	(文件，消息)	如果由于网络错误或无效文件而无法附加用户图像，则触发
图像附加	空值	成功上传图像并将其插入文档后触发
内容变更	空值	编辑器内容更改时触发。
内容保存	空值	成功保存编辑器内容后触发(来自服务器的200 ish响应)
内容保存失败	空值	将内容保存到提供的端点时触发错误

通过作用域插槽扩展功能 (Extending functionality through scoped slot)

Requires Vue 2.6 or higher

需要Vue 2.6或更高版本

This component provides a default scoped slot, which will render whatever you put in it in the top toolbar. The intention is to allow for your own buttons, etc to be added that allows you to insert content into the editor. An example would be to add embeds (Youtube, iframes, etc) as attachments.

该组件提供了一个默认的作用域插槽，该插槽将渲染您在顶部工具栏中放置的内容。 目的是允许添加您自己的按钮等，以允许您将内容插入编辑器。 一个示例是添加嵌入(Youtube，iframe等)作为附件。

By adding the v-slot directive to the component you may get access to the document slot-prop, which is an object with two methods on it you may call. The methods are attachment and html, which will insert whatever content you provide as either an attachment or as html, respectively.

通过将v-slot指令添加到组件，您可以访问document slot-prop，该对象是您可以调用的带有两个方法的对象。 这些方法是attachment和html ，它们将分别插入您作为附件或html提供的任何内容。

Note: Html that Trix does not understand how to format will be ignored. You would be better off using an attachment for those situations.

注意：Trix不了解如何格式化HTML将被忽略。 在这种情况下，最好使用附件。

The example below should provide some guidance:

以下示例应提供一些指导：

//in your own component or page
<trix-vue v-model="my_html"
          image-upload-path="/url/to/upload/images"
          max-image-file-size="20"
          save-path="/url/to/save/contents"
          :save-interval="10"
          v-slot="{document}"
>
    <embed-youtube-button :trix="document"></embed-youtube-button>
</trix-vue>

//in your embed-youtube-button component
<template>
 // ....
</template>

<script>
    props: ['trix'],

    data() {
        return {
            attachment_content: '', //will probably be the v-model for a textarea
        };
    },

    methods: {
        // an example method that you would call to insert the attachmnet once the attachment_content has been entered
        addAttachment(content) {
            this.trix.attachment(this.attachment_content);
        }
    }
</script>

讨厌的控制台警告未知元素'trix-editor' (Pesky console warning for unkown element 'trix-editor')

In development mode, you will get a warning about an unknown element <trix-editor>. This is because Trix uses custom elements, and vue assumes they should be vue components. These can't be ignored, because we do need to Vue to render the cusom elements.

在开发模式下，您将收到有关未知元素<trix-editor>的警告。 这是因为Trix使用自定义元素，而vue假定它们应为vue组件。 这些不能忽略，因为我们确实需要Vue来呈现cusom元素。

While the warning is harmless, it can be suppressed with the following code.

尽管该警告是无害的，但可以使用以下代码将其消除。

//somewhere in your code where you have access to the Vue instance
Vue.config.ignoredElements = [
    'trix-editor',
];

翻译自: https://vuejsexamples.com/a-vue-wrapper-around-the-trix-rich-text-editor/

trix