So I am trying to implement codemirror into my Vue.js app using https://github.com/surmon-china/vue-codemirror. The problem is that after I import and use the codemirro component everything works fine expect the line numbers (number of lines the code has) are not showing. Here is my code right out of the demo page:
<template>
<div class="root">
<nav>
<div id="logo-container">
</div>
</nav>
<div id="left-side">
<div class="codemirror">
<!-- codemirror -->
<codemirror v-model="code"
:options="cmOption"
#cursorActivity="onCmCursorActivity"
#ready="onCmReady"
#focus="onCmFocus"
#blur="onCmBlur">
</codemirror>
</div>
</div>
</div>
</template>
and here is the script:
data() {
return {
code: '',
cmOption: {
tabSize: 4,
styleActiveLine: true,
lineNumbers: true,
styleSelectedText: true,
line: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
mode: 'text/javascript',
// hint.js options
hintOptions:{
// 当匹配只有一项的时候是否自动补全
completeSingle: true
},
//快捷键 可提供三种模式 sublime、emacs、vim
keyMap: "sublime",
matchBrackets: true,
showCursorWhenSelecting: true,
theme: "monokai",
extraKeys: { "Ctrl": "autocomplete" }
}
}
}
In your codemirror configuration options there is string:
lineNumbers: false,
which turns off line numbers. Change it's value to true and it should solve the problem.
Related
I'd like to have buttons around the codemirror textarea that allow a user to unfoldAll or foldAll with the click of a button. This will avoid them having to learn shortcuts. Is it possible?
Here's the definition for the editor (the extraKeys do function as expected):
var editor = CodeMirror.fromTextArea(document.getElementById("xmlViewer"), {
mode: "text/html",
lineNumbers: true,
tabMode: 'indent',
lineWrapping: true,
autoCloseTags: true,
height: "650px",
width: "90%",
parserfile: "parsexml.js",
stylesheet: "css/xmlcolors.css",
path: "js/",
continuousScanning: 500,
extraKeys: {
"Ctrl-Q": function (cm) { cm.foldCode(cm.getCursor()); },
"Alt-F": "findPersistent",
"Ctrl-Y": "foldAll",
"Ctrl-I": "unfoldAll"
},
foldGutter: true,
autoRefresh: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
Here's the definition for the button:
<input type="button" id="expandAllBtn" value="Expand All" class="btn btn-outline-primary btn-sm" />
Here's the definition for the onclick:
$("#collapseAllBtn").on("click", function (e) {
editor.foldAll; // nothing happens
//editor.foldAll(); // error not a function
//editor.commands.foldAll(); // cannot read property of undefined
//editor.commands.foldAll; // cannot read property of undefined
});
The following is the way to accomplish this :
$("#collapseAllBtn").on("click", function (e) {
editor.execCommand("foldAll");
});
So I started with grapesjs just the other day, and so far I love it. However, I have hit a road block. In the canvas (#gjs), I have a preset div container:
<div id="container"></div>
I can create blocks/add them to the blocks section (on the front end which would produce the following structure:
<section class="row">
<div class="6">Column</div>
<div class="6">Column</div>
</section>
I can drag the button to the canvas, but I cant seem to drag it into the container (has to be above or below). I then read about components which looked more like what I needed to do. Unfortunately, I have no clue how to actually add the component to the block section or really what to do with it. I might be going about this the wrong way.
You can create a component with "div container"
{
'id' : '0001',
'data' : {
label: `<div>
<div class="my-label-block">Container</div>
</div>`,
content:`
<div id="container"></div>
`,
editable: true,
draggable: true,
stylable: true,
category: 'Basics elements',
selectable: true,
attributes: {
class: "fa",
id: '0001'
}
}
}
with options:
editable: true,
draggable: true,
stylable: true,
selectable: true,
and then, you will be able to drag your "section component into "container component".
I am using the video.js player for my website. I want to change the position of control bar elements.
Presently, it shows play/pause, volume, progress bar and full screen.
How can I able to change order?
I have my code below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: true,
autoplay: true,
fluid: true,
controlBar: {
CurrentTimeDisplay: true,
TimeDivider: true,
DurationDisplay: true
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
......
I could able resolve by making changes as below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: video.player.controls,
autoplay: video.player.autoplay,
fluid: true,
controlBar: {
children: [
"playToggle",
"volumeMenuButton",
"durationDisplay",
"timeDivider",
"currentTimeDisplay",
"progressControl",
"remainingTimeDisplay",
"fullscreenToggle"
]
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
I thought it will help somebody in future.
Taken idea from JS Bin
For the latest version (v7.15.4), some of Sankar's options listed below have changed. After some hunting around I was able to find a list here on the video.js website under the Default Component Tree.
Also when enabling them, make sure that if you have a theme that it doesn't hide some of the options.
I have a formatted / beautified text in the textarea (formatted using CodeMirror). Now I am not able to edit the textarea.
EDIT:
Here is the html portion Iam using
<div class="form-group ">
<textarea id="alertTemplate" class="form-control" placeholder="Condition " rows="5" id="comment"></textarea>
</div>
Here is the code I am using to convert the textarea content above to formatted javascript using codemirror
var editor;
var test = js_beautify(data.condition.script);
$('#alertTemplate').empty();
$('#alertTemplate').val(test);
editor = CodeMirror.fromTextArea(document.getElementById("alertTemplate"),{
lineNumbers: true,
theme: "default",
mode: "javascript",
readOnly: false
});
Make sure you have no readOnly: true in your setting.
window.onload = function () {
var readOnlyCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_readonly'), {
mode: "javascript",
theme: "default",
lineNumbers: true,
readOnly: true
});
var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_editable'), {
mode: "javascript",
theme: "default",
lineNumbers: true
});
};
<h1>Using CodeMirror (readonly and editable code)</h1>
<p>http://codemirror.net/mode/javascript/index.html</p>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/edit/continuecomment.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<h2>Readonly</h2>
<div>
<textarea rows="4" cols="50" id="codesnippet_readonly" name="codesnippet_readonly">
// Demo code (the actual new parser character stream implementation)
var readOnlyCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_readonly'), {
mode: "javascript",
theme: "default",
lineNumbers: true,
readOnly: true // This make the textarea readonly
});
</textarea>
</div>
<div>
<h2>Editable</h2>
<textarea rows="4" cols="50" name="codesnippet_editable" id="codesnippet_editable">
// Demo code (the actual new parser character stream implementation)
var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_editable'), {
mode: "javascript",
theme: "default",
lineNumbers: true
});
</textarea>
</div>
I have a (royal)slider, I need to use the next/prev nav buttons to be out of the slider div.
Lets say I have the navigation nav buttons in my footer.
<div class="my-prev-button"></div>
<div class="my-next-button"></div>
Here is some documentation but I don't know how to use this!
http://dimsemenov.com/plugins/royal-slider/documentation/#api
How can I make these two buttons work with the slider (while it is outside)
<script id="addJS">
jQuery(document).ready(function($) {
$('#slider-with-blocks').royalSlider({
arrowsNav: true,
arrowsNavAutoHide: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'none',
imageScaleMod: 'none',
autoScaleSlider: false,
imageScalePadding: 0,
slidesSpacing: 0,
autoHeight: false,
blockLoop: true,
loop: true,
numImagesToPreload: 4,
transitionType: 'fade',
autoPlay: {
enabled: true,
pauseOnHover: false,
},
block: {
delay: 400
}
});
});
</script>
<div class="slider">
<div id="slider-with-blocks" class="royalSlider rsMinW">
<div class="rsContent" data-rsDelay="5000">
some div and img here..
</div>
</div>
</div>
Style your Next and Previous div's as per your need and use below code after initializing royal-slider:
// get hold of royal-slider object
var slider = $('#slider-with-blocks').data('royalSlider');
// previous button
$('.my-prev-button').on('click', function(){
slider.prev();
});
$('.my-next-button').on('click', function(){
slider.next();
});
You can find more API's here
http://dimsemenov.com/plugins/royal-slider/documentation/#api
here an example of the solution:
http://dimsemenov.com/plugins/royal-slider/slider-in-laptop/