使用 Quill 将自定义 div 添加到选定/单击的文本? [英] Add custom div to selected/clicked on text with Quill?

问题描述

在这个 演示 中有一个下拉菜单，其中包含标题 1"、标题 2"选项"和正常".我正在寻找一种使用 div 类使用我自己的选项(或添加一个新按钮而不是下拉列表)来自定义它的方法.例如，我想添加一个名为myThing"的新选项，它变成了这样:

<p>Lorem ipsum dolor sat amet</p>

进入这个:

<div class="myThing">Lorem ipsum dolor sat amet</div>

我该怎么做?

解决方案

您可以通过扩展块印迹来做到这一点.如Quilljs的本节所示指南.只需扩展块污点，并设置您的标签和类名.示例:

var Block = Quill.import('blots/block');class MyThing 扩展 Block {}MyThing.blotName = '我的东西';MyThing.className = '我的东西';MyThing.tagName = 'div';Quill.register(MyThing);var quill = new Quill('#editor', {主题:雪"，模块:{工具栏:[['我的东西']]}});

.ql-toolbar .ql-my-thing {宽度:60px！重要；}.ql-toolbar .ql-my-thing:before {内容:'我的东西';}.我的东西 {背景:#f00；颜色:#fff;}

<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="样式表"><script src="https://cdn.quilljs.com/1.3.4/quill.js"></script><div id="编辑器"><p>你好世界！</p><p>一些初始的<strong>粗体</strong>文本
<p><br></p>

In this demo there's a dropdown with the options "Heading 1", "Heading 2" and "Normal". I'm looking for a way to customize that with my own options (or adding a new button instead of dropdowns) using div classes. For example, I want to add a new option called "myThing" and it turns this:

<p>Lorem ipsum dolor sit amet</p>

into this:

<div class="myThing">Lorem ipsum dolor sit amet</div>

How do I do that?

解决方案

You can do this by extending the block blot. As shown in the this section of the Quilljs guides. Just extend the block blot, and set your tag and class name. Example:

var Block = Quill.import('blots/block');

class MyThing extends Block {}
MyThing.blotName = 'my-thing';
MyThing.className = 'my-thing';
MyThing.tagName = 'div';

Quill.register(MyThing);

var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['my-thing']
    ]
  }
});

.ql-toolbar .ql-my-thing {
  width: 60px !important;
}
.ql-toolbar .ql-my-thing:before {
  content: 'My Thing';
}
.my-thing {
  background: #f00;
  color: #fff;
}

<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>

<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

这篇关于使用 Quill 将自定义 div 添加到选定/单击的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！