I have implemented quill editor in Angular by creating new instance of quill and creating custom toolbar.
this.quill = new Quill('#editor-container', {
modules: {
toolbar: '#toolbar-container'
},
theme: 'snow' // or 'bubble'
});
I have a "update" button which would call the update API. I need to check if the contents of the Quill editor has changed. I am aware of quill.on('text-change'):
this.quill.on('text-change', function(delta, oldDelta, source) {
if (source == 'api') {
console.log('An API call triggered this change.');
} else if (source == 'user') {
console.log('A user action triggered this change.');
}
});
However, I am not sure where do I place this? NgOnInit? NgAfterViewInit? I have created the quill instance in ngAfterViewInit. I know this could be a dumb question.
Any help appreciated! thanks! :)
You can put it in the constructor of the module/component.
Related
I'm using CKEditor 4.5.5 version.
I add the next code for adding nofollow.
It working fine and stored my DB. but, when I modify the post, CKEditor auto-removed ref="nofollow" attributes.
How can I loading origin attributes on CKEditor?
-- Write page. add nofollow code --
CKEDITOR.on('instanceReady', function () {
CKEDITOR.on('dialogDefinition', function (ev) {
var editor = ev.editor;
editor.dataProcessor.htmlFilter.addRules({
elements: {
a: function (element) {
if (!element.attributes.rel)
element.attributes.rel = 'nofollow';
}
}
});
});
});
You need to modify file ckeditor_config.js.
Add following code:
config.extraAllowedContent = 'a[rel]';
We are using p:textEditor (based on quill editor) in our application and we have more UI components below p:textEditor. The problem is for accessibility, the user need to tab through the components in the page using keyboard; but when it comes to p:textEditor a tab acts as adding a tab(4 spaces).
The primefaces showcase here also has the same problem, how can we navigate to the submit button from p:textEditor using keyboard?
Thanks Kukeltje, I disabled the tab key in quill editor.
For anyone who wants to do the same, you have to edit the texteditor.js file under META-INF/resources/primefaces/texteditor/ (when you reverse engineer the primefaces-version.jar (version=6.1 in my case)) and add the below code in render: function()
_render: function() {
...
this.cfg.modules = {
toolbar: PrimeFaces.escapeClientId(this.id + '_toolbar'),
keyboard: {
bindings: {
tab: {
key: 9,
handler: function() {
// do nothing
return true;
}
},
'remove tab': {
key: 9,
shiftKey: true,
collapsed: true,
prefix: /\t$/,
handler: function() {
// do nothing
return true;
}
}
}
}
};
...
}
For anyone who wants additional key customization can use the Quill Interactive Playground to validate your changes.
I am new to Firefox Addon SDK, high level API.
What I wanted to do it, if a user click the icon on the toolbar, a new tab is opened, and run the script defined in contentscriptfile.
I use the script below:
var self = require("sdk/self");
var tabs = require("sdk/tabs");
var buttons = require('sdk/ui/button/action');
var button = buttons.ActionButton({
id: "mm-link",
label: "Visit mm",
icon: {
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
function handleClick(state) {
tabs.open("about:blank");
tabs.on('ready', function (tab) {
tab.attach({
contentScriptFile: self.data.url("home.js"),
contentScriptOptions: {"aaa" : "1111", "bob" : "222"}
});
});
}
But it doesn't work as expected, and has the following problems:
The script runs repeatedly. (I wanted it run only once on each new tab)
Even if I click the "+" icon to create a new tab, the script will
run. (I wanted it only run when clicking the icon I created on the toolbar)
I have also tried to change 'ready' to 'activiate', the repeated running problem is gone, but every time I create the tab, the script will run.
Many thanks to any help.
The issue is that you're listening to the ready event of any and all tabs, rather than the one you just opened. One option is to do something like this:
function handleClick(state) {
tabs.open({
url: "about:blank",
onOpen: function onOpen(tab) {
tab.attach({
contentScriptFile: self.data.url("home.js"),
contentScriptOptions: {"aaa" : "1111", "bob" : "222"}
});
}
});
}
And attach the script using the onOpen handler. For more info the docs are here: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#open%28options%29
Is there a way to modify the MediaWiki search form in the page header other than by editing Vector.php?
Basically, I would like to change/extend the markup of the the HTML form and add a JavaScript listener for Ajax calls.
Unfortunately, I can't seem to be able to find an appropriate hook.
That's not easily possible, if you want to change the HTML. But to add a JavaScript listener you usually don't need to add something directly to the input where you want to listen for events.
You could, e.g., use jQuery to add a listener to the search input. For this you could create a new extension (read this manual for a quick start). In your extension, you create a new resource module:
{
"#comment": "Other configuration options may follow here"
"ResourceFileModulePaths": {
"localBasePath": "",
"remoteSkinPath": "ExampleExt"
},
"ResourceModules": {
"ext.ExampleExt.js": {
"scripts": [
"resources/ext.ExampleExt.js/script.js"
]
}
},
"#comment": "Other configuration options may follow here"
}
Now, you can add the script file, which you defined in the module:
( function ( $ ) {
$( '#searchInput' ).on( 'change', function () {
// do whatever you want when the input
// value changed
}
}( jQuery ) );
The code in the function (in the second parameter of the on() function) will run whenever the value of the search input changes.
Now, you only need to load your module when MediaWiki output's the page. The easiest way is to use the BeforePageDisplay hook:
Register the hook handler:
{
"#comment": "Other configuration options may follow here"
"Hooks": {
"BeforePageDisplay": [
"ExampleExtHooks::onBeforePageDisplay"
],
},
"#comment": "Other configuration options may follow here"
}
Handle the hook (in ExampleExtHooks class, which needs to be created and added to the Autoload classes):
public static function onBeforePageDisplay( OutputPage &$output, Skin &$skin ) {
$output->addModules( array(
'ext.ExampleExt.js',
) );
return true;
}
First, I added a hook:
$wgHooks['BeforePageDisplay'][] = 'MyNamespace\Hooks::onBeforePageDisplay';
The hook is pretty simple:
public static function onBeforePageDisplay( \OutputPage &$out, \Skin &$skin ) {
$skin->template = '\MyNamespace\Template';
}
Finally, the Template class overrides the renderNavigation() method, which renders the search form:
<?php
namespace XtxSearch;
class Template extends \VectorTemplate {
protected function renderNavigation( $elements ) {
...
}
}
I've got the following setup:
a button which says: "upload your file here", which is just a plain <input type="file" multiple>
When the user goes into finder and wants to drop the file, I want to show a larger area where they can drop the file, since the button isn't very big. This should only be available when the user hovers over the 'bigger input' AND is holding a file.
How do I go about implementing #2?
I have seen a stylechange on this site: http://www.dropzonejs.com/ when the user 'hovers with a file' above the upload area, but haven't been able to figure out how they do it.
Bind a function to the eventtype you want to listen to (dragover, dragenter, dragstart, dragend and dragleave) and make sure this function has at least one argument (the event). Then use event.dataTransfer. Without more details of how you want to implement it, giving example code is hard.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
FYI the dropzonejs you mentioned uses:
return function(e) {
var efct;
try {
efct = e.dataTransfer.effectAllowed;
} catch (_error) {}
e.dataTransfer.dropEffect = 'move' === efct || 'linkMove' === efct ? 'move' : 'copy';
noPropagation(e);
return _this.emit("dragover", e);
}
Above code was bound to "dragover"
You can use Javascript for File Drop Style Change :
check this Example :
// file drag hover
function FileDragHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}