Search code examples
javascriptajaxtinymce-4tinymce-plugins

How to use ajax with tinyMCE HTML editor to send source code

I am using tinymce HTML editor to create an Editor which will be able to store the HTML script into Database and then retrieve from there to create blog Posts. The problem occurring is that tinymce provides a Plugin called "code"(to view the source code(HTML) of written content) which contains a statement

a.getContent(); //To get the source code

I want to use this statement as ajax query to send the query string at backend side. But I don't know how can I use this statement and ajax together . here is the code plugin of Tinymce(I have changed a bit for my testing purpose)

tinymce.PluginManager.add("code",function(a){
function b(){var b=a.windowManager.open({
    title:"Source code",
    body:
    {
        type:"textbox",
        name:"code",multiline:!0,
        minWidth:a.getParam("code_dialog_width",600),
        minHeight:a.getParam("code_dialog_height",Math.min(tinymce.DOM.getViewPort().h-200,500)),
        spellcheck:!1,style:"direction: ltr; text-align: left"
    },
    onSubmit:function(b){
    a.focus(),
    a.undoManager.transact(function(){
    a.setContent(b.data.code)}),
    a.selection.setCursorLocation(),
    a.nodeChanged()
}});
console.log(a.getContent({source_view:0}))}
a.addCommand("mceCodeEditor",b),
a.addButton("code",{icon:"code",tooltip:"Source code",onclick:b}),
a.addMenuItem("code",{icon:"code",text:"Source code",context:"tools",onclick:b})});

My Webpage contain this

<head>
<script src="jquery.1.12.2.min.js"></script>
<script type="text/javascript" src='tinymce.min.js'></script>
<script type="text/javascript">
 tinymce.init({
 selector: '#myTextarea',
 theme: 'modern',
 width: 600,
 height: 300,
 plugins:
  'code' });
</script>
</head>
 <body>
 <div id="myTextarea"></div>
 </body>
</html>
Solution

  • tinyMCE.get('myTextarea').getContent() will give you the data which is inside the editor.

    Now use $.ajax to send the data to the server.

    See the code example:

    JS Bin link : http://jsbin.com/giruro/edit?html,js,output

    The "SEE" button justs alerts the data, and the "SEND" button sends an AJAX request to the server with the tinyce editor content.

    $("#target1").click(function() {
  alert(tinyMCE.get('myTextarea').getContent());
});
$("#target2").click(function() {
  $.ajax({
      method: "POST",
      url: "foobar",
      data: {
        data: tinyMCE.get('myTextarea').getContent()
      }
    })
    .done(function(msg) {
      alert("Data Saved: " + msg);
    });
});
    <!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
  <script type="text/javascript" src='tinymce.min.js'></script>
  <script type="text/javascript">
    tinymce.init({
      selector: '#myTextarea',
      theme: 'modern',
      width: 600,
      height: 300,
      plugins: 'code'
    });
  </script>
</head>

<body>
  <button id="target">SEE</button>
  <button id="target">SEND</button>
  <div id="myTextarea"></div>
</body>

</html>

</html>