I am in an online class that happens to use CKEditor 4.4 for posting. They use CKEDitor's context menu, which disables the Chrome's spell check, which is a major problem for me. I have no control over their configuration. I am trying to run javascript in the console after the page is loaded that will disable their context menu. I have found:
CKEDITOR.config.removePlugins='contextmenu';
But this does nothing because the editor is already loaded by the time I can run it. I cannot seem to get the editor to reload itself in-line with the new settings. Any ideas?
If the page has been already loaded and the editor has been created you can destroy it and create it again.
You should check if they use any special configuration while creating the editor and reuse that same configuration but adding "contextmenu" to the list of plugins to remove.
Generic code:
for(name in CKEDITOR.instances)
{
CKEDITOR.instances[name].destroy(true);
}
CKEDITOR.replaceAll()
If the textarea is named for example "content"
CKEDITOR.instances.content.destroy(true);
CKEDITOR.replace("content");
Related
I am new to JavaScript. I have a task to write a js script that will be injected to google.com using Chrome DevTools and run on top of it. The script needs to add certain popups on mouseover action - so if I hover over certain elements of the page (such as the Google logo), a certain popup will be shown. The popups all have css stylings.
So far, I have managed to create alerts on mouseover action using EventListener (on google.com). And I have managed to create custom popups with css on my own website. However, I'm having serious trouble combining both.
The problem is essentially: in my own custom website, I put the css bit under "style" tag, and the js script itself under "script" tag. The script than uses the css properties of the popup to create it. However, in Chrome DevTools I'm only able to inject the actual js script (by copy-pasting it the console), and not the css bit.
How should I get around that? Is there a way to add the css within the js, so running the script will lead to the css being added to the "style" section? Is there a different way to inject the script in the DevTools, and separately inject the css and js? Or is there another way to solve this?
Thanks a lot :)
You can do this by creating and running a snippet, to create a snippet:
Open chrome-devtools
Create new snippet (Ctrl+Shift+P, type show snippets, and hit Enter)
document.head.insertAdjacentHTML("beforeend",`<style>
/*Write your css here, sample below*/
body{
color:red !important;
}
</style>`);
// your main script can go here, note, the below code is just a sample
document.body.addEventListener("mouseover", function(){
console.log("logged..")
})
Run the snippet (Ctrl+Enter)
You can also save and use the snippet later, to run the snippet later:
Ctrl+p type ! and the name of your snippet.
We use a closed source knowledge base solution currently, and the WYSIWYG to create articles is TinyMCE (looks like it may be a modified/simplified).
They do not currently allow changing it at all (adding plugins, etc, unless you can inject plugins somehow).
I do have full access to the header and can use javascript, so the question is, is there a way to remove the existing tinymce instance and replace it with my own on page load?
...is there a way to remove the existing tinymce instance and replace
it with my own on page load?
Indeed there is but it may be more work than you want to take on.
If you cannot modify the code that the app uses to load TinyMCE the best you could do would be to...
Wait for the page to load and TinyMCE to initialize
Manually remove TinyMCE from the page using the remove() API
Initialize a new TinyMCE instance on that same textarea using the init() API
Remove API: https://www.tinymce.com/docs/api/tinymce/root_tinymce/#remove
Init API: https://www.tinymce.com/docs/api/tinymce/root_tinymce/#init
You can play with these APIs on http://fiddle.tinymce.com/ to see how they work before you try to mess with the app's codebase. This should get you started: http://fiddle.tinymce.com/kpgaab
On a multi-tab page, some tabs submit process changes the content of other tabs through an ajaxSubmit. If the other tab contains active tinyMCE edits what should I do to that tab before replacing it's content and what should I do (if anything) after the replacement?
Currently the code performs tinyMCE.execCommand("mceRemoveControl", true, ed_id); on all editors in the target tab and relies on the normal functionality of the system to bring them back after the change. Is that all that is necessary? I am experiencing obscure exceptions within the tinyMCE code after the change but it is difficult to discover the cause.
The error itself is SCRIPT5022: IndexSizeError - tiny_mce.js (1,78075) but I doubt that is specifically relevant.
TinyMCE v3.4.5
As i said in my Comments TinyMCE does not play well with AJAX there are loads of problems with it i have tried many times to get it to work.
In the end i switched to CKEditor so if you would like to try and use it you can here is the code you need for the ajaxSubmit() options
beforeSubmit:function{
for(var instanceName in CKEDITOR.instances) {
try{
CKEDITOR.instances[instanceName].destroy();
}catch(e){
}
}
}
the above code will remove CKEditor cleanly before you submit the following is how to re-inistialize CKEditor when your ajax has finished again this is a option for ajaxSubmit():
success:function(){
// do what you need to update your DOM and then final call is
$("editorSelector").ckeditor(options);
}
I'm trying to implement a UI that would let the end user upload multiple file sot a server, on a custom UI - pretty much the same way GMail or Outlook.net is doing it.
Few things to node:
The <input type="file"> is ugly - and not standard (IE shows a button named 'Browse' to the left of the file name. Chrome shows a button named 'Choose' to the right of the file name).
Most suggestions how to do the UI suggests hiding a input file element with opacity=0, but on top of by custom UI. The 'click' event will open the dialog box, and upon return the file name (without the path) will be available as a $('#file').val(). See this question, as well as the sample on jsfiddle.
I'm also aware HTML5 has a multiple="multiple" attribute now, which will let the user select multiple files.
However, I'm looking for a multiple file solution, which will work on IE8 and above (as well as WebKit, Mozila).
Some people suggested Google is using Flash. This is not true. Their multi file upload is working when flash is disabled.
Now, here is my biggest surprise: Using the developer tools (F12) on both IE and Chrome, looking at both GMail and Outlook.NET - both implementations do not have a <input type='file'> element in the tree (as far as I can tell). Moreover, both implementations are working with IE8 (flash disabled).
What is going on? How do they do it?
EDIT: Why do I think they don't use file input element? Open the developer tools (F12), switch to Console, type: document.getElementsByTagName('input'). There are 24 input elements, 19 of which are type=hidden, none is type=file.
EDIT 2:Thank you all responders and commentators. Indeed - the "there is no other way" argument (in comment) below was valid. As it turns out, both Outlook.NET and GMail will have a <input type='file'> element, which they will add dynamically, only when the user clicks the 'Attach a file' button. Then, they will send a 'click' event to the element, which will trigger the select file dialog.
The witness this, use the F12 development tool (either in Chrome, or in IE), and in the interactive console type: document.querySelectorAll('input[type=file]'). Note that in both implementations, the element is a direct child of body (with display=none).
They do not use iframe for the upload (unlike the only answer below), but simple XHR code to upload, which is now, in HTML5 is available.
The best resource on the Web for how to do it is: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications. I've went through the steps of #Jay below (which are great), but the Mozilla page is simpler, which is my recommendation. Also, take a quick look at the jsfiddle sample on #Niranjan comment.
I recently implemented a multi file upload UI for an old asp.net website, but the concepts should be the same.
I'm not very good at writing (summarizing code) but here goes.
Create a number of IFrames. I had problems trying to write IFrames after the document loaded due to security restrictions, so had the server render as many as I though the user would use at once.
Add an 'upload' button and handler which first adds a load handler to one of the iframes.
var frame = $('iframe:first');
in the frame load handler ---
frame.load(function () { /* all the code below* /});
2.a. Write the input tag for file and what ever other elements you like into the frame like this
frame.contents().find('body').html("html goes here");
2.b. Now add a handler to the file input in your frame and submit that form:
frame.contents().find('#fileUpload').change( /*submit the form */)
2.c. Now invoke the file upload dialog
frame.contents().find('#fileUpload').click();
2.d. Now that line will block until the dialog returns. When it does you have to check the value of the file upload control for null in case they canceled. This is where i marked the iframe as not in use.
2.e. Ether way you'll need to unbind from the load of the iframe and rebind to a different method that will handle the return (upload complete)
frame.unbind('load');
frame.load(function () { /* handle file uploaded */})
2.e.1. This is where I reported success to the user and released the frame so it could be reused.
2.e.2. Finally unbind from load again from the upload complete method
All of that is in your frame load handler
3.Now cause the frame to load
frame.load();
At least thats how I did it. I uploaded all the files to a handler which reported file % and a loop inside the parent page fired off ajax getting and displaying the progress of each file.
The main idea is if you want multi file upload in an 'ajaxy' style but not using flash or Html 5 you'll need to use a collection of iframes and some fancy script.
Hope this helps.
I am using TinYMce WYSIWYG editor, It is working fine. I am using OpenSource product without MCFileManager, instead files/images are uploaded via TinyBrowser which is included.
Now I need to trigger this pop-up window where I can browse files to upload from element.
Is there any way to do that via upload files?
P.S Maybe there is a way to get that MCFileManager for free or some kind of license?
You can find the available licences and prices here, you won't get it for free (at least not leagaly).
I never used TinyBrowser, but i am sure you could write your own Tinymce plugin and include your own button to trigger the TinyBrowser.