TinyMCE 富文本使用

TinyMCE是一个功能强大且灵活的富文本编辑器，可以嵌入到任意Web应用中使用。

第1步：引入TinyMCE脚本

在中插入如下这行代码，将tinymce.min.js源文件引入项目。
<script src="你的网站路径/tinymce/tinymce.min.js"></script>

官方原文这里是需要在官方申请一个api_key的，虽然免费，但译者强烈建议自己下一份代码放本地使用。
更多版本选择及本地部署，参见这里。

第二步

我们需要使用tinymce.init()来进行初始化。tinymce.init()内的初始化对象包含众多参数，但都是可省略的，唯一必须的参数就是selector（允许通过css选择器指定TinyMCE要绑定的内容容器，传统模式需指定textarea，内联或沉浸模式可指定div或其它块元素，推荐div）
在下面这个例子中，我们创建一个TinyMCE实例初始化，来取代</p> </blockquote> <pre><code class="language-<!DOCTYPE"><html> <head> <script src='tinymce.min.js'></script> <script> tinymce.init({ selector: '#mytextarea' }); </script> </head> <body> <h1>TinyMCE快速开始示例</h1> <form method="post"> <textarea id="mytextarea">Hello, World!</textarea> </form> </body> </html>``` ### 第3步：通过正常表单POST保存内容当form提交时，TinyMCE会将内容塞进textarea，你可以通过正常的post方法获取到编辑器中的内容，行为与普通textarea完全一致。 > 使用第三方UI框架或采用ajax提交可能不会主动触发内容同步，需要自己执行同步或自己获取内容，相关办法参考本文档DEMO列表的第4个，遇事不决DEMO4。 </code></pre>

posted @ 2022-06-14 18:45 打个大大西瓜阅读(74) 评论(0) 收藏举报

刷新页面返回顶部

打个大西瓜

TinyMCE 富文本使用

第1步：引入TinyMCE脚本

第二步

公告