在HTML表单中集成CKEditor（一个流行的富文本编辑器）并提交其内容，主要涉及到两个方面：确保CKEditor实例的内容被正确填充到表单的输入字段中，并在表单提交时发送这些数据。
CKEditor通常会自动处理其内容的同步，将其内容填充到初始化时指定的``元素中。因此，在大多数情况下，你不需要编写额外的代码来“提取”CKEditor的内容。只需确保表单包含了一个与CKEditor实例相关联的`<textarea>`元素，并在表单提交时发送该元素即可。</p><p>下面是一个简单的示例，展示了如何集成CKEditor并包含在一个表单中：</p><p></p><pre class="line-numbers language-markup"><code> <!DOCTYPE html> <html> <head> <title>CKEditor in Form</title> <!-- 引入CKEditor CSS（可选，但推荐以匹配编辑器样式） --> <link rel="stylesheet" href="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.css"> <!-- 引入CKEditor JS库 --> <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script> </head> <body> <form action="/submit-your-form" method="post"> <!-- CKEditor实例将自动填充这个textarea --> <textarea name="editorContent" id="editor1" rows="10" cols="80"> <!-- 初始内容，CKEditor会替换这里的内容 --> </textarea> <script> // 初始化CKEditor实例 CKEDITOR.replace('editor1'); </script> <!-- 其他表单元素 --> <input type="submit" value="Submit"> </form> </body> </html> </code></pre> <p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8670312724662002" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-8670312724662002" data-ad-slot="2901279597"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></p> <p></p><p>在这个示例中，当表单被提交时，`editorContent`字段（即`<textarea>`元素的`name`属性）将包含CKEditor中的内容。服务器端将接收到这个字段，就像接收任何其他表单字段一样。</p><p>请注意，CKEditor版本和CDN链接可能会随时间而变化，请确保你使用的是最新版本或适合你项目的版本。此外，如果你的表单处理逻辑复杂（例如，使用AJAX提交表单），你可能需要手动获取CKEditor实例的内容，并将其作为表单数据的一部分发送。这可以通过调用`CKEDITOR.instances.editor1.getData()`来实现，其中`'editor1'`是CKEditor实例的ID。然而，在标准表单提交场景中，这通常是不必要的。</p> </div> </div> </div> </div> <div class="row"> <div class="card card-body"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8670312724662002" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-8670312724662002" data-ad-slot="5669508194"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <hr> <footer class="card" style="position:relative;bottom:0;width:100%;"> <div style="background-color: #e9ecef;padding-top: 20px;"> <div class="container"> <div class="copyright">Copyright © 2024 www.d2tu.com <a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">皖ICP备2023005503号-1</a> <a href="https://www.d2tu.com/sitemap.xml" target="_blank">XML地图</a> </div> <p>QQ邮箱: <b>664032890</b></p> </div> </div> </footer> <script src="/static/js/jquery.min.js"></script> <script src="/static/js/bootstrap.min.js"></script> <script src="/ziyuan/js/prism.js"></script> </body> </html>