vue.js - 如何在 vue 中创建/更新羽毛笔印迹?
问题描述
我看到了添加羽毛笔印迹的文档,但是作为一个通过使用vue学习js的新程序员,我不知道该放在哪里。我想更改类名以使用顺风 css 类。
我通过 npm 安装了“vue-quill-editor”,并让编辑器使用下面的代码。
<template>
<section class="container">
<no-ssr>
<div
v-quill:myQuillEditor="editorOption"
class="quill-editor"
:content="content"
@change="onEditorChange($event)"
></div>
</no-ssr>
</section>
</template>
<script>
/*
Emits the html content to parent using editor-content
a parent example <quill @editor-content="form.content = $event" />
*/
export default {
data() {
return {
content: "<p>Start typing post...</p>",
editorOption: {
// some quill options
modules: {
toolbar: [
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["clean"]
]
}
}
};
},
methods: {
onEditorChange({ editor, html, text }) {
this.content = html;
this.$emit("editor-content", this.content);
}
}
};
</script>
<style scoped>
.quill-editor {
min-height: 200px;
max-height: 400px;
overflow-y: auto;
}
</style>
解决方案
你应该把它放在挂载的钩子中,因为 quill 在 DOM 上运行。
推荐阅读
- python - 如何将数据从 Django 发送到 python 类之外,反之亦然?
- php - 重写不与 url 中的某些单词一起使用,但与其他单词一起使用
- python - Python 如何在内部存储日期时间?
- python - 从歌词中创建一系列图像以在 ffmpeg 中使用
- c# - 数据表 SQL Server 到变量 C#
- c# - 在 UmbracoVirtualNodeRouteHandler 中找不到内容时如何返回 Umbraco 404 页面
- docker - 用于 golang 创建大图像的 Docker 多阶段构建
- github - 在 GitHub 上添加标签或检查失败的拉取请求(合并)冲突?
- arduino - Serial.begin() Serial.println("hi") 应该输出到哪里?
- java - 添加 GitLab 私有存储库作为 Maven 依赖项