EzDev.org

quill

quill - Compile-time Language Integrated Queries for Scala Quill


How to add a non editable tag to content in Quill editor

I want to add a couple of pre-built labels like

<div class="label"> Label Text <span>x</span><div>

to the html content in the quill editor. Add such a tag should not be a problem in itself. However I don't want the user to be able to edit the text inside the label. The cursor should not even be allowed to be placed inside the label. On delete the whole div should be deleted. The whole label should act like an image in some sense. Is it possible ?


Source: (StackOverflow)

Fullscreen button for Quill Editor?

I am working with Quill Editor. Its been nice so far. My question is that is there any way to make Quill Editor go full-screen (sort of distraction free mode) by a button in the toolbar? If not than how can I proceed to implement this on my own?


Source: (StackOverflow)

How can I disable the Quill editor

I have a a template which displays rich text data. When the user clicks edit I turn the template into an editable Quill editor like so:

  'click #editNote': (e, t) ->
    note = t.find '.container'
    console.log note
    basicEditor = new Quill(note)

Then once the user clicks save I want to be able to disable the Quill editor. How can I do this?


Source: (StackOverflow)

Inserting Text At Cursor Location With Quill.js

I am trying to add a custom piece of functionality ("module") to quill.js and cannot seem to do it. Here is what I need:

If want to add a button that inserts a template replacement variable... say something like {{company}} at the location of the cursor in the editor, is that currently possible with the API - I thought I could do it using insertText but I cant seem to get it to work.

Thanks


Source: (StackOverflow)

How do I create a component in Angular 2 that imports the QuillJS module?

I am fairly new to Angular 2 and TypeScript. I am using AngularCLI and NPM to create my Angular Project. I have used NPM to install the quill node module into my project. I am now trying to create a component in which I can customize my quill editor through their API.

I am trying to use:

import * as Quill from 'quill'; 

This is returning a 'cannot find quill module' error.

I have already added

"": "0.0.26",
"quill": "^1.0.4",

to package.json as dependencies.


Source: (StackOverflow)

Convert Quill Delta to HTML

How do I convert Deltas to pure HTML? I'm using Quill as a rich text editor, but I'm not sure how I would display the existing Deltas in a HTML context. Creating multiple Quill instances wouldn't be reasonable, but I couldn't come up with anything better yet.

I did my research, and I didn't find any way to do this.


Source: (StackOverflow)

How to add image in Quill JS?

I can't figure out how to get images to work like in the example on http://quilljs.com/.

I tried adding <span title="Image" class="ql-format-button ql-image"></span> to the toolbar, which adds the button, but clicking on the button does nothing and I can't find anything in the documentation. Any suggestion?


Source: (StackOverflow)

How to add image attributes in Quill editor? I want to add 'alt' and 'title' attribute

When I upload an image, only its 'src' is saved. I want to add alternate text and title for SEO purpose. I tried searching for a module in the Quill documentation, but could not find any.


Source: (StackOverflow)

How do you create custom toolbar buttons in QuillJS?

I'm using QuillJS in my application (1.0.0-beta.8) and I'm trying to extend its functionality by adding two new buttons in the toolbar. Specifically, when the user clicks on either button, an element is injected into the text area, with some CSS styling to look like a small box containing predefined text. A user can click on that box and I should be able to handle that event (changing the text and sending an Ajax request for example)

The docs are somewhat incomplete, do I need to create a Format or something?


Source: (StackOverflow)

How to render QuillJS rich-text output to HTML

I am a little stuck, I am working with Quill JS editor and have now got to the point where I need to render the output from the editor in a html document and possibly a PDF document (HTML is a priority)

How would I render output like this:

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

I have had a look around but cant seem to find out how to do this. I hope someone can help.

Thanks!


Source: (StackOverflow)

How can I add a new format (
tag) to Quill.js?

I want to add a button which would add a <hr> tag to the quill.js (beta) editor.

Here the fiddle.

