how to initiate at.js to read as user types in tinymce editor

[narutofan]

Hi,
 currently i'm trying to create a facebook style tagging system with tinymce3 editor(i don't have a choice to upgrade to 4th version) and i'm following this example here https://github.com/ichord/At.js/wiki/usage-with-TinyMCE. The problem is i'm not able to initiate the facebook style dropdown tagging system as i type in the editor. can anyone help me with this.
the code i tried so far:

tinyMCE.onAddEditor.add(function(mgr, ed) {
        var editor = $('#' + ed.editor + '.atjs');
        var names = ["Jacob","Isabella","Ethan","Emma","Michael","Olivia","Alexander","Sophia","William","Ava","Joshua","Emily","Daniel","Madison","Jayden","Abigail","Noah","Chloe","你好","你你你", "jeremy"];
        if (editor.length == 1) {
          ed.onInit.add(function(ed, l) {
            $(ed.contentDocument.activeElement).atwho({at: "@",data: "names"});
          });
        }
      }); 

 

[kicken]

Did you give your editor the atjs class?  Did you initialize tinymce on the editor?

[narutofan]

i don't know how to give the class. But i initialised tinymce on the editor @kicken

[narutofan]

@kicken the example provided doesn't talk about giving class to tinymce

[kicken]

	var editor = $('#' + ed.editor + '.atjs');

That line means it is going to try and find an element with id=ed.editor and class="atjs".

So you'd need to write your textarea such as:

	<textarea id="yourEditor" class="atjs"></textarea>
	

then initialize tinymce on that textarea.

 

[narutofan]

i tried as you said it's not working @kicken here is my code where the textarea is:

echo "<div class='jumbotron'><input type='text' class='form-control title_s' name='status_title' placeholder='Title ' ><br>"
            . "<textarea id='editor' name='content' class='update_session atjs' placeholder='whats up ".$session_uname."'>"
            . "</textarea><br><span class='status_spinner'></span><br>"
            . "<span id='status_spinner' class='pull_left'></span><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s'>Post</button></div>";

 

Edited November 18, 2018 by narutofan

[narutofan]

i upgraded to version 4 and the script is working now but now i face a new problem. in order to fetch names via jquery .post function i need the input value from tinymceafter the @ selector do you know how to fetch it. @kicken

the code i tried so far :

var uname=tinymce.init({
  
  init_instance_callback: function(editor) {
 $(editor.contentDocument.activeElement).val().then(function(val){alert(val);});
      }
      });
    
//  var names = ["Jacob","Isabella","Ethan","Emma","Michael","Olivia","Alexander","Sophia","William","Ava","Joshua","Emily","Daniel","Madison","Jayden","Abigail","Noah","Chloe","你好","你你你", "jeremy"];
var names= [$.post(
            "jsdropdown.php", 
    {"uname": uname}
                
    ,
    function(res){
     
 return res;       
})]; 
tinymce.init({
  selector: 'textarea#wall_id_1',
  height: 300,
  theme: 'modern',
  resize: 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'
  ],
 
  init_instance_callback: function(editor) {
        $(editor.contentDocument.activeElement).atwho({at: "@", data: names});
      },
      setup: function(editor) {
        editor.on('keydown', function(e) {
          if(e.keyCode == 13 && $(editor.contentDocument.activeElement).atwho('isSelecting'))
            return false
        })
      }
 });

 

Edited November 18, 2018 by narutofan