JS开发富文本编辑器TinyMCE

时间：2021-08-21 来源：互联网编辑：宝哥软件园浏览：次

一、题外话

最近负责一个cms网站的运营维护。与编辑相关的问题很多，比如编辑一些新闻博客和论文模块。系统中使用了FCKEditor，我对自己感觉不是很好，如下图所示

尤其是用户想要插入图片的时候，非常麻烦。所有用户共享一个文件目录，这样不好，于是想到了TinyMCE编辑器，也是博客公园默认的编辑器。接下来，

来吧，让我们开始吧

二、TinyMCE编辑器集成步骤

2.1:下载相关文件

(1)下载TinyMCE插件包

在下载地址下载开发版本，如下图所示

(2)下载其他功能包

包括图片上传操作所需的中文语言包zh_CN.js、plugin.min.js、jquery.form.js

这非常重要，非常重要，非常重要

下载完成后，如下图所示

2.2:操作步骤

(1):将TinyMCE复制到项目中

解压下载的tinymce _ 4.6.4 _ dev.zip，解压后会有一个tinymce文件夹，整个文件夹会放在WebContent目录下。目录结构如下图所示

(2):页集成TinyMCE

在页面的JS标签中初始化TinyMCE编辑器，代码如下

脚本类型=' text/JavaScript ' tinymce . init({选择器：' textarea '，upload _ image _ URL 3360 '。/upload '，//上传图片的配置路由是height: 400。language:'zh_CN '，plugins :[' advlist autolink list link link link charmap print preview HR anchor page break '，' search replace worcount visualblocks visualchars code full screen '，' insert datetime media nonbreaking save table context menu directivity '，'表情模板paste textcolor color picker text pattern imagetools codesample TOC help ']，toolbar 1: ' undo redo | insert | style select | bold italic | align align enter align light alignustify | bulist numlist/script运行如下图所示，基本集成已经完成

第三，TinyMCE编辑器在本地上传图片

注意：默认的TinyMCE没有上传本地图片到服务器的功能，这里需要我们自己实现。下面我们来谈谈具体的实现步骤

3.1:上传映像插件的集成

在目录下创建一个新的uploadimage目录。/tinymce/js/tinymce/plugins，放下载的plugin.min.js目录结构如下图所示

3.2:在TinyMCE初始化中增加上传图片按钮

代码如下图所示。需要注意的是，uploadimage需要添加到插件和toobar2中。toolbar1代表第一行菜单，toolbar2代表第二行菜单，二次初始化代码是来自https://www.tinymce.com/docs/demo/full-featured/.官网的完整示例你可以尝试移除或添加功能按钮。

tinymce。init({选择器： '文本区域，upload_image_url: ' ./upload '，//配置的上传图片的路由height: 400，language:'zh_CN '，plugins :[' advlist autolink list link charmap print preview HR anchor page break '，' search replace worcount visualblocks visualchars code全屏'，' insert datetime media nonbreaking save table上下文菜单方向性','表情模板粘贴文本颜色选择器文本模式图像工具代码示例目录帮助上传图像']，工具栏13: '撤消重做|插入|样式选择|粗体斜体|左对齐输入光模板：[{ title : ' Test template 1 '，content: 'Test 1' }，{ title: 'Test template 2 '，content: 'Test 2' } ]，菜单栏： false })；再次运行，发现在编辑器的菜单栏多了一个图片的按钮就是上传图片了(TinyMCE默认有一个图像，可以去掉，因为那个图像只可以给网络图片的网址),总这里插件里面

已经把默认的图像去掉了，如下图

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

前提：需要先用爪哇岛实现一个上传工具类，此工具类可以完成本地图片上传到服务器，并返回图片的统一资源定位器给ajax，ajax在成功的方法中接收统一资源定位器并向TinyMCE中插入一个图像标签

射流研究…核心代码如下，已包含在plugin.min.js文件中，这里注意TinyMCE的版本不用命令可能会有差异

成功：函数（数据){//alert(' 2222 ')；//警报(数据);如果(数据！=null){//alert(' 4444 ')；编辑。焦点()；//tinyMCE 4 .X版本的插入对象tinymce。activeeditor。插入内容(' img src=' http : ' data ' '/img ')；//编辑器。选择。setcontent(DOM。创建html(' img '，{ src : src })；//data.file_path.forEach(函数(src){//编辑器。选择。setcontent(DOM。createhtml(' img '，{ src : src })；//}) }ajax提交形式表单的操作中还用到了form.ajaxSubmit，所以需要在编辑器的页面引入jquery.form.js包，整体如下所示

脚本类型=' text/JAVAScript ' src=' http :/tinymce/js/jquery-1。11 .1 .量滴js '/script脚本类型=' text/JavaScript ' src=' http :/tinymce/js/tinymce/tinymce。量滴js '/script脚本类型=' text/JavaScript ' src=' http :/tinymce/js/tinymce/jquery。tinymce。量滴js '/script脚本类型=' text/JavaScript ' src=' http :/tinymce/js/jquery。形式。js /脚本实现效果，点击图片上传可以从本地选择图片文件，确定后创建交互式、快速动态网页应用的网页开发技术异步上传，并且返回图片的网址，让TinyMCE执行插入图片标签的操作

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

4.1:添加发布按钮

在编辑器页面下面添加一个发布文章的按钮，定义单击事件事件为GetTinyMceContent()

函数gettinymencent(){//！- //http请求方式b_content的参数不能太长，太长会截断，这里只是做演示编辑器，真实情况是获取到内容到数据库然后//展示的时候在页面遍历数据库字段内容的内容/////alert(' 11 ')；window.location.href='blog.jsp？b _ content=' tinymce。activeeditor。getcontent()；}4.2:添加文章显示页面

如下图所示

% @ page语言=' Java ' ContentType=' text/html；charset=UTF-8 '页面编码=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML hearteta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 '标题文章内容-HTML/title/head dyh 2 align=' center '我的第一篇博文/H2 %=请求。GetParameter(' b _ content ')%/body/html 4.3:运行效果

在编辑器输入一些内容，并上传一个图片，如下图示