CODEWITHSUNDEEP
javascriptphpjqueryhtmltinymce
Phuong
Phuong

Reputation: 71

Tinymce doesn't save or submit my content

I'm not a professional programmer, I've had little experience working with Javascript and so this Tinymce is confusing me. Basically my client wants to update the content himself without touching the code, so I have to set up this Tinymce so he can edit the content directly on browser. I've followed the instruction to install Tinymce but when I click submit, nothing happens. When I click save, it links me to the PHP page with its code. Below are all my codes. Please tell me what I need to do.

In the HTML page:

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

<script>
  tinymce.init({
        selector: "textarea#elm1",
        theme: "modern",
        width: 800,
        height: 600,
        plugins: [
             "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
             "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
             "save table contextmenu directionality emoticons template paste textcolor"
       ],
       content_css: "css/content.css",
       toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons", 
       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'}
        ],

         setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
    }); 

</script>

<script type="text/javascript">
$(function(){

  var url = "news.php";

  $("#SubmitBtn").click(function(){
    //"content" will PHP variable 
    $.post(url, { "page_content" : tinyMCE.activeEditor.getContent() }, function(respond){

       if ( respond == ){
          alert('Content saved to file');
          return;
       } else {
          //Error message assumed
          alert(respond);
        }
    });
  });

});

</script>

The form: 

<form method="post" action="news.php">
 <textarea id="elm1" name="page_content">The content I wanna edit</textarea>
        <input type="button" id="SubmitBtn" value="Submit"/>
        </form>

In the PHP page:

<?php

if ( isset($_POST['page_content']) ){

   //This is what you want - HTML content from tinyMCE
   //just treat this a string

   if ( save_html_to_file($_POST['page_content'], 'news.html') ){
     //Print 1 and exit script
     die(1);
   } else {
      die('Couldnt write to stream');
   }
}

/**
 * 
 * @param string $content HTML content from TinyMCE editor
 * @param string $path File you want to write into
 * @return boolean TRUE on success
 */
function save_html_to_file($content, $path){
   return (bool) file_put_contents($path, $content);
}

Upvotes: 3

Views: 6604

Answers (3)

aldo
aldo

Reputation: 312

try add this code to the submit button

onclick="tinyMCE.triggerSave(true,true);"

Upvotes: 2

Anshul Mishra
Anshul Mishra

Reputation: 1716

Try this it may solve your problem just get the content of editor by ed.getContent()

 $("#SubmitBtn").click(function(e){
     e.preventDefault();
     var ed = tinyMCE.get('page_content');
     var data = ed.getContent() // get data of editor
     $.post(url, { "page_content" : data }, function(respond){

           if ( respond == ){
              alert('Content saved to file');
              return;
           } else {
              //Error message assumed
              alert(respond);
            }
        });
      });

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Use: e.preventDefault(); to stop the form from submiting

  $("#SubmitBtn").click(function(e){
     e.preventDefault();
        //"content" will PHP variable 
        $.post(url, { "page_content" : tinyMCE.activeEditor.getContent() }, function(respond){

           if ( respond == ){
              alert('Content saved to file');
              return;
           } else {
              //Error message assumed
              alert(respond);
            }
        });
      });

Upvotes: 0

Related Questions