I have set up a simple CSS file with a single .test class and have the following settings in TinyMCE I get two menus that both say 'Paragraph at the top. How do edit the CSS styles menu
tinymce.init({
selector: '#tiny',
menubar:false,
'content_css': 'my-styles.css',
importcss_append: false,
style_formats_merge: true,
plugins: ['importcss'],
toolbar: 'code| insertfile undo redo searchreplace | paste pastetext | formatselect | styleselect '
});
format menu
css styles menu
Here's a working example in case anyone else is looking:
content_style:
'.news-img-left { float: left;margin:1em 1em 1em 0;max-width:400px;height:auto }' +
'.news-img-right { float: right;margin:1em 0 1em 1em;max-width:400px;height:auto }' +
'.news-img-full { margin:1em 0;width:100%;max-width:100%;height:auto }',
style_formats: [
{ title: 'Text Formats' },
{ title: 'Paragraph', format: 'p' },
{ title: 'Heading 1', format: 'h1' },
{ title: 'Heading 2', format: 'h2' },
{ title: 'Heading 3', format: 'h3' },
{ title: 'Image Formats' },
{ title: 'Image Full Width', selector: 'img', classes: 'news-img-full' },
{ title: 'Image Left', selector: 'img', classes: 'news-img-left' },
{ title: 'Image Right', selector: 'img', classes: 'news-img-right' },
],
then in tool bar I added button 'styleselect'
This question was also asked in the TinyMCE Github issuetracker and I'll copy in the answer here for completeness.
Both formatselect and styleselect shows the currenly used format. The default format is the "Paragraph", matching the <p> tag basically.
The styleselect doesn't have anything to do with CSS style really, think of it more in terms of visual appearances. The differences between styleselect and formatselect are mainly in the config options available:
The formatselect button is configured by the block_formats option and is rather basic.
The styleselect button is configured through the style_formats option and is much more advanced. It can contain nested menus, have groups etc.
Related
I have multiple ckeditor in a component and for some reason i want a textarea-ckeditor to be readonly with some toolbar enabled;
ie: 'print','preview','find', and 'maximize'.
How can i achieve this? i've tried removing the plugins but only success if i alter the config.js which will 'standardize' all my ckeditor.
What i can think is that i need to alter something from this code.
CKEDITOR.replace('header',{
width: '100%',
height: 570});
Thanks in adv..
I found the solution but instead of removing the toolbar buttons, i list all the desired buttons as following;
toolbar: [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: ['-','Preview', 'Print', '-' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find','-','-' ] },
{ name: 'tools', items: [ 'Maximize'] }
]
I have below simple code, when I tried to get textbox value, it always blank.
ASPX
<asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" CssClass="editor"></asp:TextBox>
function SetEditor() {
tinymce.init({
selector: "textarea.editor",
theme: "modern",
height: 450,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
toolbar: "insertfile undo redo | styleselect | fontselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
]
});
}
SetEditor();
ASPX.VB
Dim content as string = txtComment.Text 'It always blank
I want to change the background color of a button in a toolbar.
I need this button to show a summary-value.
I tried with
cls: 'button-matching-auto',
and in css-file
.x-btn-button .button-matching-auto {
background-color: #10E0E0;
}
No effect.
Then i tried with
style: {color:'red'},
It's the same: no effect
In Developer Tools of chrome i can see, that the colors were applied,
but not visible.
What's wrong?
"It's because the button has a CSS class named 'x-button' with a background-color set to '#CCC' by default..." http://www.sencha.com/forum/showthread.php?208417-Change-image-button
{
xtype: 'button',
baseCls: 'null',
cls: 'buttonRed
}
... if you only want the default look and feel of a button not the gray one ...
I've done this to change the look and feel to get the default one:
dockedItems: [{
xtype: 'toolbar',
layout: {
pack: 'center'
},
defaultButtonUI: 'default', // get default look and feel
dock: 'bottom',
items: [{
xtype: 'button',
width: 200,
text: 'Download to Excel',
},{
xtype: 'button',
width: 200,
text: 'Another action',
}]
I wanna change heading (h1,h2,h3) directly on toolbar ( like tinymce version 3) because i use it very much when i create a new artical. I'm trying to search on internet but I didn't find any answers. Please help me. Thanks a lot
This answer arrives surely late, but maybe it can help others like me, people how are looking for answer for the same question. I read it here: http://blog.ionelmc.ro/2013/10/17/tinymce-formatting-toolbar-buttons/
First, you have to create the plugin:
tinyMCE.PluginManager.add('stylebuttons', function(editor, url) {
['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){
editor.addButton("style-" + name, {
tooltip: "Toggle " + name,
text: name.toUpperCase(),
onClick: function() { editor.execCommand('mceToggleFormat', false, name); },
onPostRender: function() {
var self = this, setup = function() {
editor.formatter.formatChanged(name, function(state) {
self.active(state);
});
};
editor.formatter ? setup() : editor.on('init', setup);
}
})
});
});
And then use it in your toolbar:
tinyMCE.init({
selector: '#id',
toolbar: "undo redo | style-p style-h1 style-h2 style-h3 style-pre style-code",
plugins: "stylebuttons",
});
tinymce.init({
toolbar: 'undo redo | alignleft aligncenter alignright alignjustify | formatselect fontselect fontsizeselect | bullist numlist | outdent indent',
});
This is a quicker way to add H1, Paragraph and other options to your toolbar in TinyMCE 4.
For a full list see:
http://www.tinymce.com/wiki.php/Controls
Specificly the 'Core' section. That shows the most commonly used tools.
Using the following worked for me
tinymce.init({
toolbar: 'formatselect',
block_formats: 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;',
});
Editor will look like this:
Refering to this question on the TINYMCE forum:
http://www.tinymce.com/forum/viewtopic.php?id=32801
Use these params in the config.
style_formats: [
{title: 'Headers', items: [
{title: 'h1', block: 'h1'},
{title: 'h2', block: 'h2'},
{title: 'h3', block: 'h3'},
{title: 'h4', block: 'h4'},
{title: 'h5', block: 'h5'},
{title: 'h6', block: 'h6'}
]},
{title: 'Inline', items: [
{title: 'Bold', inline: 'b', icon: 'bold'},
{title: 'Italic', inline: 'i', icon: 'italic'},
{title: 'Underline', inline: 'span', styles : {textDecoration : 'underline'}, icon: 'underline'},
{title: 'Strikethrough', inline: 'span', styles : {textDecoration : 'line-through'}, icon: 'strikethrough'},
{title: 'Superscript', inline: 'sup', icon: 'superscript'},
{title: 'Subscript', inline: 'sub', icon: 'subscript'},
{title: 'Code', inline: 'code', icon: 'code'},
]},
{title: 'Blocks', items: [
{title: 'Paragraph', block: 'p'},
{title: 'Blockquote', block: 'blockquote'},
{title: 'Div', block: 'div'},
{title: 'Pre', block: 'pre'}
]},
{title: 'Alignment', items: [
{title: 'Left', block: 'div', styles : {textAlign : 'left'}, icon: 'alignleft'},
{title: 'Center', block: 'div', styles : {textAlign : 'center'}, icon: 'aligncenter'},
{title: 'Right', block: 'div', styles : {textAlign : 'right'}, icon: 'alignright'},
{title: 'Justify', block: 'div', styles : {textAlign : 'justify'}, icon: 'alignjustify'}
]}
]
I am using the YUI Rich Text Editor (YAHOO.widget.Editor), and I got it working fine, except for one thing. I cannot figure out how to configure the font size of the text that I type in the editor box (input type="textarea"). I want that text to be 150%. I know that I need a CSS rule of the form:
some-YUI-related-selector {
font-size: 150%;
}
but I cannot figure out the identity of "some-YUI-related-selector".
I'd appreciate any help I can get.
Thanks, Jay
More information:
I want my web to display large fonts, so I used a CSS style for the div in question as follows:
div.newsform {
font-size:120%;
}
div.newsform input {
font-size:120%;
}
input#newsgoals {
font-size:150%;
}
The HTML page snippet in question is:
<div class="newsform">
<p>Some text</p>
<form>
<input type="text" name="sname" style="width:353px"/>
<input type="textarea" id="newsgoals" name="newsgoals" ></input><br/>
<input type="submit" value="Add" />
</form>
</div>
I bind the YUI Editor in a Javascript snippet at the bottom of the web page as follows:
<script>
var myNewSEditor = new YAHOO.widget.Editor('newsgoals', {
height: '300px',
width: '440px',
dompath: false,
animate: true,
css: YAHOO.widget.SimpleEditor.prototype._defaultCSS, // + 'html { font-size:130%; }',
// { css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'ADD MYY CSS HERE' }
toolbar: {
titlebar: 'Write Your Goals Here',
buttons: [
{ group: 'textstyle', // label: 'Font Style',
buttons: [
{ type: 'push', label: 'Bold', value: 'bold' },
{ type: 'push', label: 'Italic', value: 'italic' },
{ type: 'push', label: 'Underline', value: 'underline' },
{ type: 'separator' },
{ type: 'select', label: 'Arial', value: 'fontname', disabled: true,
menu: [
{ text: 'Arial', checked: true },
{ text: 'Arial Black' },
{ text: 'Comic Sans MS' },
{ text: 'Courier New' },
{ text: 'Lucida Console' },
{ text: 'Tahoma' },
{ text: 'Times New Roman' },
{ text: 'Trebuchet MS' },
{ text: 'Verdana' }
]
},
{ type: 'spin', label: '22', value: 'fontsize', range: [ 9, 75 ], disabled: true },
{ type: 'separator' },
{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true }
]
}
]
}
});
myNewSEditor.render();
</script>
The everything inside the div (class="newsform") renders the fonts at 120% large except the YUI Editor, which continues to render very small. If I used the web page without the YUI editor, the text area (input#newsgoals) renders properly at 150%.
I was able to configure colours and font sizes in the tool bar of the YUI Editor, but not in the text area box.
I even tried configuring the 'css:" attribute in the toolbar and then adding my CSS rule to _defaultCSS (as per the YUI Editor documents), but it didn't work.
Jay,
Dav Glass, the author of this component, provides great help to his users over at the YUI Library forums: http://yuilibrary.com/forum/
If you don't get an answer here, definitely try posting over there.
-Eric
Woohoo! Thanks Eric Miraglia. The pointer to Dav Glass' forum got me where I needed to go.
For some reason, I had found the css: configuration parameter which was correct, but I had done something else wrong and that caused it to fail. The correct answer is to put the following line where I have the css: when I call "new Yahoo.widget.Editor()" :
css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'body { font-size:130%; background-color:red;color:white;}'
That was enough to get the font-size and editor background changed to what I want.