1

我正在使用 tinymce HTML 编辑器创建一个编辑器，它能够将 HTML 脚本存储到数据库中，然后从那里检索以创建博客帖子。出现的问题是tinymce提供了一个名为“code”的插件（查看书面内容的源代码（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>
4

2 回答 2

2

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

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

参见代码示例：

JS Bin 链接： http: //jsbin.com/giruro/edit ?html,js,output

justs"SEE" button会提醒数据，然后"SEND" button使用 tinyce 编辑器内容向服务器发送 AJAX 请求。

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

于 2016-07-10T11:15:34.153 回答
0 
//your ajax call
$.ajax({
   type:'POST'
   data:$('#myTextarea').tinyMCE().getContent()
})
于 2016-07-10T11:03:14.977 回答