adding new markers to edit session

2,360 views
Skip to first unread message

alon

unread,
Mar 6, 2011, 11:34:41 AM3/6/11
to Ajax.org Cloud9 Editor (Ace)
hello,
im trying to hook up a few markers in real-time to show users
position on the current edit session.
basic collaboration showing where the users are currently marked in
the text.

I managed to get the cursor position, line and char but i cant seem to
add custom markers to annotations to the code myself.

Can someone provide me with some info about it?

this is what i did so far

editorsession.setAnnotations([{
row: editorcursor.row,
column: editorcursor.column,
text: "Strange error",
type: "info"
}]);

var markerId = editorsession.renderer.addMarker(new Range(1, 10, 1,
15),
"warning", "text");
editorsession.addMarker(range, "ace_bracketx");

nothing shows up.

alon

unread,
Mar 7, 2011, 3:48:25 AM3/7/11
to Ajax.org Cloud9 Editor (Ace)
common no one? codemirror?

Fabian Jakobs

unread,
Mar 8, 2011, 3:29:11 AM3/8/11
to ace-d...@googlegroups.com
Hi Alon,

> im trying to hook up  a few markers in real-time to show users
> position on the current edit session.
> basic collaboration showing where the users are currently marked in
> the text.
>
> I managed to get the cursor position, line and char but i cant seem to
> add custom markers to annotations to the code myself.
>
> Can someone provide me with some info about it?
>
> this is what i did so far
>
>        editorsession.setAnnotations([{
>                  row: editorcursor.row,
>                  column: editorcursor.column,
>                  text: "Strange error",
>                  type: "info"
>                }]);

This should work. The same way I do the jslint annotations.

>        var markerId = editorsession.renderer.addMarker(new Range(1, 10, 1,
> 15),
>                        "warning", "text");
>        editorsession.addMarker(range, "ace_bracketx");
>
> nothing shows up.

The second argument is the CSS class used for the marker. You need to
define the styles yourself. This is e.g. how the selection is styled:


.ace_marker-layer .ace_selection {
position: absolute;
z-index: 4;
background: rgb(181, 213, 255);\
}

in your case the CSS selector would be ".ace_marker-layer warning".

Instead of the CSS class you can also pass a function which generates
the marker's markup as second argument. This way you can have the
marker anyway you like. In this case you will have to read
lib/ace/layer/marker.js to understand how it works.

Best,
Fabian

Reply all
Reply to author
Forward
0 new messages