前提：需要先用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="'https://www.jb51.net/article/+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表单的操作中还用到了form.ajaxSubmit,所以需要在编辑器的页面引入jquery.form.js 包，整体如下所示
<script type="text/javascript" src="https://www.jb51.net/article/tinymce/js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/article/tinymce/js/tinymce/tinymce.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/article/tinymce/js/tinymce/jquery.tinymce.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/article/tinymce/js/jquery.form.js"></script>
实现效果，点击图片上传可以从本地选择图片文件，确定后ajax异步上传，并且返回图片的URL，让TinyMCE执行插入img标签的操作
四：演示一个编辑器发布网页内容的例子
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>我的第一篇博文</h2> <%= request.getParameter("b_content") %> </body> </html>
4.3:运行效果
在编辑器输入一些内容，并上传一个图片，如下图示
点击发布文章的按钮，如下图所示，发布成功可以在网页查看文章的输出格式，大功已经告成！
4.4：总结
在真实的环境中TinyMCE的内容不会通过在Request请求的后面以?参数名=参数值，然后在页面<%= request.getParameter("b_content") %>的形式处理，这里只是做一个流程的演示就没涉及数据库内容。
真实的场景是编辑完后，把带有HTML标签的TinyMCE的内容存到数据库的一个text大文本字段里面，然后前端取出字符串对象插入到HTML元素中