0

I am building a classic post related cms on LAMP stack, as a project to show at future interviews and land a job potentially. I want to build a rich text editor. After some research both in r/javascript and stack overflow I drew some conclusions.

  1. Don't use "contentEditable=true" flag because according to one of CKEditor's devs https://stackoverflow.com/a/11479435/10245890 is not optimal
  2. The general consensus is to use iframe because of the isolation it provides.
  3. Yes I know I will not build the next CKEditor on my own, it takes years of far more experienced people than me, I just want to learn about the Javascript APIs.
  4. Generally I want to use vanilla version of the languages in the stack in order to get a better understanding of them.

The 'easy' way out to get a simple rich text editor going is to use execCommand but it is obselete. What I came up with goes like this:

function formatBold(){
  var selection = document.getSelection().toString();
  var originalString = document.getElementById("post-body-editor").innerHTML;
  document.getElementById("post-body-editor").focus();
  document.getElementById("post-body-editor").innerHTML = originalString.replace(selection, '<b>'+ selection +'</b>');
  return;
}
document.addEventListener('keydown', function(event) {
  if(event.ctrlKey && event.key === 'b'){
    formatBold();
    return;
  }
  return;
});

The function is called with a HTML button or key press. I saw in MDN that there is a method to implement insert Link, format a text with bold etc. Question is. I see some, if not many ,methods flagged as deprecated but they seem to be working. Should I use them or make it work on my own as shown above? I realize its not the most elegant solution but I believe it works fine for my level. Also any articles or other reading material is appreciated ofc.

EDIT:Formatting

spyros gr
  • 3
  • 2
  • You should avoid the use of deprecated code. – devlin carnate Aug 20 '20 at 17:35
  • If the question is just about using deprecated/obsolete features, the answer is: don't use. Though, I doubt `execCommand` would never really be removed from the browsers, that would break tons of existing pages ... If you really want to create a WYSIWYG editor, you've to dive deep in the world of [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model). In that world use of `innerHTML` is exceptional, you would work with [Nodes](https://developer.mozilla.org/en-US/docs/Web/API/Node) and [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) etc. – Teemu Aug 20 '20 at 17:47
  • Yeah the question mainly was about deprecated methods because in this case it seems weird to me that the methods that format the text as bold, or anchors a link etc are deprecated and at least I cannot find an non-deprecated method for such basic functionallity. – spyros gr Aug 20 '20 at 17:59

1 Answers1

0

If the question is just about using deprecated/obsolete features, the answer is: don't use. Though, I doubt execCommand would never really be removed from the browsers, that would break tons of existing pages ... If you really want to create a WYSIWYG editor, you've to dive deep in the world of DOM. In that world use of innerHTML is exceptional, you would work with Nodes and ShadowRoot etc.

Answered by Teemu in comment above.

spyros gr
  • 3
  • 2