How to use onyx.RichText and moveCursor: function(inDirection, inAmount)

I am trying to highlight/style text when a user types in certain text into a RichText box. To do the actual highlighting I am wanting to use moveCursor: function(inDirection, inAmount) to go back then use insertAtCursor: function(inValue) to add styling code to before and after text. I am having a hard time understanding a few things from the documentation (http://enyojs.com/docs/2.4.0/api.html#enyo.RichText::moveCursor).
This first thing I am trying to figure out is what value moveCursor is requiring in the inDirection parameter. I've tried using numbers and quoted/unquoted text such and right or back.

Comments

  • Basicly, where is the Editing API located it is referencing to in the documentation. Also, is it possible to retrieve the location of the cursor in the RichText box or the character that was just typed in? I am currently using the event onkeypress .
  • Check out the Selection API, specifically the documentation on modify: https://developer.mozilla.org/en-US/docs/Web/API/Selection/modify
  • One problem you'll find is that moveCursor and friends don't work in Firefox. :-(
  • edited April 2014
    Thanks for the help! And ya it doesn't work to well in Firefox so I am going to be using require.js to load a module to get what I need to work. Only problem is I am having a little trouble with finding out how to marry require.js with enyo. I am loading the script files in debug.html but getting some errors in the console:
    Uncaught SyntaxError: Unexpected identifier source/App.js:21
    Uncaught ReferenceError: App is not defined debug.html:26
    XMLHttpRequest cannot load file:///home/rennat/Development/CodeEditor/App.js. Cross origin requests are only supported for HTTP. require.js:2334
    Uncaught NetworkError: A network error occurred. require.js:2334
    Uncaught Error: Load timeout for modules: App
    The first and second console lines are because it didn't load properly. I am thinking some additional code needs to be added. Maybe I need a separate main.js. All the documentation is found below:
    http://requirejs.org/docs/errors.html#timeout
  • I'd guess that running the app from a local web server would work.

    Can you share the code that's causing the error?
  • edited April 2014
    I'm actually not 100% I need to use require.js.The actual module I am going to be using is CodeMirror (http://codemirror.net/index.html) It's a open source code editor written in javascript.
    I am having trouble being able to load it where I need it. I have been able to render it to document.body and use it to replace a text box I made with enyo.TextArea using the below lines when I tap a button. (It replaces it using an api it has) I know that using getElementById isn't conventional but it is the only way I have found to get it to work as enyo renders enyo.TextArea as a regular html textbox. The documentation for it is here: http://codemirror.net/doc/manual.html any help would be much appreciated
    I just need to figure out how to preferably load it at runtime within the "Editor" Panel the enyo code.
    enyo.kind({
    	name: "App",
    	components: [
    		//{kind: "appPanels", style: "height: 100%"},
    		{name: "appPanels", kind: "Panels", arrangerKind: "CollapsingArranger", narrowFit: false, index: 1, classes: "app-panels", components: [
    			{name: "Files", classes: "files-panel panels-background", components: [ 
    				{kind: "onyx.Toolbar", classes: "height-toolbar", components: [ 
    					{content: "Files"}
    				]},
    				{kind: "enyo.Scroller", classes: ""}
    			]},
    			{name: "Editor", classes: "code-panel panels-background", components: [
    				{kind: "onyx.Toolbar", components: [
    					{kind: "onyx.Grabber"},
    					{content: "Code Editor"},
    					{kind: "onyx.Button", name: "calcButton", content: "Calculator", ontap: "showCalc"},
    					{kind: "langMenu"},
    					{kind: "onyx.Button", name: "codeButton", content: "Rich Text", ontap: "addCodeMirror"}
    				]},
    				{kind: "enyo.TextArea", name: "textBox", id: "textBox"}
    				
    			]}
    		]},
    		{kind: "slideCalc", name: "Calc"}
    	],
    	showCalc: function(inSender, inEvent) {
    		this.$.Calc.toggleMinMax();
    	},
    	addCodeMirror: function(inSender, inEvent) {
    		CodeMirror.fromTextArea(document.getElementById("textBox"));
    			
    	},
    	richtext: function(inSender, inEvent) {
    		
    		
    		this.$.code.moveCursor("left", "word");
    		this.$.code.insertAtCursor();
    		this.$.code.moveCursor("Right", "word");
    	}
    });
  • You can get a reference to the DOM node using hasNode(). That will return a valid node once it has been rendered which you can hook by overriding the rendered() method of enyo.Control.

    Perhaps a custom kind something like this:
    enyo.kind({
        name: "ex.CodeMirror",
        kind: "TextArea",
        rendered: enyo.inherit(function(sup) {
            return function() {
                sup.apply(this, arguments);
                CodeMirror.fromTextArea(this.hasNode());
            };
        })
    });
Sign In or Register to comment.