Enhance your code with TinyMCE scripting

Question

Enhance your code with TinyMCE scripting

Currently, I am exploring methods to incorporate an external script into tinymce. The specific script in question is p7EHCscript which is designed to ensure two divs have equal heights based on the larger div's height.

I aim to integrate the p7EHC script within the tinymce editor so that it mirrors the appearance of the final page being developed.

The current configuration with tinymce includes:

tinyMCE.init({

            // General options
            mode : "textareas",
            editor_selector : "mceEditor",
            editor_deselector : "mceNoEditor",
            remove_script_host : false,
            convert_urls : false,
            content_css : 'http://localhost/tmtphotography/css/mce.css',

            width: "1030",
            height : "480",

            theme : "advanced",
            plugins : "safari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template,preview",
            file_browser_callback : "filebrowser",
            // Theme options
            theme_advanced_buttons1 : "save,preview,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
            theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
            theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage,imgae,media,link",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,

             theme_advanced_font_sizes : "10px,12px,13px,14px,16px,24px",
     font_size_style_values : "xx-small,x-small,12pt,medium,large,x-large,xx-large",


            // Skin options
            skin : "o2k7",
            // Example content CSS (should be your site CSS)


    });
  `

Your assistance in guiding me through this process would be greatly valued.

javascript tinymce

Answer 1

Answer №1

If you're looking to include the script in the document head using a script tag, here's how you can do it:

<script type="text/javascript" src="javascript/p7EHCscripts.js"></script>

Since tinymce utilizes its own iframe with its own document, we need to target this specific iframe. Here is the code required to achieve this:

var iframe_id = 'your_editor_id' + '_ifr'; // replace 'your_editor_id' with your editor id+'_ifr'
with(document.getElementById(iframe_id).contentWindow) {
  
  var h = document.getElementsByTagName("head");
  if (!h.length) return;
  var scripttag = document.createElement("script");
  scripttag.type = "text/javascript";
  scripttag.src = "http://myserver.com/my_dir1/my_dir2/javascript/p7EHCscripts.js"; // example
  h[0].appendChild ( scripttag );
}

Answer 2

If you're looking to include the script in the document head using a script tag, here's how you can do it:

<script type="text/javascript" src="javascript/p7EHCscripts.js"></script>

Since tinymce utilizes its own iframe with its own document, we need to target this specific iframe. Here is the code required to achieve this:

var iframe_id = 'your_editor_id' + '_ifr'; // replace 'your_editor_id' with your editor id+'_ifr'
with(document.getElementById(iframe_id).contentWindow) {
  
  var h = document.getElementsByTagName("head");
  if (!h.length) return;
  var scripttag = document.createElement("script");
  scripttag.type = "text/javascript";
  scripttag.src = "http://myserver.com/my_dir1/my_dir2/javascript/p7EHCscripts.js"; // example
  h[0].appendChild ( scripttag );
}

Enhance your code with TinyMCE scripting

Answer №1

Similar questions

Exploring Database with NodeJS, Express, and HTML

Jssor's dynamic slider brings a touch of sophistication to preview upcoming images

Glitchy/Crazy CSS3 Animations

Can JavaScript be used to mimic selecting a location from the autocomplete dropdown in Google Maps API 3?

Is the process of converting text to PNG and then reading it as a stream all completed on the front-end?

Efficiency boost: Implementing ajax to load content

Design a dynamic pagination button for my project that allows users to navigate between pages effortlessly

Is it possible to remove the "getContext" property from the HTML5 Canvas element using a script?

What is the best way to trigger a random quote to load from an API in ReactJS using an event like onLoad or another method?

switching back and forth between the registration and login forms

transferring information within React applications

Prevent the Stop Function from being executed repeatedly while scrolling

Tips for retrieving data from a JSON response with the specified structure

Cross domain request in a simple HTML document

Having trouble importing Bootstrap into Next.js? It seems like the issue may be related to the

automatically created button, form control named 'answer' that is not valid

Could anybody provide some assistance with JavaScript?

Issue with highcharts and vue.js: creating a unique chart for displaying measurements

Vue.js is throwing an error because it cannot find the property or method "blah" when referencing it during rendering

Navigate to items within a content block with a set height