In this tutorial we will create a mention system in php using quilljs. In order to achive this functionality we will need to create the html form, download the quill js plugin. Quill js is a very usefull rich text editor, this plugin is very easy to use and you can add your own scripts to it in order to create any type of functionality you need. In this tutorial we will create a mention system, when you type @ a list will appear from where the user can select any element he needs.

Implement php metnion system

First of all we will create the form where we will initialize the quill js.

<form id="textarea">
<div id="content_editable"></div>
<input type="submit" value="Send">
</form>

As you can see we don't need textarea to initialize the quilljs, because it will add all elements it needs in the content_editable div. Now let's move on to the js part where we intialize the quilljs. For this you will have to download the quilljs editor and upload all required files to the server. Besides the quill js files you will have to download the mention extension from git.

Here is the jquery function to initalize the quilljs with mention extension.

var $members = [
  {'value':'John Doe', 'memberId':1},
  {'value':'John Doe', 'memberId':2},
  {'value':'John Doe', 'memberId':3},
];
var options = {
   modules: {
    toolbar: [
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike', 'link'],
      ['code-block'],
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    ],
     mention: {
        allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
        mentionDenotationChars: ["@"],
        dataAttributes:['memberId'],
        source: function (searchTerm, renderList, mentionChar) {
           let values = $members;
            if (searchTerm.length === 0) {
              renderList(values, searchTerm);
            } else {
              let matches = [];
              for (i = 0; i < values.length; i++)
                if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
              renderList(matches, searchTerm);
            }
        },
  },
  }, 
  placeholder: 'Write a comment',
  theme: 'snow',
  scrollingContainer: '.parent_container'
};
editor = new Quill('#content_editable', options);

You will need to create a js array where you will store what you what to appear when you type @, is very important to set the value parameter because in this parameter will search for the occurence. If you need more than one parameter to be send to backend you can add it to the array and specify the parameter in dataAttributes paramters. Then it will know to send the paramter to the server.

Now we will need to create an ajax call where we will send the data from our form. To do that we will use the following function:

jQuery('input[type="submit"]').on('click', function(e){
  var data = editor.root.innerHTML;
  jQuery.ajax({
    type:"POST",
    url: your url,
    data:{'content':data},
    success:function(result){
      console.log(result);
    }, 
    error:function(error){

    }
  });
});

Now with the above function we will be able to send content from quill to the server. editor.root.innerHTML - this function will get all the html from Quilljs. 

The final step of our implementation is the PHP part where we will get all ids and store them in the database, to do that we will need to search in the string we have just sent with the ajax function. 

$content = $_POST['content'];
if(!empty($content)){
  $mentions = getContents($content, 'data-member-id="', '"');
  echo '<pre>';var_dump(mentions);die();
}



function getContents($str, $startDelimiter, $endDelimiter) {
  $contents = array();
  $startDelimiterLength = strlen($startDelimiter);
  $endDelimiterLength = strlen($endDelimiter);
  $startFrom = $contentStart = $contentEnd = 0;
  while (false !== ($contentStart = strpos($str, $startDelimiter, $startFrom))) {
    $contentStart += $startDelimiterLength;
    $contentEnd = strpos($str, $endDelimiter, $contentStart);
    if (false === $contentEnd) {
      break;
    }
    $contents[] = substr($str, $contentStart, $contentEnd - $contentStart);
    $startFrom = $contentEnd + $endDelimiterLength;
  }

  return $contents;
}

We need getContents function because we need to find the attributes we passed in the client side. Let me know if you need any help with this implementation.