Allow custom JavaScript to be injected to the CKEditor iframe

Sorry, but this is the territory of the Inline and Media modules.

Questions about custom scripts and hacks are too specific to be handled by the maintainers of this project.

I'd recommend to post this question in the Drupal forums or on http://drupal.stackexchange.com instead. Also see http://drupal.org/community for other support channels.

Thanks,
sun

It's already possible to include custom scripts to interact with the editor and contents in it, by building an editor plugin.
Scripts simply included in the editing area by embedding them with <script> tags will not be executed. The risk of having content - or the script itself - destroyed by all that's going on inside the editor is too great, so scripts are temporarily rendered harmless.
There's nothing we can, or would, do about that. An editor plugin will on the other hand not be part of the content itself and is therefore able to manipulate it freely both as a DOM in WYSIWYG mode and as plain text.

If you write a version of the caption script as an editor plugin, you can implement one of Wysiwyg's hooks in a small Drupal module to make it available for the editor without having to modify Wysiwyg's or CKEditor's own files. See wysiwyg.api.php for hook details and docs.cksource.com for the editor API.

I think that doesn't quite meet the goal of the request, though - the goal here as I understand it is to be able to get some of the same JavaScript that runs on the front-end of your site to run inside the WYSIWYG iframe also. That way it works the same in both places and modifies the content in the same way. Scripts added via an editor plugin run outside the iframe, so although it's possible to make them modify the iframe contents, it would basically require rewriting the code (or even maintaining two separate copies of the code, one for the WYSIWYG and one for the front-end of the site) in order to work.

I had a need for something similar to this ticket and recently wrote a module to do it (WYSIWYG Custom JavaScript). It was actually pretty complicated, especially since I needed to run the full range of Drupal JavaScript (including attaching and detaching Drupal behaviors, Drupal settings, etc) inside the WYSIWYG. But it's a possible solution for anyone who needs this feature.

Possibly a simpler version that focused at least just on enabling raw custom JavaScript files to be injected (and also provided an admin interface for specifying them, just like for custom CSS files) would still be appropriate for this module to include?

Thank you for writing a module for this. I haven't had time to dig into its code yet, but it shows a lot better what you're trying to accomplish and how.

The structure of the content inside the editor is normally quite different from what you'll have when it's properly rendered and I'm interested in how many of them would actually work without modifications.

A couple of the editors supported by Wysiwyg are not using frames, so injecting scripts into those would most likely cause collisions with the rest of the page's scripts, so this functionality would be limitied to a few editors.

What kind of scripts are you using this for? Are there ever any "race conditions" between Wysiwyg's DataProcessor override and the one in this script? How is this performing with a lot of editors and/or injected scripts on the same page?

I was using this mainly for a similar use case as the original poster (JavaScript that created image captions), although also to add a bit of JavaScript that adjusted the HTML inside the WYSIWYG for styling/functionality purposes, to more closely match the main site. The latter turned out to be dicier than I had hoped, but it did eventually work (and if all I cared about was the latter I probably would have just run that custom JavaScript outside the editor rather than inside it - so the captioning JavaScript was the main motivation.)

This hasn't been used in production much yet, but I don't believe there were any race conditions with the DataProcessor override - I seem to remember my module's always ran last. The largest number of editors I've used this on so far is a form with only 2 editors, so not much opportunity to test how it scales to multiple editors per page (or to large numbers of injected scripts).

Good point about the fact that it won't work with certain editors. In my case I needed it with CKEditor only, and there probably are some other editors it could be extended to, but for others that don't use iframes I guess this feature wouldn't make sense.

Another possible use for this functionality is Typekit fonts. They are added by means of JS instead of CSS. See their embed instructions. Without being able to include the script tags in the HEAD of the WYSIWYG frame, you'll never see the correct font while using the WYSIWYG editor.

Default text format not allow you to add scripts tags in editor create a new text format set all privileges as full html and then you can use script tags in editor i did same in drupal 8.3.7