quill

Creating a Quill.js theme

烈酒焚心 提交于 2019-12-23 13:11:08
问题 How do we create new themes in Quill.js? Do we have to extend an existing one? I'm only looking to update the look, not the functionality so theoretically I could just add a bunch of overrides for the default Snow theme but that's not ideal. So - how and where do we go about creating and registering a new Quill.js theme? 回答1: I'm only looking to update the look, not the functionality so theoretically I could just add a bunch of overrides for the default Snow theme but that's not ideal. I'm

Share Quill toolbar across multiple editors

不打扰是莪最后的温柔 提交于 2019-12-23 08:03:28
问题 With the great Quill rich text editor for Javascript I'm trying to make two or more editors share the same toolbar. I suppose (from documentation) that this is not possible right away at the moment, so I'm trying to "simulate" this by adding the toolbar module through API on the editor that has been clicked as the latter: // this uses jQuery $editorTag.click(function(e){ var tag = e.target; var editor = getEditorByTag(tag); if( editor ) editor.addModule('toolbar',{container:'#toolbar'}); });

Get HTML from Delta on Quill

我与影子孤独终老i 提交于 2019-12-22 05:10:57
问题 I am trying to get HTML code from delta on Quill. This is my code <!DOCTYPE html> <html> <head> <!-- Main Quill library --> <script src="http://cdn.quilljs.com/1.2.0/quill.js"></script> <script src="http://cdn.quilljs.com/1.2.0/quill.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- Theme included stylesheets --> <link href="http://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet"> <link href="http://cdn.quilljs.com/1.2.0

Quill - Make Editor wrap text in Div instead of P tag

断了今生、忘了曾经 提交于 2019-12-20 07:49:26
问题 I have built a Quill text editor in ReactJS with React-Quill. I would like to wrap the generated text in the text editor with a Div tag instead of a P tag. Is this possible? Overview of my use: When text is generated/edited in the Quill editor it is duplicated in another div on another part of the page. Our use of this editor goes back a few years, and thus was built on an older version of Quill, when the text was generated in Div's. We recently upgraded to Quill 1.0 and when the text is

Quill Editor: Restricted Editing based on tags/classes

柔情痞子 提交于 2019-12-14 01:03:45
问题 I have a scenario where I would like to give users a semi-editable template such as <p>Name: <span class="editable"></span></p> or <div> <p>Non editable content</p> <h2>Some editable content</h2> <h3>Some more editable content</h3> </div> Where specific tags or classes can either be specifically denied or allowed from editing. Additionally, these classes or tags can not overlap each other in selection (in the example, h2 and h3 can not be both selected). Considering I've only modified Quill a

Quill rich text editor resize image only works in IE but not in Chrome or Edge

心已入冬 提交于 2019-12-13 04:32:40
问题 I implemented Quill text editor to my web app. I created a web app in asp.net core 2.1 Quill text editor resizing an image working fine in IE but not in Chrome or Edge. Is this already known issue for other browsers? If so, only IE is suitable for resizing an image thru Quill editor? If you tell me only IE can resize an image thru Quill, I have to use different text editor I guess.. hope not though.. If I have to use different one, can you recommend one that is open source? Thank you in

how to override ngx-quill editor link and make it open in the same tab? By default it opens in new tab

夙愿已清 提交于 2019-12-13 04:15:19
问题 I am using quill rich editor with angular 4. Whenever I add a link it gets added with _target = "blank", which makes it open in a new tab. I want to open it in the same tab. Thanks in advance. 回答1: The target attribute is set in the link blot. You can extend the link blot to remove this attribute: var Link = Quill.import('formats/link'); class MyLink extends Link { static create(value) { const node = super.create(value); node.removeAttribute('target'); return node; } } Quill.register(MyLink,

“BlotClass.create is not a function” when trying to create a custom attributor in Quill

空扰寡人 提交于 2019-12-13 03:38:39
问题 I'm trying to create a custom style attributor in Quill to use inline styles for indentation. All I have so far is the bare minimum: class Indent extends Parchment.Attributor.Style {} const IndentStyle = new Indent('indent', 'margin-left', { scope: Parchment.Scope.BLOCK }); Quill.register(IndentStyle, true); However, when I try to apply the indent formatting via a toolbar button, I get this error in the console: ERROR TypeError: BlotClass.create is not a function at Object.create (quill.js

How to add Blots under each paragraph

元气小坏坏 提交于 2019-12-13 03:36:08
问题 I'd like to have under each paragraph in the editor an emoji that can't be edited/deleted by the user (but can be clicked). It seems that Blots are the direction to take, and https://stackoverflow.com/a/55616254/750039 seems to be the direction. However in that question the Blot is added regardless of the content. In my case: when the editor is empty no emoji should appear. When paragraphs are being written - different emojis should appear under each and every on of them When a paragraph is

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

偶尔善良 提交于 2019-12-12 07:26:57
问题 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 ? 回答1: You should be able to achieve this by