Is there any way to turn off Visual Studio token reference highlighting for JavaScript (even through a hack?)
I am aware of how to turn it off for C# following this guide (http://msdn.microsoft.com/en-us/library/vstudio/ee349251(v=vs.100).aspx), looks like there is no option available similar in the JavaScript tab, seems like a big oversight.
It's pretty annoying, and too much flickering occurs for my liking, especially when trying to duplicate lines then renaming, particularly working with a lot of attribute names in JSON notation or when you're moving your arrow keys across a shared object which is shown on many lines.
Eg.
I don't think this is available for all the languages. JS is one of them. As a workaround, and if you don't mind disabling for the other languages as well, why not change the Highlighing color to match your Editor's background color. Unfortunately this not available for a specific language, but common for the editor.
By doing this, it would be the same effect as if you were to turn off the Highlight references. Below is from the same MSDN post you mentioned in your question.
To change the reference highlighting color
On the Tools menu, click Options.
In the Options dialog box, expand Environment, and then click Fonts
and Colors.
In the Show settings for box, click Text Editor.
In the Display items list, click Highlighted Reference.
In the Item background box, click the appropriate color.
Related
I am building some modules to teach intro coding concepts to some of my students
http://jsbin.com/pacaxoza/3/edit
When a user writes their own function, I want the editor which is highlighting each line as it goes to jump to the function when it is called so the user can see that their function is read when they call it. All of this is in the jsbin above (the canvas with animation based on the code is not in the jsbin for clarity reasons).
In Javascript mode Ace Editor surrounds any user defined functions in a span with class'ace_function'. I could not find an easy way to find and store values from user created functions in ace methods so instead I am using JQuery to find each span with the class 'ace_function'. I am using JQuery index to find what lines those functions are on, and then passing that info to ace methods to render.
The issue is if the editor is scrolled to the top, everything works fine, but if you scroll down any in the editor and hit submit, the editor's indexing seems to be off by a couple lines of code and everything breaks down.
Does anyone have suggestions for a better way to approach this problem, or what could be causing the erratic behavior?
Thanks
Ace uses virtual viewport and creates dom elements only for visible lines, so using jquery won't work.
You need to use Ace api instead, session.getLine(number)->string, session.getTokens(number)->[{type, value}, ...].
tokenIterator might be useful as well see https://github.com/ajaxorg/ace/blob/master/lib/ace/edit_session/bracket_match.js#L34 for an example
I am working on a WYSIWYG editor (customising someone else's code) and have encountered a few problems that I just can't seem to overcome.
So far I have been able to get most custom divs working, but I am having some trouble with a few things:
Problem 1: If the cursor is before a div element, I am able to press delete and begin to remove the contents of the div without removing the actual div itself. This is how the element should look within the WYSIWYG for example:
But after pressing delete when the cursor is before the element, I get the following:
How can I check if the next element is this custom div and cancel a delete key press?
Problem 2: I am also able to press backspace after an element, which causes any text after the element to appear inside it, like so:
How can I check if the previous element is my custom div and cancel a backspace key press?
Problem 3: When inside a section (where the 'put content here' text is), I am using a div with the attribute contenteditable="true". Every time I press 'enter' within this div, a new <div> tag is created, rather than a line break tag (<br>). How can I force a line break tag to be created instead of a div element?
I have looked far and wide on stackoverflow and have yet to find a proper solution to the problem that is cross-browser.
Disclaimer: I am a CKEditor core developer.
If you want to customise this there are three ways:
You can spend few months (or more) on learning about contenteditable, ranges, selection and all that stuff and trying to implement your custom handlers. You could of course spend only one week or month on that, but the result won't be great, believe me.
You can choose good, existing WYSIWYG editor.
You can lower your expectations regarding the expected behaviour ;).
Now, if you would decide to use CKEditor there's one new feature called Widgets which was introduced in recently released CKEditor 4.3 beta (4.3 stable is going to be released in max. 2-3 weeks). As far as I can see it may be very helpful in your case. Check out the Introduction to Widgets guide. In very short - it is possible to configure how enter key behaves in so called "nested editables" as well as to secure integrity of your custom markup.
I am using the KendoUI html editor, in inline mode. It works fine, but I have found some problems with the arranging of toolbar items. Namely:
I have added custom tools to the toolbar. They are not correctly 'tagged' with the k-group-start, or k-group-end classes, and thus thir edges, and margins are not correct.
I can't influence where the toolbar puts in the 'k-group-break' item (what makes a linebreak on the toolbar).
I have tried to modify these in the selection changed event (according to the demo page, that gets fired every time I click into the edited area), but the kendo built-in logic overwrites my changes after that.
Has anyone encountered this problem? What could be a good solution? I am pretty lost, since I haven't found anything on this topic in the kendo documentation, so some hack might be needed.
Just add a tool ".Separator()" in your tools list and it will create an empty "li" ..
<li class="k-separator k-group-start"></li>
you can than style this element to create the spaces, I have made this li as a block element so it pushed everything which follows down.
Hope this helps.
Cheers
I'm looking for a good way to model something keeping track of different overlapping CSS groups, similar to the following:
This is just a test sentence for an example.
(This is) just a (test sentence) for an example.
(This is just) a test (sentence for an example.)
Depending on what radio buttons are selected, I'd like to to enable different CSS styles for each of the groups in parenthesis. So for #2 for example, (This is) will always have a different default style, and will highlight red when moused over, but only when option 2 is selected. There will be a lot of different options, so I'd like to avoid having multiple copies of the source text if necessary.
The problem is that you can't have spans overlap. The only way I could thing of doing this is giving each word multiple css classes, like:
group2_word1,group3_word1, etc..., and then do a lot of javascript coding to simulate the behavior I want. This sounds like a terrible idea to me.
Is there a better way?
I remember a javascript library that was able to do word/letter based inline text styling but I do not remember the name. All I could find out by now is a lib called rangy. Maybe you want to give it a try. I will try to find the other lib too and report back if I find it.
Take a look at the CSSClassApplierModule that could do just what you are looking for.
The Evernote Web Clipper extension for Chrome has a "lozenge" style button that is created for each Tag (Tag = word or phrase entry) you choose from an auto-complete drop-down list box. The lozenges are similar to the stack overflow Tag in that they look like small colored buttons with the Tag text in the center, and a little "x" in the upper right corner to delete the Tag. The difference is that Evernote uses a drop-down list box with auto-complete that rolls down from directly beneath where you are typing into the edit box that is accumulating your Tag choices. Therefore, as you select each tag you end up with a line of lozenges behind the entry your are currently entering. Clicking on a lozenge's deletion mini-box removes the lozenge from the edit box.
It's a pretty complex series of operations and to try duplicating it with one of the standard JQuery elements or a similar item would be a significant amount of work (especially the lozenge drawing and event handling for the delete mini-box). Is there a Javascript library that has this same function? If so, please tell me the name of the library (link if you have it) and what module or element is the one I need to study.
If you are referring to the image in the url (my reputation dont allow me to upload. :(), I believe there are some similar question with answers that points to the correct plugin.
Screenshot of Evernote Web Clipper: http://i.imgur.com/oQT6H.png
If so, answers are available here: plugin to separate tags (like the stackoverflow's input tags interface)