<!-- 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>

I initialize my editor:

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

Here I add a <h1> tag functionality to my editor and it works very well:

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

      var range = quill.getSelection();      
      var text = quill.getText(range.index, range.length);
      quill.deleteText(range.index, range.length);
      quill.pasteHTML(range.index, '<h1>'+text+'</h1>');
  })

Now I try the same for a <hr> tag, which doesn't work at all:

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

      var range = quill.getSelection();      
      quill.pasteHTML(range.index, '<hr>');
  })

the <hr> tag in the initial div#editor gets replaced with a <p> tag. And the button functionality I added doensn't work for <hr> tags, but for other tags it works. I know the <hr> tag is not implemented to Quill.js, that's also why I get this console output:

quill:toolbar ignoring attaching to nonexistent format hr select.ql-hr

Is there any way to fix this?


Source: (StackOverflow)

How to make non selectable embed custom format in quilljs

I would like to create a custom embed format which can be styled but it's text cannot be changed. My use case is pretty similar to the hashtag case. I want to have an external button that will add an hashtag to the current selected range on the editor. But after doing this i want the hashtag to behave as a "block" so that the user cannot go there and change its text.

The only way i could accomplish this was by saying that the format's node is contenteditable=false but i'm not sure i'm going the right way as i'm having some issues with this approach, mainly:

If the hashtag is the last thing on the editor i cannot move past it (with arrows or cursor) Double clicking it to select should select the whole thing (and not individual words) (for styling) If the cursor is immediately behind the hashtag, pressing right and writing will write inside the hashtag You can check a codepen i made while experimenting with this:

  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';

Here's the full codepen: http://codepen.io/emanuelbsilva/pen/Zpmmzv

If you guys can give me any tips on how can i accomplish this i would be glad.

Thanks.


Source: (StackOverflow)

How to format text and embed a video with Quill?

I started to integrate a WYSIWYG into a blog project, I'm using Quill for this (I had no experience with it before). I was able to customize my editor the way it was required, what I don't understand is how to deal with text format and embed videos. I have two fields in my post form, "preview" and "content" (two quill editors) while introducing the text I can give format to it (header, italic, underline...etc) and when click the embed video option the editor allows me to add the link and visualize the embed video in that moment. When I press my save button it stores the post in my db but in my single post page I visualize all the fields without format (header, italic, underline...etc) and also no embed video. How can I give format and show the video? Any help would be appreciated.

I read the Quill documentation and tried to understand how to deal with this using deltas but I don't know how to make this work.

I'm using Meteor + React, this is my code (I'll show only relevant code):

This is my lib, quill.jsx

import React, { Component } from 'react';
import QuillLib from './vendor/quill.js';
import { ud } from '/helpers/lib/main.jsx';

class Quill extends Component {
  constructor(props) {
    super(props);
    this.id = ud.shortUID();
}

componentDidMount() {
  const that = this;
  const toolbarOptions = [
    [{ font: [] }],
    [{ header: 1 }, { header: 2 }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ align: [] }],
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ script: 'sub' }, { script: 'super' }],
    [{ indent: '-1' }, { indent: '+1' }],
    [{ color: [] }, { background: [] }],
    ['video'],
    ['image'],
];

const quill = new QuillLib(`#quill-editor-container-${this.id}`, {
  modules: {
    toolbar: toolbarOptions,
  },
  theme: 'snow',
});
const content = this.props.content;
  quill.setContents(content);
  quill.on('text-change', (delta) => {
    if (that.props.onChange) {
      that.props.onChange(quill);
    }
  });
}

render() {
  return (
    <div className="wysiwyg-wrapper">
      <div id={`quill-editor-container-${this.id}`}></div>
    </div>
  );
 }
}
export default Quill;

This is my input form component, list.jxs

import { Meteor } from 'meteor/meteor';
import { PostSchema } from '/modules/blog/lib/collections.jsx';
import Quill from '/modules/quill/client/main.jsx';

