javascriptjqueryhtmljquery-uitextstyle

how to apply text styles in div with contenteditable attribute

How to apply text styles like bold, italicize, and underline in div with "contenteditable" attribute?

I used,

contenteditable="true"

attribute in my elements that I want to be editable. I would like to add an option to make it Bold, Italicized, or Underlined.

I research about this and only way I found is using some plugins. I prefer not to use other plugins.

Solution

  • Use execCommand .

    Working Fiddle

    JQuery

    $(document).ready(function() {
  $('#Bold').click(function() {
    document.execCommand('bold');
  });
   $('#Italic').click(function() {
    document.execCommand('italic');
  });
});

    Full option's link for execCommand

    Almost all modern browser support it.