当前位置：首页 > 全部内容 > TinyMCE 4.6.4 集成与本地图片上传实战指南

TinyMCE 4.6.4 集成与本地图片上传实战指南

作者：异步漫步时间：2026-10-23 09:48:26浏览：127

本文详细介绍TinyMCE 4.6.4在Web项目中的集成步骤，涵盖插件下载、中文语言包配置及基础初始化。重点解析如何通过自定义uploadimage插件实现本地图片异步上传至服务器，并返回URL插入编辑器。包含完整的JS配置代码、jQuery.form.js依赖说明及内容发布演示，适用于CMS系统开发。

前言

近期负责一个CMS网站的运维工作，其中涉及大量内容编辑模块，如新闻、博客及论文发布等。原系统使用的FCKEditor编辑器体验欠佳，尤其在图片插入方面存在诸多不便，具体表现可参考相关截图。

主要问题在于所有用户共享同一文件目录，导致图片管理混乱。为此，计划引入TinyMCE编辑器，该编辑器也是博客园默认使用的工具，接下来将展开具体实施过程。

下面正式开始介绍集成流程。

TinyMCE编辑器集成步骤

TinyMCE编辑器集成步骤

二、TinyMCE编辑器集成步骤

2.1：下载相关文件

(1)下载TinyMCE插件包

访问官方下载地址，选择开发版进行下载，具体界面可参考下图。

TinyMCE编辑器集成步骤

（2）下载其他功能包

需额外下载中文语言包zh_CN.js，以及实现图片上传功能所需的plugin.min.js和jquery.form.js文件。

这一步骤至关重要，请务必重视。

下载完成后的文件结构如下图所示。

TinyMCE编辑器集成步骤

2.2：操作步骤

(1):复制TinyMCE到项目中

解压下载的tinymce_4.6.4_dev.zip文件，将解压后的tinymce文件夹整体复制至项目的WebContent目录下，目录结构布局如下所示。

TinyMCE编辑器集成步骤

(2):页面集成TinyMCE

在页面JS标签中初始化TinyMCE编辑器，具体配置代码如下。


<script type="text/javascript">
tinymce.init({
  selector: "textarea",
  upload_image_url: './upload', //配置的上传图片的路由
  height: 400,
  language:'zh_CN',
  plugins: [
  'advlist autolink lists link charmap print preview hr anchor pagebreak',
  'searchreplace wordcount visualblocks visualchars code fullscreen',
  'insertdatetime media nonbreaking save table contextmenu directionality',
  'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'
  ],
  toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',
  image_advtab: true,
  templates: [
  { title: 'Test template 1', content: 'Test 1' },
  { title: 'Test template 2', content: 'Test 2' }
  ],
  menubar: false
 });
</script>

运行效果如截图所示，基础集成工作已完成。

TinyMCE编辑器集成步骤

本地图片上传功能实现

三、TinyMCE编辑器本地上传图片功能

注意：默认安装的TinyMCE并不具备将本地图片上传至服务器的功能，因此需要自行实现。以下是具体实现步骤。

3.1：集成uploadimage插件

在./tinymce/js/tinymce/plugins目录下新建uploadimage文件夹，并将之前下载的plugin.min.js放入其中，目录结构如下图所示。

TinyMCE编辑器集成步骤

3.2：在TinyMCE初始化中添加上传图片按钮

配置代码如下图所示。需注意，在plugins和toolbar2参数中均需添加uploadimage。其中toolbar1代表第一行菜单，toolbar2代表第二行菜单。该初始化代码源自TinyMCE官网的完整示例（https://www.tinymce.com/docs/demo/full-featured/），用户可根据需求增减功能按钮。


