如何从tinymce编辑器实例内部获取价值

时间:2018-11-29 07:11:14

标签: javascript jquery tinymce-4

最近,我正在从事这个项目,我必须在tinymce编辑器中创建一个有效的标记系统。我使用了at.js并能够捕获键盘按下事件,但是却无法从涉及ajax调用的函数中获取价值。问题是如何从函数作为数组获取值并将其传递给at脚本,我不知道该如何在javascript或jquery中做到这一点,任何人都可以帮我解决这个问题。我从警报值得到的响应如下: [{"readyState":4,"responseText":"\n\n{\"names\":\"Shikhar Bansal(bshikhar13131313@gmail.com),\"}","responseJSON":{"names":"Shikhar Bansal(bshikhar13131313@gmail.com),"},"status":200,"statusText":"OK"}]

我到目前为止工作的代码,

tinymce.init({
  selector: 'textarea#wall_id_1',
  height: 300,
  theme: 'modern',
  resize: false,
  force_p_newlines: false,
  plugins: 'print preview powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount tinymcespellchecker a11ychecker imagetools mediaembed  linkchecker contextmenu colorpicker textpattern help',
  toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
  image_advtab: true,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ],
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css'
  ],
  setup: function(editor) {
        editor.on('keyup', function(e) {
    /*      
            var eli= $(editor.contentDocument.activeElement).prop('innerHTML');

            var txt=$(eli+'p').html();
          var txt1=$(eli+'span').html();
          var regex=new RegExp(/@+([a-zA-z!._-]+)/g);
           var match= regex.exec(txt); 
     //console.log(match);
   // alert(match);
 var names=load_Ajax(match[1]);
 return names;*/
          if(e.keyCode == 13 && $(editor.contentDocument.activeElement).atwho('isSelecting'))
            return false;
        });
  return names;    
  },

  init_instance_callback: function(editor) {


    var name= editor.on("keyup",function(e){

            var eli= $(editor.contentDocument.activeElement).prop('innerHTML');

            var txt=$(eli+'p').html();
          var txt1=$(eli+'span').html();
          var regex=new RegExp(/@+([a-zA-z!._-]+)/g);
           var match= regex.exec(txt); 

     var results=new Array(); 
$.ajax({
           url : "jsdropdown.php",
   data : {"uname":match[1]},
   async: false,
   complete:function(res){
      results.push(res);
      //results=res;
     // alert(JSON.stringify(res));
    return res;
    },
    dataType: "html"
});



   alert(JSON.stringify(results));  
    }).responseJSON;



        $(editor.contentDocument.activeElement).atwho({at: "@", data: names});

  }

 });

我附上了一段不完美的代码段,请随时对其进行编辑(因为我不足以将其编辑为工作状态。)

var names = ["Jacob", "Isabella", "Ethan", "Emma", "Michael", "Olivia", "Alexander", "Sophia", "William", "Ava", "Joshua", "Emily", "Daniel", "Madison", "Jayden", "Abigail", "Noah", "Chloe", "你好", "你你你", "jeremy"];
tinymce.init({
  selector: 'textarea#wall_id_1',
  height: 300,
  theme: 'modern',
  resize: false,
  force_p_newlines: false,
  plugins: 'print preview powerpaste searchreplace autolink directionality advcode visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount tinymcespellchecker a11ychecker imagetools mediaembed  linkchecker contextmenu colorpicker textpattern help',
  toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
  image_advtab: true,
  templates: [{
      title: 'Test template 1',
      content: 'Test 1'
    },
    {
      title: 'Test template 2',
      content: 'Test 2'
    }
  ],
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css'
  ],
  setup: function(editor) {
    editor.on('keyup', function(e) {
      /*      
            var eli= $(editor.contentDocument.activeElement).prop('innerHTML');
        
            var txt=$(eli+'p').html();
          var txt1=$(eli+'span').html();
          var regex=new RegExp(/@+([a-zA-z!._-]+)/g);
           var match= regex.exec(txt); 
     //console.log(match);
   // alert(match);
 var names=load_Ajax(match[1]);
 return names;*/
      if (e.keyCode == 13 && $(editor.contentDocument.activeElement).atwho('isSelecting'))
        return false;
    });
    return names;
  },

  init_instance_callback: function(editor) {


    var name = editor.on("keyup", function(e) {

      var eli = $(editor.contentDocument.activeElement).prop('innerHTML');

      var txt = $(eli + 'p').html();
      var txt1 = $(eli + 'span').html();
      var regex = new RegExp(/@+([a-zA-z!._-]+)/g);
      var match = regex.exec(txt);

      var results = [];
      $.ajax({
        url: "jsdropdown.php",
        data: {
          "uname": match[1]
        },
        async: false,
        complete: function(res) {
          results.push(res);
          //results=res;
          // alert(JSON.stringify(res));
          return res;
        },
        dataType: "html"
      });



      alert(JSON.stringify(results));
    }).responseJSON;



    $(editor.contentDocument.activeElement).atwho({
      at: "@",
      data: names
    });

  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.4/css/jquery.atwho.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/caret/1.0.0/jquery.caret.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.4/js/jquery.atwho.min.js"></script>
<script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
<div id="banner-message">
  <div class='jumbotron'><input type='text' class='form-control title_s' name='status_title' placeholder='Title '><br>
    <textarea id='wall_id_1' class='update_session' placeholder='whats up'> 
            </textarea><br><button class="btn btn-warning btn btn-large btn-lg post-s"> Post</button></div>
</div>

0 个答案:

没有答案