With code mirror, we can fold the code.
I would like fold all the code with brace. I found this method
How i can fold the entire code, this is my HTML script :
window.onload = function() {
var te = document.getElementById("code");
var sc = document.getElementById("script");
var te_clike = document.getElementById("code-clike");
window.editor_clike = CodeMirror.fromTextArea(te_clike, {
mode: "text/x-csharp",
lineNumbers: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
foldGutter: true,
readOnly: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
};
Thanks you for your help...
There is also a function designed to do it for you, for example:
editor.setOption("extraKeys", {
"Ctrl-Y": cm => CodeMirror.commands.foldAll(cm),
"Ctrl-I": cm => CodeMirror.commands.unfoldAll(cm),
})
CodeMirror has a foldCode plugin which enables a foldCode() method. Reference can be found here: https://codemirror.net/doc/manual.html#addon_foldcode
You can then loop through all the lines and call that function to fold the code at that particular line, like the solution here: https://groups.google.com/forum/#!msg/CodeMirror/u3IYL-5g0t4/lmK8XuTxbdQJ
cm.operation(function() {
for (var l = cm.firstLine(); l <= cm.lastLine(); ++l)
cm.foldCode({line: l, ch: 0}, null, "fold");
});
where cm is the CodeMirror instance.
Related
Somebody can help me how to custom autocomplete for ace editor?
I need to display the emoji images such as below:
This editor is work well for me, but i need to insert the emoji images to the result of autocomplete.
var editor = ace.edit('editor');
editor.setTheme('ace/theme/github');
editor.getSession().setMode('ace/mode/markdown');
editor.$blockScrolling = Infinity; //prevents ace from logging annoying warnings
editor.getSession().on('change', function () {
draceditor.val(editor.getSession().getValue());
});
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
// Ace autocomplete
var emojiWordCompleter = {
getCompletions: function(editor, session, pos, prefix, callback) {
var wordList = emojis; // list emojis from `atwho/emojis.min.js`
var obj = editor.getSession().getTokenAt(pos.row, pos.column.count);
var curTokens = obj.value.split(/\s+/);
var lastToken = curTokens[curTokens.length-1];
if (lastToken[0] == ':') {
console.log(lastToken);
callback(null, wordList.map(function(word) {
return {
caption: word,
value: word.replace(':', '') + ' ',
meta: 'emoji' // this should return as text only.
};
}));
}
}
}
editor.completers = [emojiWordCompleter]
my bad idea, i try with this meta: '<img src="/path/to/emoji.png">', but of course it can't be work.
Any idea how to solve this? Thank so much before..
There is no built in way to do this.
You can create a custom renderer similar to https://github.com/c9/c9.ide.language.core/blob/bfb5dd2acc/completedp.js#L44, or modify https://github.com/ajaxorg/ace/blob/master/lib/ace/autocomplete/popup.js and create pull request to ace.
I am trying to make Ace Editor support autocomplete for my own query language.
The query itself is something like below
city:newyork color:red color:blue
In above case, I expect the user can see 'city' and 'color' when typing 'c'. And after he selects 'color', he can directly see the two options 'red' and 'blue' in the suggestions list.
I checked all arguments of getCompletions: function(editor, session, pos, prefix, callback). But still cannot figure out the better way to do this. Any suggestion will be appreciated.
It's not possible directly or through ace editors default auto complete.
But I have sample code which may full fill your requirement.
Step-1:
You have to create editor object and set options:
ace.require("ace/ext/language_tools");
var editor = ace.edit('div_id');
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/yaml");
editor.getSession().setTabSize(4);
editor.getSession().setUseSoftTabs(true);
editor.setDisplayIndentGuides(true);
editor.setShowInvisibles(true);
editor.setShowPrintMargin(false);
editor.setOption("vScrollBarAlwaysVisible", true);
editor.setOptions({
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
});
var EditorWordCompleter = {
getCompletions: function(editor, session, pos, prefix, callback) {
getWordList(editor, session, pos, prefix, callback);
}
}
var getWordList = function(editor, session, pos, prefix, callback) {
var wordList = [];
if(prefix === 'T') {
wordList.push('List of tasks');
}
wordList = $.unique(wordList);
callback(null, wordList.map(function(word) {
return {
caption: word,
value: word
};
}));
}
Please change it as per you're requirements.
Currently trying to remove jScrollPane when the width is a certain size. It appears to be working, I can trigger alert with
if (Modernizr.mq("screen and (max-width:715px)")) {
alert('hello world');
}
And I can remove jScrollPane with click functionality
$('.st-accordion a').click(function() {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
});
But for whatever reason I can't trigger destroy(); with the modernizr conditional
if (Modernizr.mq("screen and (max-width:715px)")) {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
}
Any ideas?
Never mind, I got it by enclosing it all in the same function. A moment of clarity.
//Scrollpane
$(function()
{
$('.hs-content').jScrollPane({ autoReinitialise: true, hideFocus: true });
$('.hs-menu nav').jScrollPane({ autoReinitialise: true, hideFocus: true });
if (Modernizr.mq("screen and (max-width:715px)")) {
var element = $('.hs-content').jScrollPane({});
var api = element.data('jsp');
api.destroy();
}
});
I created a SplitButton in TinyMCE and I am using a for loop to add buttons, but for some reason the buttons' onclick is always calling the same one (the last from the for loop). It seems every time I add a menu option, the callback is being overwritten.
Let me describe what I mean.
var c = cm.createSplitButton('optionsList', {
title : 'Options',
});
c.onRenderMenu.add(function(c, m){
var Opts1 = options[0];
var Opts2 = options[1];
var Opts3 = options[2];
var sub1 = m.addMenu({title: "Options 1"});
for(var x in Opts1){
sub1.add({title: Opts1[x], onclick: function(){
tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts1[x]);
}});
}
var sub2 = m.addMenu({title: "Options 2"});
for(var y in Opts2){
sub2.add({title: Opts2[y], onclick: function(){
tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts2[y]);
}});
}
var sub3 = m.addMenu({title: "Options 3"});
for(var z in Opts3){
sub3.add({title: Opts3[z], onclick: function(){
tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts3[z]);
}});
}
});
The menus are created correctly, but for example if I select 'Options 1' and select any option, tinyMCE will print the last option from that subMenu. I don't know how to fix this.
I fixed it, so I'll answer my own question. I needed to use a closure. The solution was:
var insertVar = function(val){
return function(){tinyMCE.activeEditor.execCommand('mceInsertContent',false,val);}
};
var sub1 = m.addMenu({title: "Options 1"});
for(var x in Opts1){
var variable = insertVar(Opts1[x]);
sub1.add({title: Opts1[x], onclick: variable});
}
I need to leverage this DOM event. IE has onpropertychange, which does what I need it to do also. Webkit doesn't seem to support this event, however. Is there an alternative I could use?
Although Chrome does not dispatch DOMAttrModified events, the more lightweighted mutation observers are supported since 2011 and these work for attribute changes, too.
Here is an example for the document body:
var element = document.body, bubbles = false;
var observer = new WebKitMutationObserver(function (mutations) {
mutations.forEach(attrModified);
});
observer.observe(element, { attributes: true, subtree: bubbles });
function attrModified(mutation) {
var name = mutation.attributeName,
newValue = mutation.target.getAttribute(name),
oldValue = mutation.oldValue;
console.log(name, newValue, oldValue);
}
For a simple attribute change, the console.log statement would print:
<body color="black">
<script type="text/html">
document.body.setAttribute("color", "red");
</script>
</body>
Console:
> color red black
If you are happy with merely detecting calls to setAttribute() (as opposed to monitoring all attribute modifications) then you could over-ride that method on all elements with:
Element.prototype._setAttribute = Element.prototype.setAttribute
Element.prototype.setAttribute = function(name, val) {
var e = document.createEvent("MutationEvents");
var prev = this.getAttribute(name);
this._setAttribute(name, val);
e.initMutationEvent("DOMAttrModified", true, true, null, prev, val, name, 2);
this.dispatchEvent(e);
}
I had the same question and was thinking of modifying setAttribute, so seeing what Sean did, I copied that. Worked great, except that it was firing when an attribute was repeatedly set to the same value, so I added a check to my copy to skip firing the event if the value is not being changed. I also added val = String(val), based on the rationale that setAttribute will coerce numbers to strings, so the comparison should anticipate that.
My modified version is:
var emulateDOMAttrModified = {
isSupportedNatively: function () {
var supported = false;
function handler() {
supported = true;
}
document.addEventListener('DOMAttrModified', handler);
var attr = 'emulateDOMAttrModifiedTEST';
document.body.setAttribute(attr, 'foo'); // aka $('body').attr(attr, 'foo');
document.removeEventListener('DOMAttrModified', handler);
document.body.removeAttribute(attr);
return supported;
},
install: function () {
if (!this.isSupportedNatively() &&
!Element.prototype._setAttribute_before_emulateDOMAttrModified) {
Element.prototype._setAttribute_before_emulateDOMAttrModified = Element.prototype.setAttribute
Element.prototype.setAttribute = function(name, val) {
var prev = this.getAttribute(name);
val = String(val); /* since attributes do type coercion to strings,
do type coercion here too; in particular, D3 animations set x and y to a number. */
if (prev !== val) {
this._setAttribute_before_emulateDOMAttrModified(name, val);
var e = document.createEvent('MutationEvents');
e.initMutationEvent('DOMAttrModified', true, true, null, prev, val, name, 2);
this.dispatchEvent(e);
}
};
}
}
};
// Install this when loaded. No other file needs to reference this; it will just make Chrome and Safari
// support the standard same as Firefox does.
emulateDOMAttrModified.install();
Please refer code:
https://github.com/meetselva/attrchange/blob/master/attrchange.js
'DOMAttrModified' + ('propertychange' for IE) are used there like in your case. If it's not suitable for you, the "ugly" solution that can satisfy this demand should be setInterval(function(){}, delay)
Otherwise see Sean Hogan post above.
The solution provided by #Filip is close (and may have worked at the time) but now you need to request delivery of the old attribute value.
Thus, you'll want to change :
observer.observe(element, { attributes: true, subtree: bubbles });
to this:
observer.observe(element, { attributes: true, attributeOldvalue:true, subtree: bubbles });
Otherwise, you won't see the oldValues (you'll get null instead.) This was tested in Chrome 34.0.1847.131 (Official Build 265687) m.