I am using codemirror to show some code on a webpage. But when I initialize the codemirror editor, the height of the editor is way more than the number of lines in the code. Please see this fiddle or below image to understand what I am saying Below is the code to create the codemirror editor.
var myCodeArea = document.getElementById("codeArea");
var myCodeMirror = CodeMirror(function(elt) {
myCodeArea.parentNode.replaceChild(elt, myCodeArea);
}, {value: myCodeArea.innerHTML,
lineNumbers:true, mode:"javascript"});
I read codemirror doc but not able to figure out which property controls the height.
Please help me with this
The height can be set through CSS (by giving the .CodeMirror class a height property), or by calling the editor's setSize method.
If you want the editor height to correspond to the height of it's contents, see this demo.
If you see your fiddle, there is an entry in css which defines height.
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
}
You can either override this css or use setSize(width,height) method of codemirror.
Might help someone.
<textarea class="form-control" id="exampleTextarea"></textarea>
.
var config, editor;
config = {
lineNumbers: true,
mode: "text/javascript",
lineWrapping: true,
htmlMode: true,
matchClosing: true,
indentWithTabs: true,
readOnly: true
};
editor = CodeMirror.fromTextArea(document.getElementById("exampleTextarea"), config);
editor.setSize(900,"100%");
Related
I want to give vertical height manually in a bootbox prompt.
Here is the bootbox, We can fix it exactly in the center but I want to place it slightly above.
$('#btnNewPra').on('click',function(){
bootbox.prompt({
size: "small",
title: 'Spot',
margin: '50px' ,
// centerVertical: true,
callback: function(result){
}
})
})
Your simplest option is to use the className option and some custom CSS, like so: https://jsfiddle.net/6vmjpx3y/
bootbox.prompt({
size: "small",
title: 'Spot',
className: 'mini-box',
centerVertical: true,
callback: function(result) {
}
})
and
.mini-box .modal-dialog-centered .modal-content {
margin-top: -50px;
}
The className value would be whatever makes the most sense for you. There are probably other ways of accomplishing this, but using the centerVertical option adds the .modal-dialog-centered class to the dialog wrapper. You can then apply a negative margin to the .modal-content class (the outermost "visible" part of the modal) to pull the dialog up your desired amount from the center of the viewport.
In TinyMCE editor, is it possible to turn on the resizing handles on div like they are available on images?
The object_resizing setting can only take true, false, img as possible values.
See https://www.tinymce.com/docs/configure/advanced-editing-behavior/#object_resizing
The TinyMCE source code has a isResizable function which contains
if (typeof selector != 'string') {
selector = 'table,img,figure.image,div';
}
and a showResizeRect function which activates the resizing handles.
I have not been able to activate it for a div.
This is what I have tested so far :
editor.addButton('Test', {
text: 'Test',
onclick: function() {
editor.selection.getNode().setAttribute("data-mce-resize","1");
console.log(editor.selection.controlSelection.isResizable(editor.selection.getNode()));
editor.selection.controlSelection.showResizeRect(editor.selection.getNode());
}
});
isResizable is false
Any clue?
Your code works fie on my end:
http://fiddle.tinymce.com/cugaab
I add type to the editor, highlight and use the bottom Formats>Blocks>Div option to put a div around it, use your test button and I get resize handles and the console logs 'true'.
Resized div image
I am trying to remove the status bar and keep the resize icon in tinymce just like a normal text area resizer. Any idea ?
elementpath
This option allows you to disable the element path within the status bar at the bottom of the editor.
Type:
Boolean
Default Value:
true
Possible Values:
true, false
Example
tinymce.init({
selector:'textarea',// change this value according to your HTML
elementpath:false
});
TinyMCE does not support what you are trying to do via configuration. The resize handle is only visible via the status bar.
Unfortunately, there is no way to do it via component settings. But you can try and change css:
your-tiny-mce-textarea .mce-path.mce-flow-layout-item {
display: none !important;
}
UPD: This one seems more pretty:
your-tiny-mce-textarea.mce-statusbar {
border: 0 !important;
}
your-tiny-mce-textarea.mce-path {
display: none !important;
}
Maybe this will help someone in future, you can remove the entire status bar with the following option
tinymce.init({
selector: 'textarea', // change this value according to your HTML
statusbar: false
});
https://www.tiny.cloud/docs/configure/editor-appearance/#statusbar
The control sap.m.MessagePopover has an attribute _oPopover (containing sap.m.Popover inside).
Using this attribute, I could set the popover width:
messagePopover._oPopover.setContentWidth("450px");
However, as SAP attributes starting from _ should not be used, does anybody know a cleaner way?
As of UI5 version 1.46, a more flexible control sap.m.MessageView can be used instead of the old sap.m.MessagePopover.
There is no need to access internal properties or apply custom CSS style classes to manipulate the width as you can put MessageView anywhere you want (Still, Fiori Guideline recommends to use it only within a responsive popover or a dialog).
const popover = new ResponsivePopover({
contentWidth: "450px",
contentHeight: "450px",
content: [
/*myMessageView*/
],
});
// ...
popover.openBy(...);
Compared to MessagePopover, MessageView can group items and more.
Internally, MessagePopover uses MessageView too.
Another solution would be to use CSS class. However, there is a catch. As you can see from below generated DOM of the message popover, inline styling has been used :( .
Only way to override inline-style is by using !important in CSS which is again not recommended approach. However, considering inline CSS has been used, I would go with using !important keyword. Below is the working code:
XML Code ( for adding Class):
<MessagePopover id='myMP' class='myPopoverClass'>
<items>
<MessagePopoverItem title='Title' subTitle='SubTitle'></MessagePopoverItem>
</items>
</MessagePopover>
CSS:
.myPopoverClass {
width:100rem;
}
.myPopoverClass .sapMPopoverCont {
width:100% !important;
}
You can play around with how much width you need for message Popover.
EDIT: This is from the source code:
MessagePopover.prototype.init = function () {
var that = this;
var oPopupControl;
this._oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");
this._oPopover = new ResponsivePopover(this.getId() + "-messagePopover", {
showHeader: false,
contentWidth: "440px",
placement: this.getPlacement(),
showCloseButton: false,
modal: false,
afterOpen: function (oEvent) {
that.fireAfterOpen({openBy: oEvent.getParameter("openBy")});
},
afterClose: function (oEvent) {
that._navContainer.backToTop();
that.fireAfterClose({openBy: oEvent.getParameter("openBy")});
},
beforeOpen: function (oEvent) {
that.fireBeforeOpen({openBy: oEvent.getParameter("openBy")});
},
beforeClose: function (oEvent) {
that.fireBeforeClose({openBy: oEvent.getParameter("openBy")});
}
}).addStyleClass(CSS_CLASS);
How do I set the padding inside the tinyMCE editor?
I've seen answers like so:
body{ padding:0px }
But it shouldn't be on the body??
Have look at the tinymce config param content_css. Using this param you may set your own css stuff and overwrite tinymcedefault css. You may apply the padding to whatever element you want (under body)
you could also try these methods:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
// set whatever class name you have that adds the padding
body_class: 'my_class',
// or attach your own css file (resolved to http://domain/myLayout.css)
content_css : '/myLayout.css',
// or finally, add your padding directly
content_style: "body {padding: 10px}"
});
see the docs for more info
If you need a quick solution try the CSS definition:
div.mce-edit-area{
background:#FFF;
filter:none;
>>> padding:10px; <<<
}
in the skin.min.css and skin.ie7.min.css files.