在 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、放置文本编辑器并将 textarea 的值替换为使用 .on('input', function) 在编辑器中插入的值来解决。

在 textarea 中安装文本编辑器

Install text editor in textarea

javascript

jquery

editor

text-editor

rich-text-editor