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

Question

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>

also using jquery to handle other things but how can i implement with this i don't know. — sagar
– sagar, Commented Jul 10, 2016 at 10:39

Iceman · Accepted Answer · 2016-07-10 11:23:59Z

2

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>

edited Jul 10, 2016 at 11:23

answered Jul 10, 2016 at 11:15

Iceman

6,1652 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sagar Over a year ago

Thank you so much . I was just scratching my mind from 4 days that how it will be possible but you helped me alot :) . I haven't tried it yet but I am damn sure you that you will be right.

sagar Over a year ago

I can't until i don't reach a milestone

sagar Over a year ago

i wud as soon as i get the score

Birju Shah · Accepted Answer · 2016-07-10 11:03:14Z

0

//your ajax call
$.ajax({
   type:'POST'
   data:$('#myTextarea').tinyMCE().getContent()
})

answered Jul 10, 2016 at 11:03

Birju Shah

1,2209 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related