标签: quill

我想添加一个按钮,<hr>为quill.js(beta)编辑器添加一个标签.

这里小提琴.

<!-- Initialize Quill editor -->
    <div id="toolbar-container">
        <span class="ql-formats">
          <button class="ql-hr"></button>  //here my hr-button
        </span>
        <span class="ql-formats">
          <button class="ql-bold"></button>
          <button class="ql-italic"></button>
        </span>
    </div>

    <div id="editor">

      <p>Hello World!</p>
      <hr> // this gets replaced by <p> tag automatically *strange*
      <p>Some initial <strong>bold</strong> text</p>
    </div>

我初始化我的编辑器:

 var quill = new Quill('#editor', {
        modules: {
          toolbar: '#toolbar-container'
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
      });

在这里,我<h1>为我的编辑器添加了一个标签功能,它非常有效:

  $('.ql-hr').on("click",function(){

      var range = quill.getSelection();      
      var text = …

如何将Deltas转换为纯HTML？我使用Quill作为富文本编辑器,但我不确定如何在HTML上下文中显示现有的Deltas.创建多个Quill实例是不合理的,但我还没有想出更好的东西.

我做了我的研究,但我没有找到任何办法.

我更新了我所有的节点模块，当 quill 更新时，我的所有编辑器都在我的应用程序中崩溃了。错误“NullInjectorError：没有 InjectionToken 配置的提供者！” 出现了。

我已经解决了这个问题！只是想与可能在同一条船上的其他人分享。

您需要将 QuillModule (import { QuillModule } from 'ngx-quill';) 添加到 App Module 'Imports' 部分（或您正在使用的任何模块）。对我来说，我还需要添加 .forRoot() 以使其工作

imports: [
    QuillModule.forRoot(),
],

同样，这对我有用，只是让大家知道万一遇到相同的问题将 ngx-quill 更新到最新版本

我无法弄清楚如何让图像像http://quilljs.com/上的示例一样工作.

我尝试添加<span title="Image" class="ql-format-button ql-image"></span>到工具栏,添加按钮,但点击按钮什么都不做,我在文档中找不到任何内容.有什么建议吗？

我有点卡住了,我正在使用Quill JS编辑器,现在我已经到了需要在html文档中渲染编辑器的输出,并且可能是PDF文档(HTML是优先级)

我将如何呈现这样的输出:

{
  "ops": [
    {"attributes":{"bold":true},"insert":"Test Post"},
    {"insert":"\n\nThis is a test post.\n"}
  ]
}

我环顾四周,但似乎无法找到如何做到这一点.我希望有人能帮帮忙.

谢谢!

我想创建一个自定义嵌入格式,可以设置样式,但它的文本无法更改.我的用例非常类似于标签的情况.我想有一个外部按钮,它会在编辑器上为当前选定的范围添加一个#标签.但是在这样做之后我希望hashtag表现为"块",这样用户就不能去那里并改变它的文本.

我能做到这一点的唯一方法是说格式的节点是contenteditable = false但是我不确定我是否正确的方式,因为我对这种方法有一些问题,主要是:

如果主题标签是编辑器中的最后一个东西我无法移动它(用箭头或光标)双击它以选择应该选择整个事物(而不是单个单词)(用于样式)如果光标紧跟在标签后面,按下右键并写入将在主题标签内写入您可以检查我在尝试此时所做的代码:

  Quill.import('blots/embed');
  class QuillHashtag extends Embed {
    static create(value) {
      let node = super.create(value);
      node.innerHTML = `<span contenteditable=false>#${value}</span>`;
      return node;
    }
  }
  QuillHashtag.blotName = 'hashtag'; 
  QuillHashtag.className = 'quill-hashtag';
  QuillHashtag.tagName = 'span';

这是完整的代码:http://codepen.io/emanuelbsilva/pen/Zpmmzv

如果你们能给我任何关于如何实现这一目标的提示,我会很高兴的.

谢谢.

基于此链接,我尝试添加一个新按钮,它允许我在光标位置插入一个字符串.它到目前为止工作,但我不得不改变这一行:

this.quill.insertText(cursorPosition, "?");

至:

this.quill.clipboard.dangerouslyPasteHTML(cursorPosition, '<i>?</i>');

因为我希望能够使用字符串粘贴HTML标记.

现在,在下一步中,我想添加一个带有HTML标记的类:

this.quill.clipboard.dangerouslyPasteHTML(cursorPosition, '<i class="my-icon">?</i>');

但是,每当我现在单击该按钮时,该类就完全被丢弃了.事实上,我得到的标签是em,而不是标签i,它适用于我想做的事情(斜体),但它仍然很烦人.

单击按钮时,如何确保标签和类保持不变？我想要做的就是单击一个按钮,并在一个带有类的span中包含一个小字符串,以便在编辑器中显示.我怎样才能做到这一点？

我想在 quill 中导入处理程序。但我仍然收到此错误Uncaught TypeError: moduleClass is not a constructor

这就是 quill 函数的工作原理

import Quill from 'quill';

// IMAGE HANDLER
    const imageHandler = () => {
      const input = document.createElement('input');

      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');
      input.click();

      input.onchange = async () => {
        const file = input.files[0];
        const formData = new FormData();

        formData.append('image', file);

        // Save current cursor state
        const range = this.quill.getSelection(true);

        // Insert temporary loading placeholder image
        this.quill.insertEmbed(range.index, 'image', `${ window.location.origin }/images/loaders/placeholder.gif`);

        // Move cursor to right side of image …

我设法让我的 Quill 工作，但现在我想像我们在这个论坛上那样制作一个漂亮的分屏，但我无法弄清楚的一件事是如何在预览端将 Quill 的输入转换为漂亮的文本.

我能够显示文本，但它仍然包含我当然不想要的所有 html 标签。

所以这是我到目前为止的 Quill 设置：

export default class AddSpark extends Component {
  constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);

    this.state ={
      content: '',
    };
  }

  onChange(html) {
    this.setState ({ content: html });
      console.log(html)
    }

  render() {
    return (
      <div>
      <Col xs={12} md={6}>
        <form ref={(input) => this.sparkForm = input} onSubmit={(e) => this.createSpark(e)}>

            <ControlLabel>Select your city</ControlLabel>
            <select id="formControlsCity" placeholder="Choose your city" onChange={this.onChange} className="form-control" onClick={ moreOptions } ref={(input) => this.city = input}>
              <option value="select">Choose your city</option>
              <option value="Beijing">Beijing</option> …

我在javascript应用程序中使用quill文本编辑器,我需要将文本编辑器的内容检索为包含HTML的字符串,但文档在此主题上有点稀疏.