QuillJS No-focus Placeholder Example

A QuillJS No-Focus Placeholder Example.markdown

QuillJS No-focus Placeholder Example

A Pen by ryanhaney on CodePen.

License.

index.html

<div id="editor">
</div>

script.js

var quill = new Quill('#editor', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  // the default placeholder displays
  // when the editor is blank, even when
  // the editor has focus.
  // placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

let editorParagraph = document.querySelector('#editor > div > p')
editorParagraph.setAttribute('placeholder', 'Compose an epic...')

scripts

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>

style.css

#editor {
  height: 375px;
}

.ql-blank:not(:focus) p:before {
  content: attr(placeholder);
  color: #000;
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />