我们可以将高级文本编辑器添加到 html 页面中的文本区域吗答案

【问题标题】：Can we add advanced text editors to a textarea in html page我们可以将高级文本编辑器添加到 html 页面中的文本区域吗
【发布时间】：2014-12-08 08:00:28
【问题描述】：

高级文本编辑器似乎在textarea 字段中提供了文本编辑按钮，类似于粗体、斜体、引用和添加图片按钮。我很清楚如何在Content management systems(drupal, joomla) 中添加文本编辑器（如wysiwig、tinymce 等），但我不确定我们是否可以添加这些API s 到我们包含 textarea 字段的简单 html 页面。

有人知道如何添加这些 API 吗？

【问题讨论】：

阅读图书馆网页上的说明，并了解基本演示的工作原理。

标签： javascript api tinymce textarea wysiwyg

【解决方案1】：

使用Quill - 带有 API 的跨浏览器富文本编辑器。

来自文档：

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <div>Hello World!</div>
</div>

<!-- Include the Quill library -->
<script src="http://quilljs.com/js/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor');
  editor.addModule('toolbar', { container: '#toolbar' });
</script>

【讨论】：

如何将其保存到数据库中？
获取编辑器的内容并将其发布到后台运行的脚本中，该脚本可以插入数据库。您可以在按下按钮时执行此操作（例如“保存”按钮），或者在用户输入内容时执行此操作（但您需要消除抖动）。
那么我会将它们保存为 html 吗？
当然可以。使用quill.root.innerHTML 并在此处查看：github.com/quilljs/quill/issues/903

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
   <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
   <script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
   <textarea>Easy! You should check out MoxieManager!</textarea>
</body>
</html>

将下面的 sn-p 复制并粘贴到您的 HTML 页面中

【讨论】：

虽然 MoxieManager 很可能是 OP 正在寻找的东西，但您的回答并没有解释它如何或为什么会有所帮助，并链接到一个可能未知的 .js 文件并推荐某人将其包含在他们的在不知道代码实际作用的情况下，网站是一个巨大的安全风险。我建议您改写您的答案，以谈论 MM 及其工作原理以及解决问题的方式。
请点击此链接了解更多！ tinymce.com/download