In TinyMCE 3 you can change the editor's default font-size by using this code in the settings:
setup : function(ed)
{
ed.onInit.add(function(ed)
{
ed.getDoc().body.style.fontSize = '14px';
});
}
In version 4, I tried using the same method but get this error:
TypeError: ed.onInit is undefined
I also tried using the "content_css" option and set the body to 14px font size, but that works only when on preview. http://www.tinymce.com/wiki.php/Configuration:content_css
Has anyone found another way to set the editor's default font size? I couldn't find any documents, even in their forum.
setup : function(ed)
{
ed.on('init', function()
{
this.getDoc().body.style.fontSize = '14px';
});
}
tinymce.yml on rails
The function needs to be on the next line, like so:
menubar : false
toolbar: code | bold italic | link image anchor | bullist numlist | undo redo
oninit : "setPlainText"
forced_root_block : false
plugins:
- paste
- code
- link
setup :
function(ed) {
ed.on('init', function()
{
this.getDoc().body.style.fontSize = '13px';
});
}
Works on TinyMCE 4
Related
I'm using Storybook v5.2.6 and am trying to change the size of the grid lines shown in my stories.
After adding #storybook/addon-backgrounds a toggle grid button appears in my Storybook toolbar. Clicking the button plots a 20px grid:
I want to globally change the grid size to be 8px and I have tried the following:
import { configure, addParameters } from '#storybook/react';
import { create } from '#storybook/theming/create';
const storyBookTheme = create({
gridCellSize: 8,
grid: { cellSize: 8 }, // alternative approach
brandTitle: 'Hello, World!',
});
addParameters({
options: {
theme: storyBookTheme,
},
...
});
configure(require.context('../stories', true, /\.stories\.js$/), module);
I haven't been able to find any documentation on how to use this parameter globally, but it seems to be the correct approach because:
In the Storybook 'Kitchen Sink' repo, the gridCellSize parameter is set like this, along with other theme variables.
In PR #6252 the author makes a change to "Pick up gridCellSize from Theme configuration options"
So I thought my above attempt would work, however a 20px grid is still plotted.
In the release notes for Storybook 5.2.0-alpha.43 they mention the breaking change:
"Move grid toolbar feature to background-addon".
However, there are no migration instructions
So, the question is, how do I set the grid cell size?
Update
I've upgraded to Storybook 5.3.0-beta.19 and can now set the grid size on a story-by-story basis, but I'm still unable to set this globally.
Button.story = {
parameters: {
grid: { cellSize: 8 },
},
};
After trying various permutations, I've stumbled upon the correct configuration.
This works with Storybook 5.3.0-beta.19. I'm not sure about earlier versions.
Rather than setting the gridCellSize parameter in the theme, you need to add grid: { cellSize: 8 } to the configuration parameters. In your config.js file, do the following:
import { configure, addParameters } from '#storybook/react';
import { create } from '#storybook/theming/create';
const storyBookTheme = create({
brandTitle: 'Hello, World!',
});
addParameters({
grid: { cellSize: 8 }
options: {
theme: storyBookTheme,
},
...
});
configure(require.context('../stories', true, /\.stories\.js$/), module);
I'm trying to add the zebra-stripe plugin to a wordpress page.
I am not sure where to place the following code in order to make the zebra striping work.
Can anyone point me in the right direction? Thank you!
$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue',
// initialize zebra striping of the table
widgets: ["zebra"],
// change the default striping class names
// updated in v2.1 to use widgetOptions.zebra = ["even", "odd"]
// widgetZebra: { css: [ "normal-row", "alt-row" ] } still works
widgetOptions : {
zebra : [ "normal-row", "alt-row" ]
}
});
});
It looks like the Wordpress table-sorter plugin is using the original tablesorter (v2.0.5) so the theme and widgetOptions settings do not do anything.
If you're not using that plugin, but you are using my fork of tablesorter, then you need to load the /css/theme.blue.css file and not change the default zebra class names:
$(function() {
$("table").tablesorter({
theme: 'blue',
widgets: ["zebra"]
});
});
If you are using the original tablesorter without the Wordpress plugin, use the same code above, except for the theme setting; the blue style that needs to be loaded will be in the following location /themes/blue/style.css.
I'm using TinyMCE 4. Unfortunately the "backcolor" control seems to only allow changes to text, not a whole paragraph. Even when I select a paragraph in the status bar of TinyMCE and apply a background color, it's only applied to the inner span, not the paragraph itself. I would need to set the background color for the complete content, not only parts of it. This should be applied to the HTML output, something like
<div style="background-color: #f00">[complete editor content]</div>
Thanks for any help.
You can use this code to access the tinymce's body to set background color:
tinymce.activeEditor.getBody().style.backgroundColor = '#<yourcolor>';
Disadvantage: Setting the background color that way will not change/affect the html content inside the editor. So you have to treat/update/store that value in a separate way.
You can also add a button on initialising tinymce:
tinymce.init({
...
setup: function (editor) {
editor.addButton('mybutton', {
text: 'Set bgColor',
icon: false,
onclick: function () {
editor.getBody().style.backgroundColor = '#E5FFCC';
}
});
...
});
You have to reach the editable content body in the dynamically generated iframe. The iframe is generated after the initialization of the editor.
If your textarea id is foo, the id of the iframe is foo_ifr.
You may also open the editor with firebug or developer tools and use dom explorer, you may see the inner dynamically generated components.
use:
var iframe = document.getElementsByTagName("iframe")[0];
// or
var iframe = document.getElementsById("foo_ifr");
// check if iframe.contentDocument is cross-browser, i tested with IE 11.
var innerBody = iframe.contentDocument.getElementsByClassName("mceContentBody")[0];
innerBody.style.backgroundColor="red";
To get the custom styling that you want, you have to create new custom style formats when the editor is being initialized. This gives you the ability to define css styling to the element. For example
HTML
<form>
<textarea></textarea>
</form>
JS
tinymce.init({
selector: 'textarea',
//merge with default formats
style_formats_merge: true,
//set up custom style formats
style_formats: [
{title: 'Red Background', block: 'p', styles: {
'background-color': '#ff0000',
'color':'white',
'padding': '7px'}
},
{title: 'Blue Background', block: 'p', styles: {
'background-color': '#0000ff',
'color':'white',
'padding': '7px'}
}
]
});
This merges two new custom formats with the default formats. See this DEMO
I would like to change the standard "pen" icon of the
StandardListItem of type DetailAndActive
. Is there a way to do so?
my XML so far:
<List
id="master1List"
items="{/path}"
mode="{device>/listMode}"
select="onSelect"
itemPress="showDetail"
growing="true"
growingScrollToLoad="true">
<items>
<StandardListItem
type="DetailAndActive"
activeIcon="sap-icon://message-information"
id="master1ListItem"
press="onSelect"
title="{title}">
</StandardListItem>
</items>
</List>
As far as I know there are only properties "icon" (which I do not need) and "activeIcon" (which I set but which is also not shown on itemPress/tab). I thought I might change it via css, but it is set in a data-attribute (Icon font, not a uri I could overwrite) and then applied:
.sapUiIcon:before {
content: attr(data-sap-ui-icon-content);
...
Thanks..
[EDIT:]
I accepted the below answer as correct because it works. BUT as you can read in my comment, I'd like to make it possible to accept Controls by using the aggregations metadata like described here:
metadata: {
aggregations: {
"Button" : {type : "sap.m.Button", multiple : false, visibility: "public"}
},
defaultAggregation: "Button"
},
This works so far that that I am now allowed to add a Button control to the ListItem in my XML view, but it is not rendered :-) Any ideas what I miss here additionally?
The icon is hardcoded deep in the control. I found I can extend the StandardListItem to get the result you want like this.
sap.m.StandardListItem.extend('my.StandardListItem', {
renderer: {},
constructor: function(sId, mProperties) {
sap.m.StandardListItem.prototype.constructor.apply(this, arguments);
var sURI = sap.ui.core.IconPool.getIconURI("action");
this._detailIcon =
new sap.ui.core.Icon({
src:sURI})
.setParent(this, null, true)
.addStyleClass("sapMLIBIconDet");
}
});
There is a working example at http://jsbin.com/tuqufe/1/edit?js,output
The bad news is that in the next release (1.28.?) the way that this is done changes significantly so you will need to redo the extended control.
[EDIT:] Sorry I forgot about this one. I just built a quick sample with the OpenUI5 V1.30 beta library. Now the key code looks like this...
sap.m.StandardListItem.extend('my.StandardListItem', {
metadata: {
properties: {
"detailIcon": "string"
}
},
renderer: {},
setDetailIcon: function(icon) {
this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);
}
});
There is a sample at http://jsbin.com/bayeje/1/edit?js,output
I have a set of WYSIWYG editors that are all initialized via TinyMCE on demand.
In the previous version of TinyMCE I was able to easily remove buttons by specifying the button theme_advanced_buttons1, theme_advanced_buttons2 etc. But since the newest release of TinyMCE 4.0 , it seems as tho that no longer works.
I am running the modern theme, so maybe the theme_advanced_buttons1 doesn't work with the modern theme? I've tried theme_modern_buttons1 , but that didn't work.
I'm thinking it may have changed with the newest release, as there is a new toolbar with the options for 'File, Edit, Insert...' etc.
Anyone know how I can hide the buttons on initialization? Heres the code I'm trying:
```
// initialize tinyMCE editor on our movie description text area
function initialize_movie_descriptions() {
$('.movie_description_editor').each(function() {
var id = $(this).attr('id');
tinyMCE.init({
mode : "exact",
elements : id,
theme : "modern",
plugins: "wordpress,wplink, paste",
theme_advanced_buttons1: "",
theme_advanced_buttons2 : "",
theme_advanced_buttons3: "",
theme_advanced_resizing : true,
paste_auto_cleanup_on_paste : true,
paste_preprocess : function(pl, o) {
o.content = o.content;
},
paste_postprocess : function(pl, o) {
o.node.innerHTML = o.node.innerHTML;
}
});
});
}
initialize_movie_descriptions();
```
Edit
Apparently changing the line plugins: "wordpress,wplink, paste", to plugins: "", seems to have removed the 'Insert' menu item in the first toolbar. I guess because it's not loading any plugins now??
If you don't want all buttons but keep some of the functionality you have to keep to plugins. Simply just add the buttons you want in toolbar. The Same way with the menu:
tinymce
.init({
...
plugins : [code fullscreen save table contextmenu paste textcolor" ],
//buttons you want to show, else set "toolbar:false"
toolbar : "insertfile undo redo | styleselect",
...
menu : {
...
edit : {
//menu edit
title : 'Edit',
//items of menu edit
items : 'undo redo | cut copy paste pastetext | selectall'
},
...
});
you can find a list of plugins with their configuration in tinyMCE here: http://www.tinymce.com/wiki.php/Plugins
I struggled with the same problem after updating Wordpress to version 4.0. I found the solution on the wiki-advanced-page of TinyMCE. In TinyMCE 4 "theme_advanced_buttons" is replaced by "toolbar". You probably want to hide the "menubar" too, see example below:
tinyMCE.init({
mode: "exact", // not needed
theme: "modern", // default - not needed. Only theme available in WP 4.0
height: height, // e.g. 100
menubar : false, // you probably don't want to show the [file] etc bar
block_formats: "Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6",
toolbar : "formatselect,bold,italic,underline,removeformat", //choose buttons in bar
});
There's a fast way to remove everything you see: Using CSS. Maybe it's not the best one, but is the faster one:
#mceu_15, #mceu_17, #mceu_18 {
display:none; }
Those #mceu numbers are the icons I want to hide (added by annoying plugins ;)
NOTE: You have to add this css on your_theme/admin.css
If it doesn't work look / add in your theme functions this:
function admin_style() { wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css');} add_action('admin_enqueue_scripts', 'admin_style');