I recently put the use of TinyMCE in an application I am working on. Everything is working, but the Toolbar is shown on the bottom. I checked the documentation at.
TinyMCE Configuration
This doc shows how to configure the location of the toolbar given you are using Advanced mode and not Simple. I have confirmed that I am using the correct mode as well as my default layout is SimpleLayout but I am not seeing the changes when I use the code they specify to use.
theme_advanced_toolbar_location : "top"
Here is what my script looks like
tinyMCE.init({
width : "500",
height : "100",
// General options
mode : "textareas",
theme : "advanced",
editor_selector : "mceSimple"
// Theme options
theme_advanced_buttons1 :"bold,italic,underline,strikethrough,forecolor,backcolor",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_layout_manager : "SimpleLayout"
theme_advanced_resizing : true,
});
I am aware that I do not need to specify the layout manager, but I did it just to show I was specifying it as SimpleLayout
Am I doing something wrong that is not allow it to show the toolbar on top of the textarea as oppose to the bottom?
I used tinyMCE a few months ago. I did have some trouble getting the toolbar to respond the right way. I did some work and found some answers, but I can't recall the exact jist of what those answers were. Hopefully, this code from my usage will help you, it works great:
tinyMCE.init({
content_css: "/connectation/css/tinyMCEcontent.css",
theme_advanced_font_sizes: "8pt,9pt,10pt,11pt,12pt,13pt,14pt,16pt,18pt,20pt",
font_size_style_values : "8pt,9pt,10pt,11pt,12pt,13pt,14pt,16pt,18pt,20pt",
mode : "textareas",
theme: "advanced",
theme_advanced_buttons1: "bold,italic,underline,|,fontselect,fontsizeselect",
theme_advanced_buttons2: "forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,hr",
theme_advanced_buttons3: ""
});
I don't see a lot of difference other than that I'm pointing at my own css. Here's the contents of the css file in case that helps:
body, td, pre {
font: 9pt Century Gothic, Verdana, Arial, Sans-Serif;
color: #333333;
}
body {
background-color: #FFFFFF;
}
.mceVisualAid {
border: 1px dashed #BBBBBB;
}
/* MSIE specific */
* html body {
scrollbar-3dlight-color: #F0F0EE;
scrollbar-arrow-color: #676662;
scrollbar-base-color: #F0F0EE;
scrollbar-darkshadow-color: #DDDDDD;
scrollbar-face-color: #E0E0DD;
scrollbar-highlight-color: #F0F0EE;
scrollbar-shadow-color: #F0F0EE;
scrollbar-track-color: #F5F5F5;
}
Related
I don't know how to center delete action icon in inline editing.
My setting action column is:
{
name: 'action',
width: 40,
align: "center",
editable: false,
formatter:'actions',
search: false,
fixed: true,
resize: false,
formatoptions: { keys: true, editbutton: false }
}
You need to play around with CSS to find the fix in your case. Try overriding jqGrid's CSS rules.
In general, if you have only 'Delete' icon in your column, following CSS rules will make it center aligned.
.ui-pg-div.ui-inline-del {
float: none !important;
}
span.ui-icon.ui-icon-trash {
margin: auto;
}
Although, its not a good practice to use '!important'.
If you want to do this for a particular grid, you can prepend grid id(say, list) to CSS rule like this:
#list .ui-pg-div.ui-inline-del{}
While I am pasting a content from a webpage, the tinymce editor in IE8 doesn't display the content.
Hi, i am adding the image that I got.
My issue is
1.I have copy content from the webpage http://ch.tbe.taleo.net/CH02/ats/careers/requisition.jsp?org=TRAILERPARK&cws=1&rid=148
and try to paste in to my tinymce editor which is open in Ie8..
2.the result is shown as like in the image as red box
Refere to Adding new fonts to TinyMCE font options
the site you're copying from uses (see the source):
#font-face
{
font-family: "Museo Slab W01 1000";
src: url("http://www.trailerpark.com/Fonts/ee02ec61-b42e-49bb-9942-0793380267f5.eot?iefix");
src:
url("http://www.trailerpark.com/Fonts/f6e64e68-be62-481f-bcf3-923028fc62e0.svg#f6e64e68-be62-481f-bcf3-923028fc62e0") format("svg"),
url("http://www.trailerpark.com/Fonts/b6bcb198-882f-4f57-a02c-07e8155aab5f.woff") format("woff"),
url("http://www.trailerpark.com/Fonts/cfa01f25-bb4c-4a09-8ba3-8afafcbb3508.ttf") format("truetype");
}
Use the method type : encoding : "raw"
function exilTinyMCEInit(args) {
tinyMCE.init({
mode : "exact",
theme : "advanced",
plugins : "paste",
elements : args,
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,bullist,numlist,undo,redo",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_resizing : false,
onchange_callback : "exilTinyMCEOnChangeHandler",
encoding : "raw",
setup : function(ed) {
var curElement = P2.getFieldObject(ed.id);
if (curElement.disabled || curElement.readOnly) {
ed.settings.readonly = true;
} else {
ed.settings.readonly = false;
}
}
});
}
Hi I have a twitter feed using the following code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 195,
height: 300,
theme: {
shell: {
background: '#999999',
color: '#D6E03D'
},
tweets: {
background: '#f3f3f3',
color: '#999999',
links: '#5a5a5a'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('louise').start();
</script>
and this is linked to the widget.js file. I need the default twitter to be blue not white so I tried downloading the js file and hosting it from my server and changing the code to my image using this code:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
this adds the blue image in ok but it messes up some of the links that should be different colours within the feed, therefore I think I need to stick to linking to this version:
isFullScreen?" twtr-fullscreen":""}var AA=T?"images/widget-logoblue.png":"http://widgets.twimg.com/i/widget-logo.png";
is there a way I can link to this but override the twitter image that they are using with my own twitter logo?
Any help would be greatly appreciated, thanks
Louise
I guess the solution might be one of these:
CSS hack - hide image and use background-image CSS property instead
Detect image on load and replace it then
Write a custom widget. Example.
Please help. I use tinyMCE as inline editor. So I need that when user in edit mode press enter then will be <br /> not <p>. I read manual and FAQ and try
tinyMCE.init({
'height' : '100%',
'widht':'100%',
'content_css' : styles + ',/sdtc-new/nc/interface/common/css/mce-editor.css',
'mode' : "specific_textareas",
'editor_selector' : prefix + o.id,
'theme':'advanced',
theme_advanced_buttons1: o.buttons.join(','),
theme_advanced_buttons2 : "",
**theme_advanced_buttons3 : "",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '' // Needed for 3.x**
});
But it's not work . Actually some time it's work like when I delete all conetent in edit area and type new text. But i need that it works all time. Please help. Version of tinyMCE 3.4.4
You will need to set
tinyMCE.init({
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false
...
});
Here is a helpfull section of the tinymce FAQ.
I am reloading content of a div using an ajax request.
<div>
<textarea id="content-value" rows="15" cols="40" class="tinymce" style="width:100%"></textarea>
</div>
Within this div I have a text area that is initialized with tinymce...
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "tinymce",
theme : "advanced",
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|formatselect,fontsizeselect,|,code",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "",
height: "340",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false
});
After loading the content with an AJAX request, I remove the editor, replace the content, and then attempt to re-add the editor to tinyMCE.
function OnCreateResponse(response) {
if(response.success) {
tinymce.EditorManager.execCommand('mceRemoveControl',true, 'content-value');
$(dlgElem).html(response.html);
tinymce.EditorManager.execCommand('mceAddControl', true, 'content-value');
}
}
}
Upon re-adding tinyMCE gives me the following error
Error: tinyMCE.get("content-value") is
undefined
when executing ...
tinymce.EditorManager.execCommand('mceAddControl', true, 'content-value');
Does anyone have any ideas as to what I am doing wrong?