Net-MVC+EasyUI之 TinyMCE使用

最近公司要做一个后台，项目中有一个需要使用富文本编辑器的功能录入文章内容，而且这个内容包括文字、图片、视频、链接，我找了好多资料，又有领导的嘱咐要求简单、易用、没有漏洞、常用功能齐全的编辑器，最后找了找选中了TinyMCE，同事们之前开发的项目前端使用的VUE其中也使用了TinyMCE的编辑，评价还是非常好的，再加上也有很多网友创建了本编辑器的QQ群，有问题相互讨论，所以就选了这个。

中文文档地址（参考）：http://tinymce.ax-z.cn/

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

TinyMCE的优势：

• 开源可商用，基于LGPL2.1
• 插件丰富，自带插件基本涵盖日常所需功能
• 接口丰富，可扩展性强，有能力可以无限拓展功能
• 界面好看，符合现代审美
• 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
• 对标准支持优秀（自v5开始）
• 多语言支持，官网可下载几十种语言。

废话不多说，直接上代码：

TinyMCE版本：5.7.0

TinyMCE目录结构：

 

一、前端页面View处理方式

例如：Create.cshtml（添加页面）——MVC模式视图代码

1、引入js

<script src="@Url.Content("~/Scripts/tinymce5.7.0/js/tinymce/tinymce.min.js")"></script>

2、加载编辑器配置

$(function(){
     tinymce.init({
            selector: '#ArtContent',//textarea控件ID
            language: 'zh_CN',//中文语言包
            plugins: 'print preview searchreplace autolink directionality visualblocks 
                      visualchars fullscreen image link media template code codesample 
                      table charmap hr pagebreak nonbreaking anchor insertdatetime 
                      advlist lists wordcount imagetools textpattern help emoticons 
                      autosave autoresize',//加载插件
            toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor 
                     backcolor bold italic underline strikethrough link anchor | 
                     alignleft aligncenter alignright alignjustify outdent indent | \
                     styleselect formatselect fontselect fontsizeselect | bullist numlist 
                     | blockquote subscript superscript removeformat | \
                     table image media charmap emoticons hr pagebreak insertdatetime 
                     print preview | fullscreen | lineheight',//工具栏
            height: 650, //编辑器高度
            min_height: 400,//最小高度
            fontsize_formats: '12px 14px 16px 18px 24px 36px 48p