Posted in js
6701
12:15 am, August 19, 2020
 

enable tinymce on a target textarea by id

this is useful if you have multiple textareas on a page and want to enable tinymce on, also included are buttons to enable and disable on all textareas on the page

HTML

<h3>These buttons enable and disable the editor on both text areas below</h3>
<p>
<button class='btn btn-primary' onclick="load_tinymce('textarea');">Enable TinyMCE All Textareas</button>
<button class='btn btn-primary' onclick="tinymce.remove('textarea');">Disable TinyMCE All Textareas</button>
</p>

<h3>Single Target load and unload</h3>
<p>These buttons enable and disable the editor on just the editor with the id <code>#tinymce_enabled</code></p>
<p>
<button class='btn btn-primary' onclick="load_tinymce('#tinymce_enabled');">Enable TinyMCE Single</button>
<button class='btn btn-primary' onclick="tinymce.remove('#tinymce_enabled');">Disable TinyMCE Single</button>
</p>


<p><textarea id="tinymce_enabled" placeholder="tinymce_enabled"></textarea></p>
<p><textarea id="tinymce_disabled" placeholder="tinymce_disabled"></textarea></p>

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.4/tinymce.min.js" integrity="sha256-rjy8f5xTyKOb6CxACEd6Vc99uhhjTKuqmTMrZ7TbdOA=" crossorigin="anonymous"></script>

Javascript

function load_tinymce(idclass) {
      tinymce.init({
          selector: idclass,
          plugins: [ "spellchecker code autolink link image fullscreen searchreplace wordcount visualblocks visualchars insertdatetime media table paste textcolor textpattern emoticons media lists" ],
          toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link unlink image | code | forecolor backcolor | emoticons",
          image_advtab: true,
          height: 400,
          content_css : "/css/style.css",
					relative_urls: false,
          convert_urls: false,
          remove_script_host : false					
      });
  }

These buttons enable and disable the editor on both text areas below

Single Target load and unload

These buttons enable and disable the editor on just the editor with the id #tinymce_enabled

View Statistics
This Week
89
This Month
536
This Year
800

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in js
jqueryui date selector with examples and code with custom date formatting fancybox youtube showing video links in a lightbox - updated with fixed code parts fix for Uncaught (in promise) Error: reCAPTCHA placeholder element must be empty enable tinymce on a target textarea by id Generate Random Whole Numbers with JavaScript Function Generate Random Fractions with JavaScript jquery document ready make clickable element with clickable class using getElementById and innerHTML to change the html of content no jquery preserve tabs in textarea when tab key is pressed jqueryui includes css and js using vue and json data jqueryui date selector with examples and code jquery accordion fancybox youtube showing video links in a lightbox jquery jqueryui vue script includes get select option form value with jquery show the year with js jquery clone and append elements stacktable jQuery plugin for stacking tables on small screens load content with jquery find all elements add class jquery digital clock with jquery using regex with replace to replace all instances of something in a string random string generator guid set and check a cookie using js cookie validate email address from string check length of element jquery access hacker news json firebase api via jquery testing chartjs clipboard copy js tiny mce editor tinymce do something later with settimeout or loop with setinterval validate form data using javascript to check required html elements mithril testing parallax js scroll testing change the water colour in google maps for an already initialised map scrollbar replacement simplebar load google sheet data into json string with jquery change favicon with jquery add this Slick Slider Carousel change the window title flems embed in url detect window scroll position jquery truncate string using jquery round number with js google map with overlay data
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Many of life's failures are people who did not realize how close they were to success when they gave up.
Thomas A. Edison
Random CSS Property

repeating-radial-gradient()

The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient(). The function's result is an object of the <gradient> data type, which is a special kind of <image>.
repeating-radial-gradient() css reference