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.
Related
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
I add costum styles to the RTE with a CSS File:
RTE.default.contentCSS = EXT:netjapan/Resources/Public/css/rte.css
For some elements this works. For example for a ulElement:
ul.liststyle1 {
list-style: none;
padding-left: 17px;
}
When I select the ul in the RTE I can chose the Blockstyle liststyle1.
I want to do the same for p:
p.test {
font-size: 80%;
}
And when I select the p I can chose the Blockstyle test and the style is used. But when I save the Blockstyle is gone.
I added this Typoscript:
RTE.default {
removeTags = sdfield, strike
proc.entryHTMLparser_db.removeTags = sdfield, strike
}
So that p is not in the removeTags list. But it had no effect.
Anyone know how it comes that the Blockstyle is removed on the pElement?
I had simillar problem last week. Sometimes RTE is going crazy. I mean that there is no logical sense in it. Check this: marke the text and use the container style it will wrap it in div but there will be also <p> in it so you will have something like <div><p class="bodytext">text</p></div> - you can add style for that. At least this solved my problem
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%");
In FCE I dont want to use default TYPO3 elements like header, link etc. So I hide it with the following ts config:
TCEFORM.tt_content {
header.types.templavoila_pi1.disabled = 1
header_position.types.templavoila_pi1.disabled = 1
header_link.types.templavoila_pi1.disabled = 1
header_layout.types.templavoila_pi1.disabled = 1
date.types.templavoila_pi1.disabled = 1
subheader.types.templavoila_pi1.disabled = 1
}
After this unwanted fields are not shown. But when I save and close the content in backend, title part of the page content shows [No title].
Here is the screen short of page content:
So I desided to keep default heading field by removing the line:
header.types.templavoila_pi1.disabled = 1
from the tsconfig. How to prevent rendering of heading field?
Mark it as hidden. Edit your content (CASE#1) and from Type choose the last one named hidden.
or overwrite the header css config and set it to
display:none;
My backend template for my base template includes backend styling for the headline [no title]
<style>
.sortable_handle {
color: transparent;
}
.tpm-title-cell {
display: none;
}
</style>
###content###
In TYPO3v7 and v8, you can influence the content preview header by registering a hook for
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']
and resetting the $headerContent variable in your hook.
See https://stmllr.net/blog/customizing-preview-widgets-in-the-typo3-page-module/
I've been looking for hours to find a plugin that would add somthing like "padding: 5px" to an image. Does everyone do this through plain html? Our customer need a way to add this simply with the use of a button or right click context menu. Any suggestions/solutions or do I have to develop this myself?
Suggestions concerning other products than TinyMCE is not necessary.
The easiest to use is to add a custom stylesheet which only need to be set as a parameter (content_css). Example code snippet for the tinymce configuration:
...
theme: 'advanced',
content_css: "http://my_server/my_css/my_custom_css_file.css",
...
This css should contain something like the following
img {
padding-left: 5px;
}
The code for the tinymce button is a bit more complex (but if wised i can post it as well) and the css gets set using the following
$(ed.get('my_editor_id').getBody()).find('img').css('padding-left','5px');
UPDATE: Button code:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
ed.addButton ('wrap_div', {
'title' : 'my title',
'image' : 'my_image.png',
'onclick' : function () {
ed.getBody().find('img').css('padding-left','5px');
}
});
});
}
});