I've already added my own custom HighlightBlot to my Quill instance, but now I'd like to add event handlers for hovering and clicking on those blots, so that I can display tooltips with metadata above the highlighted text, and other fun stuff like that...
The HighlightBlot is an Inline that renders into HTML that looks like this:
foo <span class="highlight-ABCD1234">bar</span> baz
Before switching to Quill, I was just using jquery to attach the handlers, like this:
let $highlight = $("span.highlight-ABCD1234")
$highlight.hover(onHighlightHover, onHighlightUnHover);
$highlight.click(onHighlightClick);
But I don't feel comfortable doing that now, since Quill takes complete ownership of the editor DOM, and I don't want to do any direct DOM manipulation myself that might interfere. Even if I did continue using jquery to attach handlers, I'm not quite sure where in the Quill rendering lifecycle I would put the handler-attachment code.
What should I do? Does quill have a mechanism for this?
Related
I'm using Quill in a project where I need make Quill "understands" some custom code when it initializes and when the editor's content is updated from the API.
To keep it symple: lets say I have a database where I have, for example, a field with this content:
<p>Text</p><hr>
On page loading, during Quill'a initialization, I need my
Quill editor's container "accepts" this incoming code but Quill eliminates the <hr> tag.
Reading this guide (Cloning Medium with Parchment) I understood how to create a new Quill's blot and how to add a custom control button in the toolbar to insert the custom blot (lets say the <hr> tag) in my Quill's editor.
Lets call this the "outcoming flow" which I think I get it.
Unfortunately If I save the updated content (lets say <p>Text></p><hr>) in the db, refreshing the page (I'm working with PHP) the <hr> tag is not kept but is "stripped away"...
I'm reading Parchment documentation and I think I should make Parchment "accepts" the new blot (am I right?) but I'm not understanding how...
Here is a symple example: Custom line blot example.
You can see the "insert line" button is working ("outcoming flow" ok) but on page loading the <hr> tag is stripped away ("incoming flow" not ok).
I hope the explanation is clear ^^
Thanks for anyone is going to help me... ^^
Angular Strap V2's modal seems to have lost some functionality of V1, and I'm struggling to work out how to achieve what was fairly straightforward with V1 (using angular-strap's $modal service).
The documentation only shows an example where the modal is attached to a DOM element like a button and seems to be automatically wired to the click event. However I want to use other events eg SwipeLeft is a common convention for deleting something, but I'd like to pop up an "Are you sure?" modal prompt for this action. Is this possible?
Is there any way to use the V2 modal with any event other than the click event?
Looking at the source code, it looks like you can bind your own events, or use the default click event.
It should work if you add a data-trigger='myEvent' to your markup.
https://github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js#L279
I need to hide a CQ component from the page, when I select a particular value from another components dialog. Is this possible using ExtJS?
Yes, it is possible, but without more info it is difficult to give more details. In general, you can look up the xtypes you are using in your dialog at http://dev.day.com/docs/en/cq/current/widgets-api/index.html. Find the events that are available for the xtypes you are using in the dialog, then add a listener for one of the events exposed by that xtype. That allows you to run your own JavaScript code in response to an event--and that code could do things like hide HTML DOM elements.
Here is an example of using a listener to add custom functionality in response to an event: http://cq.shishank.info/2011/12/20/adding-limit-to-multifiled/
And here is another example: CQ5 - Hiding a tab within a component dialog depending on user group?
Aloha adds mousedown, blur, ... handlers to the document body, to recognice when the the Toolbar is shown/ hidden and the document selection should be changed.
Now I have a plugin (a ColorPicker), which appends itself to document body. So when I click the the element aloha recognizes that no editable element is selected and hides the toolbar.
I found two ways to prevent this and both look like really dirty hacks.
Catching the mousedown handlers and not promote them to document body.
This is bad, since the plugin requires this click handlers too.
Add the class 'aloha-dialog' to editor
Aloha seems to treat elements which have this class differently. However this seems to break some intern functionality, if it is not hidden correctly.
So did I miss some functionality, or is this not handled by a standard functionality yet?
BR,
Stefan
Aloha uses Surface.trackRange on the toolbar, so that clicks in the toolbar (which is outside the editable) don't hide it.
For example:
Aloha.require(['aloha/jquery', 'ui/surface'], function ($, Surface) {
Surface.trackRange($('#color-picker'));
});
In a renderer I'm generating links, which I want to map to my controllers functions.
The ActionColumn does this with images somehow, but I don't get the mechanism behind it.
I would like to have buttons there, but ExtJS only lets me render strings in a grid.
Well.. the question is bit confused.
If you want to implement an ActionColumn with a callback, you will only have to implement the "handler" property which is the callback. See in http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Action
Real buttons aren't possible out of the box (and note: you should not), but you can render a button on your own.
I would suggest a bunch of icons (with the ActionColumn). No buttons required.