как получить значение из экземпляра редактора tinymce - PullRequest
Новая
       6

как получить значение из экземпляра редактора tinymce

0 голосов
/ 29 ноября 2018

В последнее время я работаю над этим проектом, где мне нужно создать работающую систему тегов в редакторе 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>
...