快速开始

此页更新时间:2019-11-08 20:42

此页英文文档:https://www.tiny.cloud/docs/quick-start/

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

第1步:引入TinyMCE脚本

在<head>中插入如下这行代码,将tinymce.min.js源文件引入项目。

<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=官方申请的API_KEY"></script>

▲如上方这样外链官方是需要在官方申请一个api_key的,虽然免费,但建议还是自己下一份代码放本地使用。

更多版本选择及本地部署,参见这里。

译者强烈建议:下载一份代码本地部署。

本地部署直接引入主文件即可:

<script src="你的网站路径/tinymce/tinymce.min.js"></script>

PS:在VUE等第三方框架部署不在本文讨论范围内,请移步VUE专区或百度。

第2步:将TinyMCE初始化为页面的一部分

我们需要使用tinymce.init()来进行初始化。tinymce.init()内的初始化对象包含众多参数,但都是可省略的,唯一必须的参数就是selector(允许通过css选择器指定TinyMCE要绑定的内容容器,传统模式需指定textarea,内联或沉浸模式可指定div或其它块元素,推荐div)

在下面这个例子中,我们创建一个TinyMCE实例初始化,来取代<textarea id='mytextarea'>

<!DOCTYPE html>
<html>
<head>
  <script src='https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key'></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完全一致。

安装后如何使用,请参见“简介与入门”篇