Tiny MCE Editor

Posted on by admin

TinyMCE Editor

https://www.tiny.cloud/blog/

Latest versions(4+) ask for "Your Tiny API Key"
Demo with version 3.4

Your API Key is a unique token that links your TinyMCE instances to your account. It grants you access to the Premium Features that you are subscribed to.
To get Key word
Register or Login

Simplest Usage

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/<API KEY>/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
  <textarea>
    Welcome to TinyMCE!
  </textarea>
  <script>
    tinymce.init({
      selector: 'textarea',
      plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      toolbar_mode: 'floating',
    });
  </script>
</body>
</html>

Domain List

TinyMCE will only be loaded on your approved root domains. You can add multiple domains at the same time by separating them with a comma.

Syntax highlighting in Blogspot
Syntax highlighting in Blogspot

Standalone Version

To have a stand alone verson(which doesnt need API Key ), use
TinyMCE version 3.5.12 https://www.tiny.cloud/docs/demo/full-featured/
Check TinyMCE Editor with PHP
Download Latest Version
Download Older versions

Simplest Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
  <title>TinyMCE Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

  <!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
  <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

  <script type="text/javascript">
    tinyMCE.init({
      mode : "textareas"
    });
    </script>
</head>
<body>

  <!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
  <form method="post" action="show.php">
    <p>
      <textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
      <input type="submit" value="Save" />
    </p>
</form>

</body>
</html>

Server Side (PHP)

<?php
/* post.php : this page shows what insert.php has sent */
echo(stripslashes($_POST['content']));
?>

A full featured version

