HTML Elements inside Contenteditable?

Question

I have a contenteditable tag, and I want my users to be able to type code into it. However, when I type into the contenteditable tag, my code shows up as text rather than an actual element. Is there a way for a user to create a full, working HTML element in a contenteditable box? I know it is possible for the client to insert code using javascript, but what about users who do not have access to javascript? How could users get code such as buttons inside a contenteditable box?

<p contenteditable="true">Try typing code in here as user, code will only be text...</p>

Is there a javascript way to accomplish this without JQUERY?

EDIT

I spent a long time searching for answers on Google, but nothing came up. The best solution I've gotten at this point has been @Dekel's comment on CKEditor. If there is another solution, I want to hear it. If there isn't, I'm sticking to CKEditor. I don't have much time, so I need a solution fast.

MORE EDIT =D

I recently developed my own answer to my question by looking at @Brandon's .replace answer (which only worked for client-coding, not user-coding) and modifying it to work with user-coding.

Answer 1

This isn't pretty, but you could make it work if you are looking to add HTML only. Otherwise an inline editor might work best.

var el = document.querySelector('p')
el.addEventListener('blur', function() {
  var map = {amp: '&', lt: '<', gt: '>', quot: '"', '#039': "'"}
  var html = this.innerHTML.replace(/&([^;]+);/g, (m, c) => map[c]);
  this.innerHTML = html;
});

<p contenteditable="true">Try typing <b>code</b> in here as user, code will only be text...</p>

Answer 2

This answer is similar to @Brandon's idea, but is much more simple.

https://jsfiddle.net/azopqLe4/

<iframe width="100%" height="300" src="//jsfiddle.net/azopqLe4/embedded/js,html,result/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

function convertit() {
	var convet = document.getElementById("convet");
  var text = convet.innerHTML;
  var newtext;

  newtext = text.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
  
  convet.innerHTML = newtext;
}
//this version runs onrightclick =D

<p contenteditable="true" oncontextmenu="convertit();" id="convet">
Type some code here, then right-click... =D
</p>

In the second snippet, I typed <b>Test</b>, right-clicked it, and it became Test! My answer works through simple array replacement methods, although it is frustrating and time-wasting to keep right-clicking all the time. To prevent the actual contextmenu from popping up, just add .preventDefault().