Install text editor in textarea

I’ve created a text editor using HTML and jQuery codes and I want to be able to place it in a textarea, like those editors you can find on the internet. I’ve tried to understand how do they manage to do that in order to do the same, but I’ve failed.

I need to place the editor (that is in a separate file) in several different places and files, but I don’t want to have to copy and paste all of it everywhere. Does anyone knows how to just place it inside a textarea? (is it that how people do it?)

This is my editor: https://jsfiddle.net/ElenaMcDowell/kn1p43vo/6/

What I need is to replace the textarea #example with the editor. I mean, not like replace it, but make it look and function like the texteditor, because I need to keep it just like it is for the php to work.

<textarea id="example" name="example"><?php echo $editedContent; ?></textarea>

EDIT:

For example, TinyMCE is installed with:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>tinymce.init({selector:'textarea'});</script>
<textarea>Next, use our Get Started docs to setup Tiny!</textarea>

While SCEditor is installed like:

<script src="minified/formats/bbcode.min.js"></script>
<script>
// Replace the textarea #example with SCEditor
var textarea = document.getElementById('example');
sceditor.create(textarea, {
    format: 'bbcode',
    style: 'minified/themes/content/default.min.css'
});
</script>

I want to be able to install my Editor in a textarea as well.

Answer

I solved by hidding the textarea, placing the texteditor and replacing the value of the textarea with the one inserted in the editor with .on(‘input’, function).

Advertisement

Answer