Questions tagged [quill]

1

votes
0

answer
7

Views

How do I setSelection after a text search?

I am attempting to add a search feature to Quill and want to highlight the text that it finds. I am having trouble getting the range index for the text it finds, and it is likely that I am not using the correct approach. So far, I get the text using getContents() and can find matches by iterating th...
Robert Moore
1

votes
0

answer
7

Views

Pause contenteditable repaint

I'm using a third-party library (Quill) which extends a contenteditable element. Quill works by using a MutationObserver, handling user input and then updating its internal JSON model of the document to reflect the DOM. I'd like to be able to perform more operations on the DOM after the internal JSO...
Alec
1

votes
1

answer
68

Views

How to implement a rich text editor such as Quill or Draft.js with Next.js?

I have a big application that I'm building with Next.js for SEO and performance purposes, and there's a super interactive part of this application that needs a Text Editor (such as Quill.js or Draft.js) where data in it is synced between two users using Socket.io. The problem is I can't get a Text E...
Herbot Sikaro
1

votes
0

answer
280

Views

What does the Quill.js formats()-method do?

I'm trying to implement a custom style for Quill.js that would allow nested and (hopefully) overlapping regions in the text. I'm not yet sure how to do the overlapping, but the nesting seems to be possible. I've done the usual extending of a blot kind of thing (in typescript): let Inline = Quill.imp...
MadMonkey
1

votes
0

answer
184

Views

Quilljs: TypeError when deriving custom Attributor

I'm trying to implement a potentially overlapping attribute as in this question: Overlapping Inline Annotations with Quill and this issue: https://github.com/quilljs/quill/issues/1216 Only difference is that I'm using TypeScript. This is an excerpt of my code: import Quill from 'quill'; import Parch...
MadMonkey
1

votes
1

answer
469

Views

primeng editor without toolbar

How do I switch off the toolbar on a primeNG Editor ? I am getting the Editor instance of (onInit) of the editor. However the below doesn't seem to work. The example I see from quilljs all seem to work on the basis of creating a new Quill js instance, but in this case I already have the instance? T...
oudekaas
1

votes
0

answer
306

Views

Add onclick event into the image when insertEmbed Quill editor

I have inserted the image into the Quill editor by this code: const index = self._quillInstance.getSelection(); self._quillInstance.insertEmbed(index.index, 'image', img.src); How can I insert the onclick event into the image tag have been embed?
BaoBao
1

votes
3

answer
273

Views

Failing to use transactions in Quill to INSERT one-to-many relational objects