tinyMCE.init({
        // General options
        selector: 'textarea',
        mode : "textareas",
        plugins : "paste,autolink,lists,pagebreak,style,layer,table,save,advhr,advimage," +
                    "advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace," +
                    "print,contextmenu,directionality,fullscreen,noneditable,visualchars,nonbreaking," +
                    "xhtmlxtras,template,wordcount,advlist,visualblocks",

        // Theme options
        theme_advanced_buttons1 : "save,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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        add_unload_trigger: false,

        theme_advanced_default_font_size : '10pt',
        theme_advanced_default_font_family : 'Verdana',
        theme_advanced_fonts : "Andale Mono=andale mono,monospace;Arial=arial,helvetica,sans-serif;Arial Black=arial black,sans-serif;Book Antiqua=book antiqua,palatino,serif;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,palatino,serif;Helvetica=helvetica,arial,sans-serif;Impact=impact,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco,monospace;Times New Roman=times new roman,times,serif;Trebuchet MS=trebuchet ms,geneva,sans-serif;Verdana=verdana,geneva,sans-serif;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
        theme_advanced_font_sizes : '8pt,9pt,10pt,11pt,12pt,14pt,16pt,18pt,20pt,22pt,24pt,28pt,36pt',
        paste_retain_style_properties: 'font-size,font-family,color',
        paste_remove_styles_if_webkit: false,

        powerpaste_word_import: 'merge',
        powerpaste_html_import: 'clean',
        powerpaste_allow_local_images: false,

        // Example content CSS (should be your site CSS)
        // content_css : "css/content.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",

        // Style formats
        style_formats : [
            {title : 'Bold text', inline : 'b'},
            {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
            {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
            {title : 'Example 1', inline : 'span', classes : 'example1'},
            {title : 'Example 2', inline : 'span', classes : 'example2'},
            {title : 'Table styles'},
            {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        ],

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });

Genereic PHP Code

<!-- TinyMCE -->
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
    tinyMCE.init({
        // General options
        mode : "textareas",
        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",

        // Theme options
        theme_advanced_buttons1 : "fullscreen,save,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,|",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Example content CSS (should be your site CSS)
        content_css : "tinyMCEcss/content.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",
        remove_linebreaks : false, //<-- working, isn't it set to false by default??
            convert_newlines_to_brs : false,
            force_br_newlines : true,
            force_p_newlines : false,
            forced_root_block : '', // Needed for 3.x
        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        }
    });
<!-- /TinyMCE --> 
</script>
<style type="text/css">
            /* CSS goes here */
            /* keep this! */
            #loading {display:none; position:absolute; top:0px; left:0px; width:100%;height:1000px; background-color:#000066; opacity:.25; text-align:center; vertical-align:middle} /*hide the loading element by default*/

</style>
<div id="loading"></div>

<script language="javascript" type="text/javascript">
function getDpScreenDimensions()
    {
        var winW = document.width, winH = document.height;

        if (parseInt(navigator.appVersion)>3) {
            if (navigator.appName=="Netscape") {
                winW = window.innerWidth;
                winH = window.innerHeight;
             }
             if (navigator.appName.indexOf("Microsoft")!=-1) {
                winW = document.body.offsetWidth;
                winH = document.body.offsetHeight;
             }
        }
        return {h:winH,w:winW};
    }
    function dpLoadTemplate(templateList,textAreaType)
    {
        //alert('hi');
        var selectedTemplate  = templateList.options[templateList.options.selectedIndex].value;
        //alert(selectedTemplate);
        var dpScreenDimensions =getDpScreenDimensions();
        document.getElementById("loading").style.height = dpScreenDimensions.h;
        document.getElementById("loading").style.display="block";
        var xmlhttp= dpAjaxRequest();
        if(!xmlhttp) 
        {
            alert('No Ajax Support,try in a different Browser')
            return;
        }
        //templateType=default&textAreaType=task
        //alert("templates/index.php?templateType="+selectedTemplate+"&textAreaType="+textAreaType);
        xmlhttp.open("GET", "templates/index.php?templateType="+selectedTemplate+"&textAreaType="+textAreaType,true);
        xmlhttp.onreadystatechange=function() {
            //alert(xmlhttp.readyState);
          if (xmlhttp.readyState==4) {

           var xmlDoc = xmlhttp.responseXML;
           var dpTextNodes = xmlDoc.documentElement.getElementsByTagName("dpTextContent");
           //alert(xmlhttp.responseText);
           var dpText = dpTextNodes[0].childNodes[0].nodeValue;
          // alert(dpText);
           tinyMCE.getInstanceById(textAreaType+'_description').getWin().document.body.innerHTML =  dpText;//selectedTemplate
          document.getElementById("loading").style.display="none";
          }
         }
         xmlhttp.send(null)

    }
    </script>
    <script language="javascript" type="text/javascript">
    function dpAjaxRequest()
    {
         var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
         if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
          for (var i=0; i<activexmodes.length; i++){
           try{
              return new ActiveXObject(activexmodes[i])
           }
           catch(e){
            //suppress error
           }
          }
         }
         else if (window.XMLHttpRequest) // if Mozilla, Safari etc
          return new XMLHttpRequest()
         else
          return false
    }
</script>

<?php
//declare templates lists for tasks,projects and knowledgebase using heredoc operator
//Adding task template list
$dpTaskTemplateList = <<<DPTASKTEMPLATES
<select id="dpTaskTemplateList" name="dpTaskTemplateList" onChange="dpLoadTemplate(this,'task')">
<option value="default">Default</option>
<option value="requirementAnalysis">Requirement Analysis</option>
<option value="knowledgeBase">KnowledgeBase</option>
<option value="useCase">Use Case(Form Testing)</option>
<option value="layoutTesting">Layout Testing</option>
<option value="proposal">Proposal</option>
<option value="starting">First Task</option>
<option value="openingDiscussion">Opening Discussion Task</option>
<option value="summary">Overall Summary Task</option>
<option value="pendingPayments">Pending Payments</option>
</select>
DPTASKTEMPLATES;

//Adding project template list
$dpProjectTemplateList = <<<DPPROJECTTEMPLATES
<select id="dpProjectTemplateList" name="dpProjectTemplateList"  onChange="dpLoadTemplate(this,'project')">
<option value="default">Default</option>
<option value="knowledgeBase">KnowledgeBase</option>
</select>
DPPROJECTTEMPLATES;
//echo $dpKnowledgeBaseProjectTable;
?>

Javascript Manipulations

If using AJAX

tinyMCE.triggerSave();
eg:

<input class="button" type="button" name="btnFuseAction" value="<?php echo $AppUI->_('save');?>" onClick="tinyMCE.triggerSave();submitIt(document.editFrm);" />

Dynamically setting editor content

tinyMCE.getInstanceById(textAreaType+'_description').getWin().document.body.innerHTML =  dpText;//selectedTemplate

Related Posts

HTML DOCX

December 8, 2021

Syntax highlighting in Blogspot

December 8, 2021