content editable on enyo tags
posibilidad de añadir contentEditable en los tags de ENYO y escuchar sus eventos
by EDWIN MAURICIO QUISHPE MALDONADO
JavaScript
enyo.setLogLevel(99);
enyo.kind({
name: "saveCaret",
fit:true,
class:"enyo-fit",
components: [
{kind: "onyx.Toolbar", components: [
{kind: "onyx.Button", content: "Insert", ontap: "insert"},
]},
{tag: "br"},
{tag: "p", content: "Texto editable", attributes:{contentEditable: true}, onDOMFocusOut: "pChange", name:"texto"},
{tag: "br"},
{kind: "onyx.InputDecorator", components: [
{name: "text", kind: "onyx.RichText", value: "some text<br>more text", onblur: "storeFocus"}
]},
{kind: "enyo.Input", name: "myInput", placeholder: "Enter some text...", onchange: "inputChange"}
],
create: function(){
this.inherited(arguments);
//enyo.dispatcher.listen(document, "DOMCharacterDataModified");
enyo.dispatcher.listen(document, "DOMFocusOut", onblur);
},
storeFocus: function(inSender) {
this.el = inSender.name;
console.log("Pierde el focus");
},
insert: function() {
enyo.log();
this.$[this.el].focus();
if (this.el) {
this.log(document.activeElement);
this.log(this.$[this.el].getSelection());
this.$[this.el].insertAtCursor("[123]");
}
},
inputChange: function(inSender, inEvent) {
// retrieve new input value
newInputValue = this.$.myInput.getValue();
console.log(newInputValue);
// do something in response
},
pChange: function(inSender, inEvent) {
// retrieve new input value
//newInputValue = this.$.myInput.getValue();
//console.log(inSender);
//console.log(this.$.texto);
if (inSender.hasNode()) {
// return this.node.innerHTML;
console.log(inSender.hasNode().innerHTML);
}
console.log(inSender.getContent());
// do something in response
}
});
new saveCaret().renderInto(document.body);