I have a person table and animal table and in the animal table there is FK to personId since there is one-to-many relation between them. I just want to create a person and create its animals using a transaction cause I want the process to be atomic (there is no use of person in the db if I could not...
MNY
1

votes
0

answer
171

Views

Quill, how to import Emitter?

I'm trying to extend the image function in Quill. I get an error Uncaught ReferenceError: Emitter is not defined at FileReader.reader.onload So I try to import Emitter like this: var Emitter = Quill.import('core/emitter'); But then I get another error: quill Cannot import emitter. Are you sure it wa...
Brigante
1

votes
0

answer
165

Views

Android Chrome and WebView with QuillJS, native context menu blocks the toolbar?

I am working with the QuillJS editor (awesome!) for a multi-platform forum web app and I'm trying to solve a problem with Android's webview (same thing happens in the Chrome app). Basically when I long-press to select some text on the top lines of the post the native context menu covers the Quill to...
William T. Mallard
1

votes
1

answer
1.3k

Views

Setting the cursor position after setting a new delta in Quill

I'm trying insert a new sentence to a Quill's delta when an edit is made to the Quill, all the while retaining the position of the user's cursor. When an edit is made I retrieve the cursor index from quill.getSelection().index, and then after applying the new delta using quill.setContents() I attemp...
Nadav
1

votes
2

answer
281

Views

Web Component (polymer-quill) integration with Elm

I am trying to incorporate a WYSIWYG into my elm app. I have added the polymer-quill web component into my app. index.html window.Polymer = { dom: 'shady', lazyRegister: true }; src/Templates.elm div [ ] [ [ node 'polymer-quill' [] [] ] Yay, I see the WYSIWYG in my app. It works and acts like a WY...
Mark Karavan
1

votes
0

answer
282

Views

primeng editor : Add custom format to primeng editor

I have integrated the editor from primeng like so. I want to add a custom format for Bold like so let Inline = Quill.import('blots/inline'); class BoldBlot extends Inline { } BoldBlot['blotName'] = 'bold'; BoldBlot['tagName'] = 'B'; Quill.register(BoldBlot); On click of bold button I want the custom...
ASR
1

votes
1

answer
246

Views

How to paste into a text input contained within a custom Quill Embed Blot?

I've successfully used Quill to create a custom Blot that extends the Embed blot. My blot contains a text input field and a button. When I place my cursor inside of the text input and try to paste some text, the text is pasted into the Quill editor just outside of my blot. I know that the Clipboard...
pkbool
1

votes
1

answer
719

Views

placeholder variable for js function

I have instantiated four versions of quill on one page. Now I want to get the content of each. Is it possible to create a funtion that identifies which instantiated version of Quill I am referring to by sending the name. $.fn.getQuillContent = function(instantiatedquill) { var content = { text: inst...
Alan Bolitho
1

votes
2

answer
65

Views

How to use ng-repeat with quill editor

Hi im trying to use Quill editor js and use it with ng repeat. ( I got ng quill ) I need to use ng repeat . This code return me error like: quill Invalid Quill container #content245 quill Invalid Quill container #content244 quill Invalid Quill container #content243 .... I need your help ! $http.post...
Ke Vin
1

votes
0

answer
41

Views

Quill Chrome Extension Youtube hotkeys

Background I am trying to create a chrome extension which displays a quill editor on youtube for note making.I am injecting the quill editor using content script that is visible when a button is clicked on the youtube page. Problem Youtube has a lot of hotkeys configured(like f for full screen etc.)...
Jonty Shady
1

votes
0

answer
114

Views

Returns Time New Roman font instead of quill editor content font

Whatever format we paste in quill editor it automatically converted into Arial and when press submit button to show the content of editor the output text will be in Time New Roman format what can i do ? please give me some solution. HTML! Text Editor Text Editor Submit Here is the JS code! var toolb...
vikash
1

votes
0

answer
30

Views

Is it possible to create an element that can overlap another one in Quill?

I'm trying to create a custom resize blot that can resize another element like 'td' in quill editor, but I have no idea what kind of blot could achieve this. In general when doing the resize we're using another div to control the element's size we want to change. But now in quill, I don't know what...
Huimin Yang
1

votes
1

answer
113

Views

QuillJs strips span ids

I am relatively new to coding and have been running into an issue with Quilljs that I don't know how to solve. Use Case: I want to make a text editor that allows a user to write their notes but then be able to go back and annotate the text. Similar to google docs in the sense that people can add com...
Nic B
1

votes
0

answer
208

Views

Quill code block formatting

In Quilljs editor code block are wrapped with . I'd like to use prismjs as code highlighter, but it requires to wrap code blocks in ... I've been struggling to find a way to implement this for a couple of days now. Is there a way to make quill use this structure instead of the default?
Dmitry Oleinik
1

votes
0

answer
79

Views

Uncaught Error: [jqLite:nosel] http://errors.angularjs.org/1.5.11/jqLite/nosel & Warning: Tried to load angular more than once

I wanted to add ng-quill rich text editor for my project. For that, I have installed quill and ng-quill using bower. (Referred :ngQuill Documentation && quill is not a constructor issue) bower.json: 'quill': 'https://github.com/quilljs/quill/releases/download/v1.1.5/quill.tar.gz', 'ngQuill': 'ngq...
Harshal Khatri
1

votes
0

answer
37

Views

How to set data per paragraph on Quill.js?

I'm currently trying to trigger an event for each paragraph in a text-box which is controlled by Quill.js. However, every time I create a new paragraph, the data on the attributes is transferred to the new paragraph. Is there a way to conserve paragraph data without it being duplicated? I tried sett...
Samuel
1

votes
0

answer
156

Views

Quill Editor - Focus

Whenever I create another instance of the editor (in my case, through an onkeypress event), I lose focus on the editor I was typing on when the new editor is created. How can I prevent all editors from losing focus on any event?
jj008
1

votes
0

answer
131

Views

Quill wrap text with custom div (includes attributes) on drag into editor

The browser allows us to highlight text, grab it with the mouse, and drag it around. I'd like to drop this text into a QuillJS editor but when I do so for a div (in Chrome) it only takes the text and wraps it in a P tag. If I drag an H1 it keeps the attributes on the H1, but also aggregates all styl...
Loading...
1

votes
1

answer
258

Views

react-quill custom save button to firebase

Okay, so I am trying to build a react based notes application that saves to firebase. I'm using react-quill as my text editor and currently, I am having trouble sending the data of the editor off to firebase when I click a custom save icon that I inserted to the toolbar. I've been messing around w...
Fofaster
1

votes
0

answer
40

Views

How can I override the onpaste function for the editor in QuillJS?

I have set up a web app that sends server requests when we focus or blur from the the root div in quill (because of the system constraints I cannot change). However, the onpaste function in quill calls blur and focus manually, and that causes issues for my workflow. How do I override the onpaste fun...
McFiddlyWiddly
1

votes
1

answer
76

Views

Webpack QuillJS outputs SVG path instead of inlining it

Im trying to install QuillJS with Symfony-Encore. Somehow the SVG-Icons for the toolbar do not load as expected. The output just shows the SVG`s path: /build/images/bold.89e9c638.svg /build/images/italic.b802b8f9.svg How do I resolve this path and embed or link the corresponding svg-icon? I gues...
psren
1

votes
1

answer
86

Views

Quill onconflictupdate multiple values

Is it in quill somehow possible to update multiple values on a conflict? E.g like this: val a = quote { query[Product] .insert(_.id -> 1, _.sku -> 10) .onConflictUpdate((t, e) => t.sku -> (t.sku + e.sku), t.abc -> e.abc) } I tried it like the way above and always got a 'not found: value t' error whe...
Syrius
1

votes
0

answer
22

Views

Replace the default block with figure

Currently, i'm buiding my rich text editor with quill and i need to create an embed for images. Before quill, i used to use redactor and i try to move to redactor. But, i already have 2 version of data from redactor before where the users is already uploaded images. Version 1: Version 2: Expected be...
Santo Sidauruk
1

votes
0

answer
37

Views

quill add tooltip on custom blot

I can't figure out how to add a tooltip on a created custom blot. Something like what is natively happening on links My custom blot is displayed in the text editor with cusom tag class CustomBlot extends BlockEmbed { static create(value) { let node = super.create(); node.setAttribute('object', 'ins...
lil-works
1

votes
0

answer
15

Views

Quill is it possible to run default module action plus customised one

I'd like to insert image in the default way Quill does it (as the blob) but also I'd like to run some extra code when adding image. I know that I can add handler like: quill.getModule('toolbar').addHandler('image', () => { // custom code here }); but that's overwriting default action.
Artur79
1

votes
1

answer
56

Views

HTML elements injected via JS (quilljs) conflicting with flexbox

I'm trying to create a very simple page, essentially no different than stack overflow's layout in that there is a sidebar and a 'content' area which can scroll. My content area however is meant to be taken up entirely by a quilljs text editor. I just create a div and tell quilljs to use that div for...
rossoneri
1

votes
0

answer
54

Views

Add custom classes in Quill

So I readed through the Docs and stuff but simply didnt find a simpel example that I can build up on. I have for example the Tag, now i simpyl wanna set a default in the Editor that every blockquote has a specific class. How can I accomplish that?
Badgy
1

votes
1

answer
90

Views

How to set content for quill editor?

I am trying to set content like this: quill.setContents('some text '); But it does not work. Please help.
1

votes
1

answer
60

Views

issues with running script to read from mysql and insert into mongo (multithreading issues) using play framework

I have a script that I want to run to go over mysql table that have around 4M records, and for each one I perform another call another mysql table to get more data, from this data I create a new object and insert it to mongodb. so basically I want to perform migration from mysql to mongodb im using...
JohnBigs
1

votes
0

answer
53

Views

Vuejs: Fullscreen the editor only in quilljs

I'm trying to write an editor for richtext in my vue-2 application with 'vue-quill': '^1.5.0-0',. Everything is working fine, but I need fullscreen button to fullscreen and normalscreen back on button click. I tried: Fullscreen button for Quill Editor? It seems not to be what I'm looking for....
Nodirabegimxonoyim
1

votes
0

answer
24

Views

highlight not working in the quill editor

I followed the documentation of the two, but the syntax highlighting is not working. I have already added python and javascript code and none of them got syntax style. My code: Hello World! Some initial bold text var toolbarOptions = [ ... var quill = new Quill('#editor', options); hljs.initHighligh...
marcos souza
1

votes
1

answer
54

Views

Insert custom html into quill editor

I use Quill for my send mail form and in my toolbar I have a drop down with the signatures. When I select a signature I have to insert custom and complex html code (formatted and with img) in the editor, when I change signature I have to replace inserted html code. I inserted the code in a p tag spe...
1

votes
0

answer
19

Views

Why not work react-quill getEditor of null

I am creating a reactivejs application in Project with content edited with React Quill. My application allows you to add getEditor (). My problem is that it does not work Help me, i'm deaf... I do not know, I'll explain... 'Ref' and 'getEditor()' do not work. TypeError: Cannot read property 'getEdit...

View additional questions