Allow user to simple format TextArea? (Bold, Italic, List, Link)

Anvil Q&A
1

Hi,

I need my users to be able to format text they enter into a TextArea (or similar).
Such as:

  • Bold
  • Italic
  • Underline
  • Ordered List
  • Unordered List
  • Link (URL)

Having searched the forum and Google, I’ve not managed to find anything so I’m not sure if this has been done before within Anvil?

Any help would be much appreciated.

A mock up below for clarity:
image

2

I use Quill and it is awesome.

Here are some links to posts from prior discussion to help you get started.

If you have any questions just reply here and I can help you. We heavily use the rich text editor in our application so i’ve tackled alot of the issues that you might run into.

5 Likes
3

That is fantastic. Exactly what I need.

Thank you.

1 Like
4

here are some samples of how I use the styling, how i collect the html, and how I put text in the editor.

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote' , 'link'],

   // custom button values
  //[{ 'list': 'ordered'}, { 'list': 'bullet' }],   // superscript/subscript
 
  //[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  //[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

 // [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
 // [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // remove formatting button
];

//var container = $(this).find(".editor-container").get(0);
 var quill = new Quill("#editor-container", {
  modules: {
toolbar: toolbarOptions
  },
  theme: 'snow'
});
 
 function getContents() {
  var delta = quill.getContents();
   
  return quillGetHTML(delta);
}
  function quillGetHTML(inputDelta) {
var tempCont = document.createElement("div");
(new Quill(tempCont)).setContents(inputDelta);
return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}
  function insertCanned(canned_html) {
quill.clipboard.dangerouslyPasteHTML(canned_html);
  }
2 Likes