标签: quill
如何使用工具栏选项在Quill js上添加字体类型？
我用Quill js创建了一个富文本区域.我有工具栏的下一个选项:
new Quill('#quilljs-container', {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block', 'link'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ …推荐指数
解决办法
查看次数
如何向QuillJS编辑器添加自定义字体大小
如何使用QuillJS将自定义字体大小添加到工具栏？我尝试了两种方法:
// Initiate the editor
let toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
[{ 'align': [] }],
[{ 'size': ['10px', '20px', '80px'] }],
[{ 'color': ['#FFF'] }]
];
this.editor = new Quill('#executive-control-editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
和
<div id="toolbar">
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-align"></select>
</span>
<span class="ql-format-group">
<select title="Size" class="ql-size">
<option value="10px">Small</option>
<option value="13px">Normal</option>
<option value="18px">Large</option>
<option value="32px">Huge</option>
</select>
</span>
<span class="ql-formats">
<button class="ql-image"></button>
</span> …推荐指数
解决办法
查看次数
如何在没有工具栏的情况下创建Quill编辑器？
我想使用Quill但不显示编辑器工具栏(或"bubble"替代品).我基本上喜欢用Quill/Parchment支持它的文本区域.
但是,每当我创建一个新的Quill元素时,我总是得到工具栏,即使我没有要求它.此外,删除工具栏会导致JavaScript错误,从而破坏页面上运行的任何其他内容.
默认值:
var config = {
"theme": "snow"
};
var quill = new Quill( ".editor", config );<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>
<div class="editor"></div>将模块设置为空对象是相同的(我相信这是默认值):
var config = {
"theme": "snow",
"modules": {}
};
var quill = new Quill( ".editor", config );<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>
<div class="editor"></div>将工具栏模块设置为false或null导致JavaScript错误:
var config = {
"theme": "snow",
"modules": {
"toolbar": false
}
};
var quill = new Quill( ".editor", config );<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/> …推荐指数
解决办法
查看次数
如何在Quill编辑器中向内容添加不可编辑的标记
我想添加一些预制的标签,如
<div class="label"> Label Text <span>x</span><div>
到主播编辑器中的html内容.添加这样的标签本身不应该是一个问题.但是我不希望用户能够编辑标签内的文本.甚至不允许将光标放在标签内.在删除时,div应删除整体.在某种意义上,整个标签应该像一个图像.可能吗 ？
推荐指数
解决办法
查看次数
如何在表单中发布Quill编辑器的内容？
我认为这是一个非常常见的情况.我通常会有这样的形式:
<form method="post">
<textarea name="text"></textarea>
<input type="submit" value="Save" />
</form>
然后用PHP我会从表单中捕获数据($ _POST ['text']),我可以在另一个变量中使用它.
现在,我想使用Quill,因此用户可以使用一个很好的富文本编辑器.Quill似乎非常适合这个,文档非常详细.但是,出于某种原因,我无法找到如何将数据"发布"到表单中.有一个单一的样本页面可以满足我的需求,但我无法在我的示例中完全实现这一点,而在快速入门指南中,这个相当基本的(对我而言)主题没有讨论,我找不到这个在文档中也是.
Quill应该像这样使用吗？我在监督什么吗？是否有推荐的方法使这项工作？
这就是我目前拥有的:
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
<form method="post">
<!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<form method="post">
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
</div>
<input type="submit" value="Save" />
</form>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Initialize Quill editor …推荐指数
解决办法
查看次数
PrimeNg错误:未定义Quill
我试图在primeng中使用编辑器控件:https://www.primefaces.org/primeng/#/editor
但是我收到了错误:
ERROR ReferenceError:在Editor.webpackJsonp .../../../../primeng/components/editor/editor.js.Editor.ngAfterViewInit中未定义Quill
我的项目使用:
- Angular Cli:1.4.1
- 角度:4.3.6
- NPM:5.4.1
- 节点:6.10.0
- PrimeNG:4.2.0
我发现了这个问题:https://github.com/primefaces/primeng/issues/807
我按照说明操作:
导入编辑器模块
import {EditorModule} from 'primeng/primeng';
安装包:
npm install quill --save
npm install @types/quill --save
更新angular-cli.json
"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ], "scripts": [ "../node_modules/quill/dist/quill.js" ],
但它仍然有同样的问题.我只是添加默认标记:
<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>
我得到错误,它看起来像这样:
我没有尝试的那个线程上唯一的东西是安装webpack插件,因为我使用的是角度cli,我不认为这是一个选项.
我可以尝试解决这个问题？
推荐指数
解决办法
查看次数
为Quill blot实现自定义编辑器
我正在尝试根据我的需要自定义Quill编辑器.我设法实现并插入自定义墨迹,如https://quilljs.com/guides/cloning-medium-with-parchment/中所述但我需要编辑数据,这些数据附加到我的墨点,如链接的URL例如.Quill的默认实现显示链接的小"内联"编辑框.我想自己实现类似的东西,但只是不明白.我没有在文档和指南中找到任何暗示.阅读Quill的源代码,我无法弄清楚链接的编辑对话框的实现位置.任何起点都将非常感激.
推荐指数
解决办法
查看次数
如何在quill js 2.0中初始化表格？
如何在quill js 2.0中初始化表格？
我尝试通过在工具栏中使用table关键字来显示表格图标，但无法创建表格。
推荐指数
解决办法
查看次数
在多个编辑器之间共享Quill工具栏
使用Javascript的Quill富文本编辑器,我试图让两个或更多编辑器共享同一个工具栏.
我想(从文档中)目前不可能立即实现这一点,所以我试图通过在编辑器上通过API添加工具栏模块来"模拟"这一点,该编辑器已被点击为后者:
// this uses jQuery
$editorTag.click(function(e){
var tag = e.target;
var editor = getEditorByTag(tag);
if( editor )
editor.addModule('toolbar',{container:'#toolbar'});
});
它似乎工作,但我怀疑Quill不喜欢在同一个对象上反复添加多次相同的模块,因为它最终会吐出:
(节点)警告:检测到可能的EventEmitter内存泄漏.11名听众补充道.使用emitter.setMaxListeners()来增加限制.quill.js(第4727行)
那么有没有办法删除以前添加的模块？就像是:
// installs editor
var editor = new Quill('#editor');
// adds toolbar module
editor.addModule('toolbar',{container:'#toolbar'});
// removes just added toolbar module
editor.removeModule('toolbar');
推荐指数
解决办法
查看次数
将原始html代码插入到quill中
是否可以选择将原始html代码插入到quill中？
quill.insertText();
quill.clipboard.dangerouslyPasteHTML()
两者都是由matcher解析的,但我需要为电子邮件页脚粘贴格式正确的html代码.
推荐指数
解决办法
查看次数