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.
Related
So, I use CKEDITOR in my application. I really like it, except one nasty thing - the toolbar disappears totally when I have some huge text and have to scroll down. So, when I scroll back there is no toolbar at all. I found a plugin
which is supposed to solve this problem. So, this is what I did - I added this plugin to my application like
<script type="text/javascript" src="/ckeditor/plugins/fixed/plugin.js"></script>
The script is loaded ok - I see it in the console. Then in the application itself I do this:
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'fixed'
};
var editor = CKEDITOR.replace( document.getElementById("code") , {
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
autoParagraph: false,
height: height
});
But this plugin does not help - when I scroll down, he toolbar still disappears. So, I need some help. PS. I'm using CKEDITOR 4.
You don't have to manually add the js file itself, you just need to define the configuration properly.
Test this:
var editor = CKEDITOR.replace( document.getElementById("code") , {
enterMode: CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
autoParagraph: false,
height: height ,
extraPlugins : 'fixed'
});
Im trying to get tinymce edit iframe to work with this wonderfull tabbifier:
http://www.barelyfitz.com/projects/tabber
I have successfully installed both of them and they work great.
In my example I have tested the following:
Load a tinymce component and save the following code inside the tinymce iframe with the HTML option:
test
The result is saved perfectly after refreshing with F5 and this code is saved in the database:
<p>test</p>
tinymce is working perfecly.
The next test I have made is with tabber:
Edit the tinymce component box and saved the following code with the HTML option:
<div class='tabber' id='tabber1'>
<div class='tabbertab' title='FIRSTTAB' >
test firsttab
</div>
<div class='tabbertab' title='SECONDTAB' >
test secondtab
</div>
</div>
The code is perfectly saved in the database, and the result is perfectly loaded in the output view, showing two tabs, each one of them with its content.
The problem is while trying to edit the content again with tinymce, the tabs are not shown. The content is perfectly loaded in the tinymce iframe, without the tabs. Its shown as below:
test firsttab
test secondtab
The HTML code inside it is good, it has the proper tabbifier html code saved before.
The problem maybe is that the iframe of tinymce is not able to load or interpret the javascript of tabber.js and its not showing the tabs.
I have tested loading the javascript of tabber.js inside the tinymce iframe with this code, and seems to load it but the tabs are not still shown:
<script type="text/javascript">
tinyMCE.init({
mode: "exact",
elements: "%s",
theme: "%s",
%s
%s
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true
%s
setup : function(ed)
{
ed.onInit.add(function(ed, evt)
{
alert("entered tiny");
// Load a script from a specific URL using the global script loader
//tinymce.ScriptLoader.load('/js/tabber/tabber.js');
// Load a script using a unique instance of the script loader
//var scriptLoader = new tinymce.dom.ScriptLoader();
//scriptLoader.load('C:\tabber.js');
// Load multiple scripts
var scriptLoader = new tinymce.dom.ScriptLoader();
scriptLoader.add('/js/tabber.js');
scriptLoader.loadQueue(function() { alert('All scripts are now loaded.'); });
});
}
});
</script>
I have also checked that /js/tabber.js is the correct path. And saw at firebug that its loading it.
The two alert messages are displayed, so it seems to load it, but the tabs inside the tinymce edit iframe are still not shown.
Any help is welcome, thank you so much.
The tinymce ScriptLoader does not load a script inside the iframe. It provide a way to load a script in the main window after the tinymce initialization. This is very confusing as not documented.
But you definitelty can load a script inside the iframe. Here is the magic :
tinymce.init( { setup : function( ed ) {
ed.on('init', function (args) {
// get the iframe DOM
var doc = args.target.contentDocument || args.target.contentWindow.document;
// inject script into the DOM
var s = doc.createElement('script');
s.type = 'text/javascript';
s.src = '/js/tabber.js';
doc.getElementsByTagName('head')[0].appendChild(s);
});
});
Several browsers have problems with spaces and tabs on paragraph start.
A workaround for spaces is to code them onSave as protected spaces if they are at the beginning. The solution for tabs is to use another character with similar behaviour and replace them when saving. It is necessary to recode the content when reloaded from databse into the editor.
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/
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.
I'm trying to set it up so that when I paste text, specifically from Word or another source, all the styling will be stripped. I'm happy to let bold and italic styles stay as well as lists and so forth, but the rest should go.
How can I do this?
I know there is a plugin that will allow me to do this if I paste via clicking a button but I'm looking for if someone presses CTRL+V or command+V.
Any help?
I am using TinyMCE with the paste plugin an the following setup:
paste_create_paragraphs : false,
paste_create_linebreaks : false,
paste_use_dialog : true,
paste_auto_cleanup_on_paste : true,
paste_convert_middot_lists : false,
paste_unindented_list_class : "unindentedList",
paste_convert_headers_to_strong : true,
paste_insert_word_content_callback : "convertWord",
And it does just that: When you hit "Ctrl-V", a dialog pops up letting you paste in your contents, which gets autocleaned from any Word related stuff.
You may also need this no-op callback:
function convertWord(type, content) {
switch (type) {
// Gets executed before the built in logic performes it's cleanups
case "before":
//content = content.toLowerCase(); // Some dummy logic
break;
// Gets executed after the built in logic performes it's cleanups
case "after":
//content = content.toLowerCase(); // Some dummy logic
break;
}
return content;
Try not loading the paste extension.