I'm building an online editor where the language is set by the user settings that can be change dynamically with AJAX (page does not reload), so I init the tinyMCE object the first time correctly but after the user try to init it again, the text inside the editor controls has incorrect values ("advanced.bold" instead of "Bold", advanced.italic_desc instead of "Italic", etc), but the plugin popups are in the correct language!
Basically my code just do the init method each time the user changes the language in their preferences...
initMCE: function(lang) {
tinyMCE.init({
language : lang,
mode : "textareas",
theme : "advanced",
relative_urls : false,
editor_selector : "tinymce",
plugins : "emotions,spellchecker,advhr,insertdatetime,preview,media,inlinepopups,xhtmlxtras",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "fontselect,fontsizeselect,bold,italic,underline,forecolor,|,bullist,numlist,|,blockquote,|,image,|,link,unlink,|,code,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "right",
theme_advanced_resizing : true,
content_css : "../_style/_css/style.css",
inline_styles : false
});
}
Any ideas of how to do it or what am I doing wrong?
I created a fiddle fork, trying to make it work and thought that you might need to shutdown your former instance correctly. The language did not change correctly - you might want to report a bugfix for this here.
I reported this as bug on their site and they told me to use a workaround while they fix it (seems the load lang call is just running one time instead inside the init). Using this line after the init, the language change works fine:
tinyMCE.ThemeManager.requireLangPack(THEME_IN_USE);
Check this fiddle to see it working
You can use something like this:
function init(lang) {
//language_url: lang === 'en' ? null : 'url to es file',
options.language = lang;
tinymce.remove(editor);
tinymce.init(options);
tinymce.execCommand('mceRepaint');
}
This fiddle works for me, note the comments in line 31:
https://jsfiddle.net/antd3tsf/19/
Related
I am using the tinyMCE library for my textareas but also for image uploads, however when have both of them on one page it doesn't work. It is fine when it is one of them alone but as soon as I put a tinyMCE textarea on a page and a button that launches the imagemanager dialog, the dialog loads up but the spinning loading icon just keeps going instead of loading the files from my rootpath.
In the head of my document i have:
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
editor_selector : "mceEditor",
editor_deselector : "mceNoEditor",
plugins : "style,advlink,inlinepopups,preview,contextmenu,paste,directionality,fullscreen,noneditable,imagemanager,media",
// Theme options
theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,|,undo,redo,|,link,unlink,code,|,fullscreen",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_resizing : false,
media_strict: false
});
Which is great for my textareas, then with jQuery on document.ready() I have the following for the uploads:
$('.add_image_button').click(function(){
mcImageManager.open(''{
rootpath : '{0}/',
oninsert:function(o){
var location = o.focusedFile.path;
location = location.substr(4);
location = '_uploads/'+location;
var preview_image = '../' + location;
$('#selected_image > img').attr('src', preview_image);
$('#image_path').val(location);
}
});
return false;
});
If I have an MCE textarea on the page and press my upload image button I get the following javascript errors:
Uncaught TypeError: Cannot set property 'innerHTML' of null - editor_plugin.js:1
Uncaught TypeError: Cannot call method 'getArgs' of undefined - index.php:1
I have tried the tinyMCE.init() after DOM ready, but no joy.
It feels like there might be some kind of path configuration conflict like the imagemanager.
Does anybody know if there is a way of looking if the rootpath is getting screwed somehow on the imagemanager?
Cheers
If anybody comes across this... I fixed it by removing inlinepopups from the plugins list.
I have a web-site. We are using TinyMCE as our text editor. I just upgraded to the newest version and added the media plugin so our users can add videos to their enteries.
The upgrade works great on Chrome, FireFox, IE7. However, it does not work with IE8. The frame around the editor disappears along with the toolbar.
Here is the init code I'm using:
tinyMCE.init({
// General options
mode : 'exact',
elements : '<%= txtArea.ClientID %>',
theme: 'advanced',
relative_urls : false,
verify_html : true,
apply_source_formatting : true,
plugins : 'media',
//valid_elements: 'a[href|target=_blank],#p[align],strong/b,em/i,u,div,br,-span[style],'
// <%= AllowImages ? "+ 'img[longdesc|usemap|src|border|alt=|title|hspace|vspace|width|height|align],'" : "" %>
// + '-ul,-ol,-li',
theme_advanced_buttons1 : 'bold,italic,underline,separator,link,unlink,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo,'
<%= AllowImages ? "+ 'separator,image,'" : "" %> + 'separator,code,media',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : ''
});
Any ideas what I've done wrong?
Jake raised a point in the comments that this was a caching related issue.
As suggested in the comment, options to work around include clearing cache and including a date/time query string.
I'd suggest a third option to the above -- including the version number of the component being used in the url (either put tinymce in a version specific folder, or put the version number in the query string).
Can I add individual buttons?
I would like to give the user control, but not too much control so I need to enable some buttons but disable others.
Can this be done?
I have figured this out now.
You have to use a theme. I used a pre-defined theme and I did this in the init function:
tinyMCE.init({
theme : "advanced",
mode: "exact",
elements : "elm1",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,separator,"
+ "formatselect,bullist,numlist,link,unlink,image,separator,"
+"undo,redo,cleanup,code,separator,charmap",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
});
You name your textarea elm1 and then your good to go
There are a lot of questions here about Greasemonkey, but I didn't see anything directly related to my question.
I'm on a website that uses a text editor control, and it's really annoying that they don't allow horizontal resizing (only vertical). So if you are using a cheapo projector that only supports 1024x768, the text runs off of the screen and there's nothing you can do about it.
I looked at the page source, and found the section of code that I want Greasemonkey to modify:
<script type="text/javascript">
// TinyMCE instance type: CD_TinyMCE
tinyMCE.init({
convert_urls : "",
mode : "specific_textareas",
editor_selector : "rte",
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
**theme_advanced_resize_horizontal : false**,
...
I just want to change the boldfaced value to true. I tried to approach this the brute force way and replace the text this way:
function allowHorizontalResize() {
var search_string = "theme_advanced_resize_horizontal : false";
var replace_string = "theme_advanced_resize_horizontal : true";
var doc_text = document.body.innerHTML;
document.body.innerHTML = doc_text.replace( search_string, replace_string);
}
...but it doesn't work. However, I know the basic search and replace part works because I can use this script to replace text within the editor -- I just can't change the javascript code that initializes the text editor.
Can someone explain what I'm doing wrong? Is this even possible?
Try the simple direct approach, first. Your Greasemonkey script could be as easy as:
GM_addStyle ("#content_tbl {width: 900px !important;}");
-- which works on a default TinyMCE window.
Altering the javascript source code is probably not going to easily work. But, the Devil is in the details.
Provide a link to the page or pastebin the complete code.
No, the script will have already executed when you apply the function.
You will have to get the text editor's element, and apply the properties manually(assuming it is an element).
A link would make me more helpful.
Latest version of tinyMCE is stripping my embed tags, and javascript when I use it. I tried setting the verify_html flag to false without any luck. Here is my config js for tinyMCE, can anyone see what I am doing wrong?
Update: I am positive it is not a server side issue. I used a plain textarea without tinymce loaded and it worked perfectly. It is tinyMCE doing the stripping.
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins:
safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,
insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,
fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
valid_elements: "*[*]",
verify_html : false,
// Theme options
theme_advanced_buttons1:
bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,
justifyfull,|,formatselect,fontselect,fontsizeselect|,ltr,rtl,|,fullscreen|,forecolor,
backcolor,code",
theme_advanced_buttons2:
"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,
outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,advhr",
theme_advanced_buttons3:
"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
height: "500px",
// Example word content CSS (should be your site CSS) this one removes paragraph
// margins
content_css: "content/word.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
Update #2:
After doing some more digging, you ought to try the following.
Set:
media_strict: false
And set the settings for the <embed> tag:
+'embed[width|height|name|flashvars|src|bgcolor|align|play|loop|quality|allowscriptaccess|type|pluginspage]'
Source (MoxieCode Forum)
Update:
You're setting extended_valid_elements, but not setting valid_elements?:
valid_elements: "*[*]"
extended_valid_elements is used for the current ruleset. But valid_elements allows you to actually create that ruleset.
Old Answer:
Are you sure it's TinyMCE doing it, and not whatever is parsing the server-side request?
If you're using ASP.NET, make sure ValidateRequest="False" is set for the page. If you're using ASP.NET MVC, then you'll need to put the following above the controller action:
[ValidateInput(false)]
Make sure you're at least using a whitelist to keep bad stuff out, though.