Jump to content

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


narutofan

Recommended Posts

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"});
          });
        }
      }); 

 

Link to comment
Share on other sites

	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.

 

Link to comment
Share on other sites

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>";

 

Link to comment
Share on other sites

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
        })
      }
 });

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.