tinymce.init({
  selector: "textarea",
  upload_image_url: './upload', //配置的上传图片的路由
  height: 400,
  language:'zh_CN',
  plugins: [
  'advlist autolink lists link charmap print preview hr anchor pagebreak',
  'searchreplace wordcount visualblocks visualchars code fullscreen',
  'insertdatetime media nonbreaking save table contextmenu directionality',
  'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help uploadimage'
  ],
  toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help uploadimage',
  image_advtab: true,
  templates: [
  { title: 'Test template 1', content: 'Test 1' },
  { title: 'Test template 2', content: 'Test 2' }
  ],
  menubar: false
 });

再次运行编辑器，菜单栏中新增了一个图片按钮，即用于上传图片的功能（TinyMCE默认自带的image按钮仅支持网络图片URL，此处已将其移除）。

plugins配置中已移除默认的image选项，具体配置见下图。

TinyMCE编辑器集成步骤

3.3：实现上传本地图片到服务器的功能

前提条件：需先使用Java编写一个upload工具类，该类负责将本地图片上传至服务器，并返回图片URL给Ajax请求。Ajax在success回调中接收URL，并向TinyMCE插入image标签。

JS核心代码已包含在plugin.min.js文件中，请注意不同版本的TinyMCE命令可能存在差异。


success: function (data) {
   //alert('2222');
   //alert(data);
   if (data!=null) {
   //alert('4444');
   editor.focus();
   //tinyMCE 4.X版本的插入对象
   tinyMCE.activeEditor.insertContent('<img src="'+data+'"></img>');
//   editor.selection.setContent(dom.createHTML('img', {src: src}));
//   data.file_path.forEach(function (src) {
//    editor.selection.setContent(dom.createHTML('img', {src: src}));
//   })
   }

Ajax提交表单操作使用了form.ajaxSubmit方法，因此需在编辑器页面引入jquery.form.js包，整体引用如下所示。


<script type="text/javascript" src="./tinymce/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="./tinymce/js/tinymce/jquery.tinymce.min.js"></script>
<script type="text/javascript" src="./tinymce/js/jquery.form.js"></script>

实现效果：点击图片上传按钮可从本地选择文件，确认后通过Ajax异步上传，并返回图片URL，使TinyMCE执行插入img标签的操作。

TinyMCE编辑器集成步骤

内容发布演示与总结

四：演示一个编辑器发布网页内容的例子

4.1：添加发布按钮

在编辑器页面下方添加一个发布文章按钮，定义其onclick事件为GetTinyMceContent()。


function GetTinyMceContent()
{
// <!-- 
// http request方式b_content的参数不能太长，太长会截断，这里只是做演示编辑器，真实情况是获取到内容到数据库然后
// 展示的时候在页面遍历数据库字段content的内容
// --> 
//alert('11');
window.location.href="blog.jsp?b_content="+tinyMCE.activeEditor.getContent();
}

4.2：添加文章显示页面

页面结构如下图所示。


<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文章内容-HTML</title>
</head>
<body>
<h2 align="center">我的第一篇博文</h2>
<%= request.getParameter("b_content") %>
</body>
</html>

4.3:运行效果

在编辑器中输入内容并上传一张图片，效果如下图所示。

TinyMCE编辑器集成步骤

点击发布文章按钮，如截图所示，发布成功后可在网页查看文章的输出格式，至此功能实现。

TinyMCE编辑器集成步骤

4.4：总结

在实际生产环境中，TinyMCE的内容不会通过Request请求后拼接?参数名=参数值的方式处理，此处仅为流程演示，未涉及数据库交互。

真实场景下，编辑完成后，应将包含HTML标签的TinyMCE内容存入数据库的text大文本字段中，前端再取出字符串对象插入到HTML元素中展示。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JavaScript怎么遍历对象的Symbol键和不可枚举属性

2026-11-05 13:13:39

封装一个健壮的JS字符串判空工具函数

2026-11-05 12:16:14

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

2026-11-05 11:22:29

JavaScript立即执行函数(IIFE)是什么及基本语法

2026-11-05 10:51:19

JS对象数组转字符串为什么推荐用JSON.stringify()

2026-11-05 09:40:31