JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<script src="//cdn.quilljs.com/1.1.10/quill.js"></script>
<link rel="stylesheet" href="//cdn.quilljs.com/1.1.10/quill.bubble.css">
<link rel="stylesheet" href="//cdn.quilljs.com/1.1.10/quill.snow.css">
<input type="file" id="file-input">
<textarea id="content"></textarea>

<div id="toolbar">
  <!-- Add buttons as you would before -->
  <span class="ql-formats">
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
    <button class="ql-blockquote"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-link"></button>
    <button class="ql-list" value="bullet"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-file">F</button>
    <button class="ql-image"></button>
    <button class="ql-video"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-code-block"></button>
  </span>
</div>
<div id="editor-container">
</div>

CSS

.ql-container.ql-snow{
  border-color: transparent;
}

.ql-toolbar.ql-snow{
  border-color: transparent;
}

.ql-formats button:not(.ql-active):not(:hover){
  opacity: 0.4;
}

.ql-snow.ql-toolbar button.ql-file {

}

JavaScript

function getFile(){
	document.getElementById('file-input').click();
};

document.querySelector('.ql-file').onclick = getFile;

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: '#toolbar'
  },
  placeholder: 'Just start writing...',
  theme: 'snow'  // or 'bubble'
});

function convertLinks(text){
	var reg = /((http|https|ftp|ftps)\:\/\/|(www\.))[a-zA-Z0-9\-\.]+\.[a-zA-Z]*(:\d*)?(\/[^\s<]*)?/g,
  		quant = (text.match(reg)||[]).length;
  
  do{
  	text = text.replace(reg, function(match){
    	console.log(match)
    	quant--;
    	return '<a href="' +match+ '">' +match+ '</a>';
    });
  } while(quant);
  
  return text;
};

quill.on('text-change', function(delta, oldDelta, source) {
	var value = quill.container.firstChild.innerHTML;
  
  value = convertLinks(value);
  quill.container.firstChild.innerHTML = value;
  document.getElementById('content').value = value;
});