export class BlogCategory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      post: {
        content: '',
        preview: '',
      },
    };
    this.onPreviewChange = this.onPreviewChange.bind(this);
    this.onContentChange = this.onContentChange.bind(this);
  }

  onPreviewChange(content) {
    this.state.post.preview = content.getText();
    this.setState(this.state);
  }
  onContentChange(content) {
    this.state.post.content = content.getText();
    this.setState(this.state);
  }

  save() {
    const content = this.state.post.content;
    const preview = this.state.post.preview;
    const post = new PostSchema();
    post.set({
      content,
      preview,
    });
    if (post.validate(false)) {
      const id = post.save(); 
    }
    console.log(post.getValidationErrors(false));
  }

  renderCreatePostForm() {
   let content;
   if (this.state.showForm) {
     content = (
      <form action="">
        <Quill 
           content={this.state.post.preview} 
           onChange={this.onPreviewChange}
        />
        <Quill
           content={this.state.post.content}
           onChange={this.onContentChange}
        />
      </form>
     );
    }
    return content;
  }
  render() {
    let content = (
      <div className="col-xs-12">
        {this.renderActions()}
      </div>
    );
   if (!this.props.ready) {
    content = <p>LOADING...</p>;
   }
   return content;
  }
}
export default createContainer(() => {
  const handleValidPost = Meteor.subscribe('posts');
  return {
    ready: handleValidPost.ready(),
    posts: PostSchema.find({}).fetch(),
  };
}, BlogCategory);

And finally my collections.jsx

import { Mongo } from 'meteor/mongo';
export const PostCollection = new Mongo.Collection('Posts');
export const PostSchema = Astro.Class({
  name: 'PostSchema',
  collection: PostCollection,
  fields: {
    content: {
     validator : Validators.and([
       Validators.required(),
       Validators.string(),
       Validators.minLength(3)
     ])
    },
    preview: {
     validator : Validators.and([
       Validators.required(),
       Validators.string(),
       Validators.minLength(3)
     ])
    },
  }
});

Source: (StackOverflow)

quil js parchment error

I get a an error when trying to use a formula module in quill.

The error is:

"[Parchment] Unable to create formula blot"

Following the error message in chrome web development tools leads to the following line in registry.ts (webpack:///./~/parchment/src/registry.ts)

function create(input, value) {
    var match = query(input);
    if (match == null) {
        throw new ParchmentError("Unable to create " + input + " blot");
    }
    var BlotClass = match;
    var node = input instanceof Node ? input : BlotClass.create(value);
    return new BlotClass(node, value);
}

It happens when I try to insert a formula.

This happens when I am using the quill-rails5 but also without using the gem. I removed the gem to simplify the problem. Here is my code:

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

my editor container

  <div id="editor">
      <%= raw sanitize @post.description, tags: %w(strong em div a p br ul ol li), attributes: %w(href) %>
  </div>

Source: (StackOverflow)

Is it possible to create a custom format/blot with complex substructure?

I'm investigating the use of Quill for a project, and I need to know if it's possible to create a custom format/blot with more complexity than a single element and a single parameter.

An example of one of the layouts I want would be:

<span class="format-container">
    <span class="format-info" data-attr="param 1 (non-displayed)">
        param 2 (displayed to user -- click to invoke application UI to edit)
    </span>
    <span class="format-content">
        User's text/child elements go here
    </span>
</span>

In all cases I'm looking into, the custom formats are of inline scope and still have a single parent container and a single place for the child content to go.

Custom formats in Quill don't seem to be very well documented at the moment. I poked around in the sources and was able to figure out that this most likely isn't possible in 0.20.1. However, I feel like it could be doable in the 1.0.0 beta w/ Parchment, I'm just not sure on the specifics of what I'd actually need to write.

So is this possible in 1.0.0? If so, how could it be done?

EDIT: This is what I'm going for: Example


Source: (StackOverflow)