- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在下面的应用程序中,我希望 Quill 编辑器填充页眉和页脚中的现有空间。我尝试将其设置为 100%,但这会向整个页面添加一个滚动条。如何让Quill在填充空间的同时适配屏幕尺寸。 (如果降低高度编辑器高度应该降低)
var quill = new Quill('#editor', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
html,body {
margin: 0;
height: 100%;
}
#container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#header {
height: 40px;
background: red;
}
#footer {
height: 40px;
background: red;
}
#editor-container {
height: 100%;
}
#editor {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.js"></script>
<div id="container">
<div id="header">Header</div>
<div id="editor-container">
<div id="editor">Sample</div>
</div>
<div id="footer">Footer</div>
</div>
最佳答案
问题是 height: 100%
来自 ql-container
类导致溢出。您可以尝试以下操作:
将 flex: 1
添加到 #editor-container
并使它也成为一个column flexbox。
将 flex: 1
和 width: 100%
添加到 #editor
并且对于大内容添加 overflow-y : 自动
请看下面的演示:
var quill = new Quill('#editor', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
html,body {
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
#container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#header {
height: 40px;
background: red;
}
#footer {
height: 40px;
background: red;
}
#editor-container {
height: 100%;
/* added these styles */
flex: 1;
display: flex;
flex-direction: column;
}
#editor {
height: 100%;
/* added these styles */
flex: 1;
overflow-y: auto;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.js"></script>
<div id="container">
<div id="header">Header</div>
<div id="editor-container">
<div id="editor">Sample</div>
</div>
<div id="footer">Footer</div>
</div>
关于javascript - 使 QuillJS 编辑器高度 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55264524/
我在我的网站上使用 QuillJs 作为文本编辑器。在长篇文章中,当粘贴文本或更改标题类型或对齐方式或颜色或插入链接或视频时,屏幕 View 会跳到顶部。找不到原因。 QuillJs 版本:1.2.6
我有: useEffect(() => { if (quill) { quill.clipboard.dangerouslyPasteHTML(docu
我尝试在 Django 1.10 模板中的特定表单字段上使用 QuillJS,如下所示: var quill = new Quill('#id_text', { theme: 's
我在 Quill 还很新。 我想制作一个处理拖放事件的自定义模块或扩展函数。我想检测删除的文本,如果它是图像网址,我想插入“img”标签而不是“a”标签。 目前,Quill 正在为删除的网址添加“a”
所以我知道您可以向颜色字段添加颜色选项,例如 [{'color': "#000000"}] 但我想知道是否有一种方法可以让用户可以像在 最佳答案 您可以使用自定义工具栏handler只需一点 jav
我环顾了 Quill documentation 、GitHub 主题以及 Stack Overflow 中的此处,我一直无法找到使用 format 的简单示例属性。我想限制我的用户,使他们只能使用粗
置顶 this page ,据称提供了有关如何创建工具栏以控制字体、大小、粗体、斜体、下划线、删除线、文本颜色、背景颜色、列表、项目符号和文本对齐方式的说明。 但是,当我使用示例 HTML 代码时,我
我尝试上传 exif 数据中方向参数错误的图片。这会导致图像旋转不正确。 我需要在上传到 quillJS 编辑器之前旋转图像。 我该怎么做?有什么想法吗? 编辑: .js app.config(['n
我想创建一个自定义的嵌入格式,可以设置样式但它的文本不能更改。我的用例与主题标签的情况非常相似。我想要一个外部按钮,它将向编辑器上的当前选定范围添加一个主题标签。但是在这样做之后,我希望主题标签表现为
我们目前正在为一个项目使用 quilljs。当我们尝试通过 Clipboard 模块中的 dangerouslyPasteHTML API 添加 html 时,段落中的自定义属性被剥离。 例如: 在应
我正在使用 Quilljs 创建一个在线文档创建器作为我网站的一项功能。我已经设置好了,想知道是否有办法在输入文档后下载该文档?也许使用 php 或 javascript,最好在; .doc、.doc
嗨,我正在使用 quilljs 进行简单的富文本编辑器。我有一个不错的工作解决方案,但我面临的一个问题是当我保存编辑器空间的内容时会丢失。这是下面的代码,输入一些图像并在其前面留出空格,然后单击“保存
描述:我在 Quill Editor 工具栏中创建下拉列表时遇到问题。任何帮助,将不胜感激。理想情况下,我希望下拉列表显示在工具栏中,并将选择选项文本添加为编辑器中的文本。 测试用例:https:
我正在尝试在 QuillJS 中创建自定义类属性。 我已经走了这么远: let config = { scope: Parchment.Scope.BLOCK, }; let MClass = n
我正在使用Quill JS作为富文本编辑器。如果用户单击按钮,我希望能够突出显示文本中的特定单词。但 Quill JS 似乎没有授予通过另一个插件编辑其内容的权限(?) 我试过Mark.js和 Hig
感谢您对我的问题感兴趣。 使用的技术: PHP/JS 愿望结果:我想允许将属性“alt”添加到图像中。 添加图片时,发送到服务器,然后将带有 url (src) 的 img 标签插入到编辑器中。 它完
(我将以我是一名新的 javascript 开发人员这一事实作为序言,并且我确信我对 javascript/angular/quill 如何在页面上协同工作的知识存在差距。) 我想知道这是否可行。我不
当您在 quilljs 编辑器中插入代码块时,在渲染时代码块会被 包裹起来 有没有办法添加额外的类,以便我可以在渲染时自定义代码块的格式?例如,我想以某种方式指定一个类,比如 lang-javasc
我希望能够通过 JavaScript 使用工具栏选项将自定义字体系列添加到我的 Quill JS 编辑器,而不是通过 HTML 定义它们。 我的代码如下,与文档中的代码相同: var toolbarO
如何在textarea下方显示工具栏。 我的代码: var quill = new Quill('#txtMessage', { theme: 'snow', modules: { t
我是一名优秀的程序员,十分优秀!