vue 富文本组件
vuetrix编辑器 (vue-trix-editor)
A Vue wrapper around the Trix rich-text editor, with support for images and auto-save.
围绕Trix富文本编辑器的Vue包装器,支持图像和自动保存。
注意:没有真正的二一绑定。 (Note: No true two-one binding.)
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/trix-vue
使用范例 (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>
道具 (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-interval | false | null | Time in seconds to auto-save. Only saves if there are changes since last save |
道具名称 | 需要 | 默认 | 笔记 |
---|---|---|---|
初始内容 | 假 | ” | 最初用于填充编辑器的内容(或使用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-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响应) |
内容保存失败 | 空值 | 将内容保存到提供的端点时触发错误 |
翻译自: https://vuejsexamples.com/a-rich-text-editor-as-a-vue-component-with-image-and-auto-save-support/
vue 富文本组件