1

tinymce HTML エディターを使用して、HTML スクリプトをデータベースに保存し、そこから取得してブログ投稿を作成できるエディターを作成しています。発生する問題は、tinymce が「コード」(記述されたコンテンツのソース コード (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 に答える