繁体   English   中英

如何在羽毛笔编辑器中启用功能粘贴表

[英]How to enable functionality paste table in quill editor

我们正在尝试启用在 quill 编辑器中粘贴表格的功能,但它不起作用。

var quill = new Quill('#editor-container', {
      modules: {
        table: true,
        toolbar: [
          [{ header: [1, 2, false] }],
          ['bold', 'italic', 'underline'],
          ['image', 'code-block']
        ]
      },
      placeholder: 'Compose an epic...',
      theme: 'snow'  // or 'bubble'
    })

;

在 QuillJS 的文档中,它指出“注意:选择这个特定的例子是为了展示什么是可能的。使用现有模块公开的 API 或配置通常更容易。在这个例子中,现有的剪贴板的 addMatcher API 适合大多数粘贴自定义场景。” ( https://quilljs.com/docs/modules/ )

这意味着您可以捕获从剪贴板粘贴的文本,例如:

quill.clipboard.addMatcher(Node.TEXT_NODE, function(node, delta) {
  return new Delta().insert(node.data);
});

然后您可以适当地处理事件数据并返回您希望数据格式化的任何内容。 在您的情况下,您可以检查变量是否看起来像一个表格,并根据解析的数据正确插入一个表格。

如何调整羽毛笔编辑器的大小以适应<div> ?</div><div id="text_translate"><p> 我希望羽毛笔编辑器自动适应父&lt;div&gt;元素。</p><p> 我创建了&lt;div&gt;元素,并在其中再次创建了一个&lt;div&gt;元素,该元素将成为 quill 编辑器的容器。 工具栏是自动创建的。 我使用 css 将父&lt;div&gt;元素的大小调整为width:50%和height:50% ,我希望其中的所有内容(羽毛笔编辑器和工具栏)都适合其中,但是羽毛笔编辑器的某些部分会出现父&lt;div&gt;元素的。</p><p> <strong>HTML:</strong></p><pre class="lang-html prettyprint-override"> &lt;,-- parent div element: in which quill editor should fit --&gt; &lt;div id="parent" style="width;50%:height;70%:border:2px solid green"&gt; &lt;!-- Quill editor div --&gt; &lt;div id="editor"&gt; &lt;/div&gt; &lt;/div&gt;</pre><p> <strong>Javascript:</strong></p><pre> var tool = [[{ 'header': '1' }, { 'header': '2' }], [{ size: ['small', false, 'large', 'huge'] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }, { 'font': [] }, { 'align': [] }], ['image',]]; var option = { placeholder: 'Compose an epic...', theme: 'snow', modules: { toolbar: tool }, bounds:'#parent' }; var quill = new Quill('#editor', option);</pre><p> 我在父 div 周围放了一个绿色边框,我发现编辑器从边框出来了。 请看截图:</p><p> <a href="https://i.stack.imgur.com/RlASQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RlASQ.png" alt="截屏"></a></p><p> 注意:我只想保持父 div 的大小固定。 所以,请告诉我该怎么办?</p><p> 编辑:我将整个代码(html 文件)上传到我的服务器(<a href="http://tu.unaux.com/game.html" rel="nofollow noreferrer">这里</a>)。 问题仍然存在。 请检查一下,您可以使用“检查元素”查看整个代码。</p></div>

[英]How to resize quill editor to fit inside a <div>?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在摩纳哥编辑器中防止粘贴事件的默认功能 如何为羽毛笔编辑器设置内容? 如何使用vue-quill包关注Quill编辑器? 完成编辑后如何关闭羽毛笔编辑器 如何将 Wiris 或 Mathjax 添加到 Quill 编辑器 如何用angular和js附加多个鹅毛笔编辑器 如何调整羽毛笔编辑器的大小以适应<div> ?</div><div id="text_translate"><p> 我希望羽毛笔编辑器自动适应父&lt;div&gt;元素。</p><p> 我创建了&lt;div&gt;元素,并在其中再次创建了一个&lt;div&gt;元素,该元素将成为 quill 编辑器的容器。 工具栏是自动创建的。 我使用 css 将父&lt;div&gt;元素的大小调整为width:50%和height:50% ,我希望其中的所有内容(羽毛笔编辑器和工具栏)都适合其中,但是羽毛笔编辑器的某些部分会出现父&lt;div&gt;元素的。</p><p> <strong>HTML:</strong></p><pre class="lang-html prettyprint-override"> &lt;,-- parent div element: in which quill editor should fit --&gt; &lt;div id="parent" style="width;50%:height;70%:border:2px solid green"&gt; &lt;!-- Quill editor div --&gt; &lt;div id="editor"&gt; &lt;/div&gt; &lt;/div&gt;</pre><p> <strong>Javascript:</strong></p><pre> var tool = [[{ 'header': '1' }, { 'header': '2' }], [{ size: ['small', false, 'large', 'huge'] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }, { 'font': [] }, { 'align': [] }], ['image',]]; var option = { placeholder: 'Compose an epic...', theme: 'snow', modules: { toolbar: tool }, bounds:'#parent' }; var quill = new Quill('#editor', option);</pre><p> 我在父 div 周围放了一个绿色边框,我发现编辑器从边框出来了。 请看截图:</p><p> <a href="https://i.stack.imgur.com/RlASQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RlASQ.png" alt="截屏"></a></p><p> 注意:我只想保持父 div 的大小固定。 所以,请告诉我该怎么办?</p><p> 编辑:我将整个代码(html 文件)上传到我的服务器(<a href="http://tu.unaux.com/game.html" rel="nofollow noreferrer">这里</a>)。 问题仍然存在。 请检查一下,您可以使用“检查元素”查看整个代码。</p></div> 如何在 Vue.js 中自动对焦 Quill Editor? 如何在羽毛笔编辑器中使用ng-repeat nuxt.js中quill编辑器onkeyup的使用方法
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM