在 textarea 中安装文本编辑器

Question

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

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

这是我的编辑器：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>

我也希望能够在文本区域中安装我的编辑器。

Answer 1

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