hello,大家好,今天我们来学习如何在自己的Web项目中集成TinyMCE富文本编辑器,开始学习吧!
1. TinyMCE简介
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器,它的优势体现在一下几点:
- 开源可商用
- 插件丰富
- 可扩展性强
- 界面好看,符合现代审美
- 多语言支持,官网可下载几十种语言。
综合以上几点,我力荐TinyMCE作为前端的富文本编辑器。
2. 引入TinyMCE
现在TinyMCE已经支持script标签直接指定链接并引入:
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/4.9.11-104/tinymce.min.js"></script>
但是,这样引入速度太慢,建议访问链接并复制下载,保存为tinymce.min.js
。
3. 使用TinyMCE
首先,我们的目录下已经有了tinymce.min.js
文件,再创建edit.html
和tinymce_init.js
。
接着,我们要对TinyMCE的富文本编辑器进行一些配置,打开tinymce_init.js
,写入以下JS代码:
tinymce.init({
selector: