在 textarea 中安装文本编辑器

问题描述

我已经使用 HTML 和 jQuery 代码创建了一个文本编辑器，我希望能够将它放置在文本区域中，就像您可以在 Internet 上找到的那些编辑器一样。我试图了解他们是如何做到这一点的，但我失败了。

我需要将编辑器（即在一个单独的文件中）放置在几个不同的位置和文件中，但我不想在任何地方复制和粘贴所有内容。有谁知道如何将它放在 textarea 中？ （人们就是这样做的吗？）

这是我的编辑器：https://jsfiddle.net/ElenaMcDowell/kn1p43vo/6/

我需要的是用编辑器替换 textarea #example。我的意思是，不是像替换它，而是让它看起来和功能像文本编辑器，因为我需要保持它就像 PHP 工作一样。

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

编辑：

例如，TinyMCE 安装有：

<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>

虽然 SCEditor 的安装方式如下：

<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>

我也希望能够在 textarea 中安装我的编辑器。

解决方法

我通过隐藏 textarea、放置 texteditor 并用 .on('input',function) 将 textarea 的值替换为插入到编辑器中的值来解决。