I have some Froala Editor inputs and I want to use generic propierties for all of them and then add some custom properties according to the current input.
For assign the froala object I use this code:
new FroalaEditor('.froala-editor-inline-horari', {
toolbarInline: true,
placeholderText: 'Editar',
toolbarButtons: [
['bold', 'italic'],
['textColor', 'backgroundColor']
],
events: {
contentChanged: function () {
guardarFila(this);
}
},
spellcheck: false
});
I want to use some generic properties as a constant like:
const FROALA_PROPERTIES = {
toolbarInline: true,
placeholderText: 'Editar',
toolbarButtons: [
['bold', 'italic'],
['textColor', 'backgroundColor']
],
events: {
contentChanged: function () {
guardarFila(this);
}
},
spellcheck: false
});
and then add to this object some modification like:
events: {
initialized: function () {
this.html.set('some value');
}
so, in this example I want to obtain the first object FROALA_PROPERTIES plus the new events: {...} key.
Is it this possible?
I answer myself because I found the solution. I can add this keys and values or functions by the next code:
FROALA_PROPERTIES.events.initialized = function () {
this.html.set('some value');
}
But if events key doesnt exist, then I need to create it first.
I based my andwer by this web research: http://researchhubs.com/post/computing/javascript/add-a-key-value-pair-to-a-javascript-object.html
Related
To prevent the tab-event to be fired in my Angular 5+ component, I overrode the standard quill implementation for the tab-event with a binding as mentioned in the documentation
const bindings = {
// This will overwrite the default binding also named 'tab'
tab: {
key: 9,
handler: function(range) {
// Handle tab
},
},
};
As we don't want to deal with nested ordered or unordered lists, I expected the tab-event not to be triggered on empty list entries.
Does anyone knows how to modify a custom handler to prevent this functionality?
You must define the 'modules' property on this way:
var quill = new Quill('#editor', {
modules: {
keyboard: {
bindings: {
indent: {
key: 'Tab',
handler() {
return false;
},
},
outdent: {
key: 'Tab',
shiftKey: true,
handler() {
return false;
},
},
}
}
}
});
Well, there are other default handlers for tab like indent, outdent and outdent backspace. You can check this file https://github.com/quilljs/quill/blob/develop/modules/keyboard.js#L184
So you have to overwrite more :)
Need to bind my form elements separately for different buttons. Using allowBlank in elements for sending binding conditions and formBind in buttons for binding the buttons. Need to do this like in this simplest way. (ExtJs 4.2.1 Classic)
Example
Ext.create('Ext.form.Panel', {
......
items: [
Ext.create('Ext.form.field.Date', {
.....,
allowBlank: false, //bind for both search & download button.
.....
}),
......, //// All rest elements bind for both search & download button.
Ext.create('Ext.form.ComboBox', {
......,
allowBlank: false, //bind for only download button.
......
})
],
buttons: [
{
text: 'Search',
formBind: true, /// Need to bind for specific field only.
},
{
text: 'Download',
formBind: true, /// Need to bind for all.
},
............
});
If any other data or details is necessary then please don't hesitate to ask.
I created a fiddle here that I think should accomplish what you're trying to do. The idea to use an event listener on the combobox, instead of the formBind config of the Download button:
https://fiddle.sencha.com/#view/editor&fiddle/289a
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
itemId: 'exampleForm',
items: [Ext.create('Ext.form.field.Date', {
allowBlank: false, //bind for both search & download button.
}),
Ext.create('Ext.form.ComboBox', {
allowBlank: false, //bind for only download button.
listeners: {
change: function (thisCombo, newValue, oldValue, eOpts) {
if (Ext.isEmpty(newValue)) {
thisCombo.up('#exampleForm').down('#btnDownload').setDisabled(true);
} else {
thisCombo.up('#exampleForm').down('#btnDownload').setDisabled(false);
}
}
},
store: ['item1', 'item2']
})
],
buttons: [{
text: 'Search',
formBind: true, /// Need to bind for specific field only.
}, {
itemId: 'btnDownload',
text: 'Download',
disabled: true
//formBind: true, /// Need to bind for all.
}]
});
There is no standard quick way to do this, you might want to write a plugin for this. I've put together one:
Ext.define('App.plugin.MultiDisableBind', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.multidisablebind',
/**
* #cfg
* Reference to the fields that this button depends on.
* Can contain either direct references, or a query selectors that will be
* executed with the button as the root
*/
depFields: null,
/**
* #property
* A map object with field ids as key, and field values as value
*/
valuesMap: null,
init: function (cmp) {
this.setCmp(cmp);
cmp.on('render', this.setup, this);
},
setup: function () {
var cmp = this.getCmp(),
depFields = this.depFields,
valuesMap = {};
if (!Ext.isArray(depFields)) {
depFields = [depFields];
}
Ext.Array.forEach(depFields, function (field) {
if (Ext.isString(field)) {
field = cmp.query(field)[0];
}
cmp.mon(
field,
'change',
Ext.Function.createThrottled(this.updateValuesMap, 300, this),
this
);
valuesMap[field.getId()] = field.getValue();
}, this);
this.valuesMap = valuesMap;
this.updateCmpDisabled();
},
updateValuesMap: function (depField, newValue) {
this.valuesMap[depField.getId()] = newValue;
this.updateCmpDisabled();
},
updateCmpDisabled: function () {
var cmp = this.getCmp(),
toDisable = true;
Ext.Object.each(this.valuesMap, function (fieldId, fieldValue) {
if (!Ext.isEmpty(fieldValue)) {
toDisable = false;
return false
}
});
cmp.setDisabled(toDisable);
}
});
You can use this plugin in your buttons like so:
xtype: 'button',
text: 'My button',
plugins: {
ptype: 'multidisablebind',
depFields: ['^form #fieldQuery', fieldVar]
}
In the depFields config you specify references to the fields that button's disabled state depends on, and the plugin will monitor these fields, so that on each field value change it will update the disabled state.
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/28cm
I have created a fiddle for you. The code uses bind and formBind respectively for the two different buttons. May be you want something like this.
I know that the default behaviour of a object when we create new atributes for the same instance is that it reference the old, changing the properties.
I have something like this on my vue data:
export default {
data() {
return {
paragraph: {
text: "",
fontSize: 14,
key: "Paragraph",
align: "left"
}
}
},
methods: {
addParagraph() {
this.$set(this.paragraph, 'key', this.paragraph.key);
this.$set(this.paragraph, 'text', this.paragraph.text);
this.$set(this.paragraph, 'fontSize', this.paragraph.fontSize);
this.$set(this.paragraph, 'align', this.paragraph.align);
this.$store.commit("appendToDocument", this.paragraph)
},
alignment(option) {
this.paragraph.align = option;
}
}
everytime i click a button the data inside the paragraph changes and i want to pas the data to vuex store to add it to a json, so i can have a tree of paragraphs, the problem is, that everttime i create a new paragrapg it changes the values of my other paragraphs created before, is there a way to change it?
#Potray answer is good. But it can be even shorter if you are using Babel with stage-3 (spread operator). Then you can copy all properties with that syntax
addParagraph() {
this.$store.commit("appendToDocument", { ...this.paragraph })
},
Try this:
addParagraph() {
var paragraph = {
key: this.paragraph.key,
text: this.paragraph.text,
fontSize: this.paragraph.fontSize,
align: this.paragraph.alignkey,
}
this.$store.commit("appendToDocument", paragraph)
},
Hello stackoverflow community,
i just built a Codemirror Editor into an ExtJSProject like so:
addCodeMirrorPanel: function() {
this.getAixmFormarea().add(Ext.widget({
xtype: 'textarea',
fieldLabel: 'AIXM',
autoScroll: true,
name: 'aixm',
id: 'codearea',
width: 800,
height: 300,
resizable: true,
resizeHandles: 's se e',
listeners: {
afterrender: function () {
var textarea = Ext.getCmp('codearea');
var codemirror = CodeMirror.fromTextArea(textarea.inputEl.dom,{
lineNumbers: true,
content: '',
matchBrackets: true,
electricChars:true,
autoClearEmptyLines: true,
extraKeys: {"Enter": "newlineAndIndentContinueComment"}
});
}
}
}));
}
Now what i want to do is access the codemirror editor from a different Controller function
and im not quite sure about how to do that.
no getinstance() , geteditorbyID() or similar methods are specified in the codemirror manual and i cant seem to access it from the now hidden textfield either.
Well why are you discarding the instance after you are creating it? Perhaps you could simply store it on the widget?
this.codeMirror = CodeMirror.fromTextArea(...);
I ran into a similar issue and was originally using the answer provided by plalx. However, if you are in need of creating instances of codemirror's dynamically this can get tricky.
I used the following code and created a method on the parent component to getValue(), setValue(), and getCodeMirror()
So in use you can get the codemirror instance similar to this:
var codeMirror = Ext.ComponentQuery.query('#parentFld')[0].getCodeMirror();
Here is the component code:
{
fieldLabel: 'Code Instance',
itemId: 'parentFld',
border: 1,
html: '<textarea></textarea>',
/* Overriding getValue function of the field to pull value from the codemirror text area*/
getValue: function (value) {
return this.getCodeMirror().getValue();
},
/*Overriding setValue function of the field to put the value in the code mirror window*/
setValue: function (value) {
this.getCodeMirror().setValue(value);
},
getCodeMirror: function () {
return this.getEl().query('.CodeMirror')[0].CodeMirror;
},
listeners: {
//on render of the component convert the textarea into a codemirror.
render: function () {
var codeMirror = CodeMirror.fromTextArea(this.getEl().down('textarea').dom, {
mode: {
name: "text/x-sql", globalVars: true
},
//theme: theme,
lineNumbers: true,
readOnly: false,
extraKeys: {"Ctrl-Space":"autocomplete"}
});
codeMirror.setSize(700, 370);
}
}
}
A javascript error indicating that this.rename(obj) is not defined when selecting to rename a node.
JavaScript runtime error: Object doesn't support property or method 'rename'
$(document).ready(function () {
$('#marketing-category-tree').jstree({
themes: {
theme: "default",
dots: true,
icons: true
},
contextmenu: {
items: {
"rename" : {
"label": "Rename",
"action": function (obj) { this.rename(obj); }
}
}
},
plugins: ["themes", "html_data", "ui", "crrm", "contextmenu"]
})
.bind("rename.jstree", function (e, data) {
debugger;
alert("RENAMING!!!");
});
});
I have also tried the following code and am able to select and do a rename but cannot capture the change event.
$('#marketing-category-tree').jstree({
themes: {
theme: "default",
dots: true,
icons: true
},
plugins: ["themes", "html_data", "ui", "crrm", "contextmenu"]
})
.bind("rename.jstree", function (e, data) {
alert("RENAMING!!!");
});
I think the method you are looking for is edit. But first you have to get the node of the tree. Try to use this code below:
...
"contextmenu" : {
"items" : renameItem : { // The "rename" menu item
label : "Rename",
action : function (obj) {
n = $('#marketing-category-tree').jstree(true).get_node(obj.reference); //get node
$('#marketing-category-tree').jstree(true).edit(n); //puts the node into edit mode
}
}
}
...
HTH
Your first code example ain't gonna work because
"action": function (obj) { this.rename(obj); }
in this case "this" is a point to Window object the next things is that documentation http://www.jstree.com/api/ doesn't have mentions of method rename and only rename_node
Here is the working example (right click at any node and then click on rename)
http://jsfiddle.net/w9snc6z1/4/
Pay attention that rename_node also not working but according to documentation
set_text: set the text value of a node. Used internally, please use rename_node(obj, val).
it's not recommended to use set_text instead of rename_node.
you should get node of the tree with var tree = $("#marketing-category-tree").jstree(true);then operate on nodes.
u can use this example
goodluck
:)