如何使用ajax with tinyMCE HTML编辑器发送源码

Question

我正在使用 tinymce HTML 编辑器创建一个编辑器，它将能够将 HTML 脚本存储到数据库中，然后从那里检索以创建博客文章。出现的问题是tinymce提供了一个叫做"code"的Plugin(查看写内容的源代码(HTML))里面有一个语句

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

我想将此语句用作 ajax 查询以在后端发送查询字符串。但我不知道如何将此语句和 ajax 一起使用。这是Tinymce的代码插件（我为了测试目的做了一些改动）

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})});

我的网页包含这个

<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>

Answer 1

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

Answer 2

tinyMCE.get('myTextarea').getContent() 将为您提供编辑器中的数据。

现在使用$.ajax将数据发送到服务器。

查看代码示例：

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

"SEE" button只是提醒数据，"SEND" button向服务器发送AJAX请求，里面有tinyce编辑器内容

$("#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>

如何使用ajax with tinyMCE HTML编辑器发送源码

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

javascript

ajax

tinymce-4

tinymce-plugins