HTML中使用JS实现文档编辑器

本篇是介绍一款tinymce富文本实现编辑器。

TinyMCE是一个轻量、简洁、功能强大的编辑器，跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。

首先要引入TinyMCE脚本，直接在head中引入tinymce.min.js文件

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

但是上面这种引入需要在官网申请一个api_key,不过是免费的，如果你觉得麻烦，就到官网吧
社区版及开发版官方最新打包地址：https://www.tiny.cloud/get-tiny/self-hosted/
不过官网下载比较慢，国外网站嘛，可以到GitHub下https://github.com/tinymce/
我这边是放在static目录下，需要用到的界面再引入

<script type="text/javascript" src="../tinymce/tinymce.min.js"></script>

TinyMCE本身不支持中文的，要下载需要的汉化包，官网上也有下载https://www.tinymce.com/download/language-packages/
将语言包解压，将js文件放入tinymce根目录下的langs文件夹中（如不存在就自己新建一个）

如果不想将汉化包放指定langs文件夹下，就需要使用language_url指定语言包存放的URL。

TinyMCE初始化，使用tinymce.init()来进行初始化。

获取编辑框内容，是一个html内容

var htmlData= tinymce.get('templateInfo').getContent();      //此函数可获得编辑框内容

设置编辑框初始化内容

tinymce.get('templateInfo').setContent(obj.fileData);        //此函数可设置编辑框内容

引入TinyMCE富文本后，成功启动项目，效果图如下

参考：http://www.ysxbohui.com/article/6