I'm using this quill mention module for my quill editor: https://github.com/afry/quill-mention.
My editor toolbar has an "#" button, and I was hoping that what if I click that the mention-list will appear.
Was thinking my code will be something like this:
$("button.mention-btn").on("click", triggerMention);
function triggerMention(){
if(!quill.hasFocus()){
quill.focus();
}
evt1 = $.Event('keydown');
evt1.which = 16; // shift
evt2 = $.Event('keypress');
evt2.which = 50; // 2
quill.trigger(evt1);
quil.trgger(evt2);
}
Can someone with quill-js experience please help. Thanks in advance.
As stated in the docs, the method openMenu(denotationChar):
Opens the mentions menu for the given denotation character.
In order to call this method, we need to retrieve the module from Quill like: quill.getModule('mention').
The following code should work:
function showMenu() {
quillEditor.getModule("mention").openMenu("#");
}
Codepen:
https://codepen.io/andreivictor/pen/yLbjPaQ
Related
Passing text through
sendKeys("dublin,south Africa");
It is unable to select the first element in autocomplete.
issue resolved.
this.checkin = function(text,index){
element( by.css('[ng-click="showMapTextBox2()"]') ).click();
// element(by.model("location")).sendKeys(text);
browser.actions()
.mouseMove(element(by.model("location"))
.sendKeys(text))
.perform().then(function(){
browser.sleep(500);
// press the down arrow for the autocomplete item we want to choose
for(i = 0; i < index ; i++){
browser.actions().sendKeys(protractor.Key.ARROW_DOWN).perform();
}
browser.sleep(500);
browser.actions().sendKeys(protractor.Key.ENTER).perform();
});
browser.sleep(3000);
};
spec_test code:
post_text.checkin("new Delhi, India",1);
Manually type what you want the test to perform and inspect the element of the autocomplete. You'll use protractor.ExpectedConditions to wait for that element then click on it after you send keys.
You need to do 2 things:
Enter text. Sometimes it is needed to press Tab to force the autocomplete to display options
Select appropriate drop down option
Example code in C#:
fieldElement.ClearAndSendKeys(partialValue);
fieldElement.SendKeys(Keys.Tab);
GetFieldDropdown(completeValue).Click();
GetFielDropdown() method details depending on your DOM. Here is a simplified example from a project I'm working on:
private IWebElement GetFieldDropdown(string dropdownValue)
{
return FindElement(By.XPath($"//span[contains(.,'{dropdownValue}')]"));
}
Note that if there is a delay in autocomplete being displayed above code won't work unchanged (The FindElement will not return an element). You'll need to wait for the dropdown option to be displayed before clicking on it.
PS - partialValue and completeValue can be the same
I need to mark part of the text as a link. Something like:
"Please log in with your email...". This text must be localized later.
I need that "log in" part to be the link.
When I do something like this in the render method:
var link = React.DOM.a({
href: this.makeHref('login')
},
'log in'
);// or React.createElement or
//var link = <a href={this.makeHref('login')}>
// 'log in'</a>;
<div>{'Please '+ link + ' with your email...'}</div>
It will output:
Please `[object Object]` with your email...
Without surround text, I receive the expected result. In other words: How to make react render HTML not object.
This is a simplified example - I need to insert link text with format marker {0} like in C# - or any other working solution.
Thank you for help!
If you want to use an element within another element, just use curly braces like so:
var Component = React.createClass({
render: function() {
var link = <a href={this.makeHref('login')}>log in</a>;
return <div>Please {link} with your email.</div>;
}
};
You can see a working fiddle here: https://jsfiddle.net/jrunning/fencjn4x/
If you're going to be internationalizing your app at some point in the future I recommend a) crossing that bridge when you come to it, and b) using a solution like React Intl instead of trying to build your own solution with string concatenation.
i have a table where i can turn pages, you can choose a color for a user and that color is shown in the circle, but when i turn one page, the color is gone!
I read about dom manipluation in directives, but that still didnt solve my problem:
the tutorials mostly show one with a click funktion, and i dont to click the circle
they also werent "permanent"
maybe i did something wrong? please can someone help or give me a hint?
i made also a plnkr :
Here's the link!
You need to save chosen color to currect user object. Maybe like this:
$scope.showColorPicker = function(user) {
data = $scope.colors;
dlg = $dialogs.create('/dialogs/pickColor.html','pickColorCtrl',$scope.colors,{},{key:false ,back:'static'});
dlg.result.then(function(data) {
var colnr = data;
var user_circle = angular.element(document.getElementById('color_' + user.id));
user_circle.context.style.backgroundColor = $scope.colors[colnr-1].color;
user.color = $scope.colors[colnr-1];
});
};
HTML for color circle:
<span class="smallcircle" ng-bind="color_{{user.id}}" id="color_{{user.id}}" name="color_{{user.id}}" style="background-color: {{user.color.color || 'lightgray'}};"></span>
Make sure you pass user object to showColorPicker function:
Change Color
Demo: http://plnkr.co/edit/em0ZUHjbXUNa7MYgpC5f?p=info
I am a bit stuck with this so it would be great if you could help.
I am using Drupal 7 and Ckeditor 4.3. I am developing a site which has fmath equation editor integrated.
I have disabled the image button, as I don't want end users being able to upload their own images. On the other hand, users can use fMath to insert equations. The way fMath handles equation insertion is by inserting a img tag.
When users double click this image or when they right click over the image, they access the image properties dialog, where they can change source url of the image and few other things. On the url input text, they could change the source of the image so that they could insert their own images on the page, which is something I don't want.
The have been working with two different unsuccessful approaches until now trying to solve this problem:
Removing elements from the dialog, as the URL input text on the dialog (and the alt text as well).
Trying to disable the dialog itself.
I'd like to use a custom plugin to accomplish the desired behavior as I have different CKeditor profiles in Drupal.
I haven't been successful. Do you know how could I handle this undesirable behavior?
Ok, I ended up with something like this in the plugin.js file:
CKEDITOR.plugins.add( 'custom_doubleclick',
{
init: function( editor )
{
// First part, dialogDefinition allow us to remove the
// "Link" and "Advanced" tabs on the dialog
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'image' ) {
dialogDefinition.removeContents( 'Link' );
dialogDefinition.removeContents( 'advanced' );
}
});
// Second part, it disables the textUrl and txtAlt input text boxes
editor.on( 'dialogShow', function( ev ) {
var dialog = ev.data;
var dialogName = dialog.getName();
if ( dialogName == 'image' ) {
//var dialog = CKEDITOR.dialog.getCurrent();
// Get a reference to the Link Info tab.
console.log(dialog)
dialog.getContentElement( 'info','txtUrl' ).disable();
dialog.getContentElement( 'info','txtAlt' ).disable();
}
});
}
});
As you can see I didn't disable the dialog itself, but the non useful elements. I hope this can help to someone else.
I have extJs 4.1 grid with paging. For this grid applied remoteSort(maybe remoting style of sorting doesn't matter) behaviour. After sort click(click on header) I wanna go to first page. How can I achive this? Maybe exists presort callback in what I can cancel loading data and forward loading to first page with store.loadPage(1)?
P.S. Sorry for english.
This code is part of the FiltersFeature.js file.
Take a look at how when to specify (local: false) it goes to first page automagically ;)
reload : function () {
var me = this,
store = me.view.getStore();
if (me.local) {
store.clearFilter(true);
store.filterBy(me.getRecordFilter());
store.sort();
} else {
me.deferredUpdate.cancel();
if (store.buffered) {
store.pageMap.clear();
}
store.loadPage(1);
}
}
What you have to do is configure the feature with local: false.