JS中富文本編輯器TinyMCE的示例分析

小編給大家分享一下JS中富文本編輯器TinyMCE的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、題外話

最近負(fù)責(zé)了一個(gè)cms網(wǎng)站的運(yùn)維，里面存在很多和編輯器有關(guān)的問(wèn)題，比如編輯一些新聞博客，論文模塊。系統(tǒng)采用的是FCKEditor，自我感覺(jué)不是很好，如下圖

特別是在用戶想插入一個(gè)圖片的話，就很麻煩，所有用戶共享一個(gè)文件目錄，這樣就不好了，于是便想到了TinyMCE編輯器，博客園默認(rèn)的也是這個(gè)編輯器，接下

來(lái)，我們開始吧

二、TinyMCE編輯器集成步驟

2.1：下載相關(guān)文件

(1)下載TinyMCE插件包

下載地址,如下圖所示，下載開發(fā)版

（2）下載其他功能包

包括中文語(yǔ)言包zh_CN.js，圖片上傳操作需要的plugin.min.js和jquery.form.js

這一點(diǎn)很重要，很重要，很重要哦

下載完成后如下圖所示

2.2：操作步驟

(1):復(fù)制TinyMCE到項(xiàng)目中

解壓下載到的tinymce_4.6.4_dev.zip,解壓后會(huì)有一個(gè)tinymce文件夾，將整個(gè)文件夾放到WebContent目錄下，目錄結(jié)構(gòu)如下圖所示

(2):頁(yè)面集成TinyMCE

在頁(yè)面的JS標(biāo)簽中初始化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>

運(yùn)行如下圖所示，基本的集成已經(jīng)完畢

三、TinyMCE編輯器本地上傳圖片功能

注：默認(rèn)的TinyMCE是沒(méi)有上傳本地圖片到服務(wù)器的功能的，所以這里我們需要自己實(shí)現(xiàn)，下面我們就說(shuō)一說(shuō)具體的實(shí)現(xiàn)步驟

3.1：集成uploadimage插件

在./tinymce/js/tinymce/plugins目錄下新建一個(gè)uploadimage目錄，放入下載的plugin.min.js，目錄結(jié)構(gòu)如下圖所示

3.2：在TinyMCE初始化中添加上傳圖片按鈕

代碼如下圖所示，需要注意的是在plugins中和toobar2中都需要加入uploadimage，toolbar1代表第一行菜單，toolbar2代表第二行菜單，次初始化代碼是來(lái)自 https://www.tinymce.com/docs/demo/full-featured/ 官網(wǎng)一個(gè)完整的例子，功能按鈕大家可以試著去除或者添加

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
 });

再次運(yùn)行，發(fā)現(xiàn)在編輯器的菜單欄多了一個(gè)圖片的按鈕就是上傳圖片了（TinyMCE默認(rèn)有一個(gè)image，可以去掉，因?yàn)槟莻€(gè)image只可以給網(wǎng)絡(luò)圖片的URL），總這里plugins里面

已經(jīng)把默認(rèn)的image去掉了，如下圖

3.3：實(shí)現(xiàn)上傳本地圖片到服務(wù)器的功能

前提：需要先用java實(shí)現(xiàn)一個(gè)upload工具類，此工具類可以完成本地圖片上傳到服務(wù)器，并返回圖片的URL給ajax,ajax在success的方法中接收URL并向TinyMCE中插入一個(gè)image標(biāo)簽

JS核心代碼如下，已包含在plugin.min.js文件中，這里注意TinyMCE的版本不用命令可能會(huì)有差異

success: function (data) {
   //alert('2222');
   //alert(data);
   if (data!=null) {
   //alert('4444');
   editor.focus();
   //tinyMCE 4.X版本的插入對(duì)象
   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表單的操作中還用到了form.ajaxSubmit,所以需要在編輯器的頁(yè)面引入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>

實(shí)現(xiàn)效果，點(diǎn)擊圖片上傳可以從本地選擇圖片文件，確定后ajax異步上傳，并且返回圖片的URL，讓TinyMCE執(zhí)行插入img標(biāo)簽的操作

四：演示一個(gè)編輯器發(fā)布網(wǎng)頁(yè)內(nèi)容的例子

4.1：添加發(fā)布按鈕

在編輯器頁(yè)面下面添加一個(gè)發(fā)布文章的按鈕，定義onclick事件為GetTinyMceContent()

function GetTinyMceContent()
{
// <!-- 
// http request方式b_content的參數(shù)不能太長(zhǎng)，太長(zhǎng)會(huì)截?cái)?，這里只是做演示編輯器，真實(shí)情況是獲取到內(nèi)容到數(shù)據(jù)庫(kù)然后
// 展示的時(shí)候在頁(yè)面遍歷數(shù)據(jù)庫(kù)字段content的內(nèi)容
// --> 
//alert('11');
window.location.href="blog.jsp?b_content="+tinyMCE.activeEditor.getContent();
}

4.2：添加文章顯示頁(yè)面

如下圖所示

<%@ 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>文章內(nèi)容-HTML</title>
</head>
<body>
<h3 align="center">我的第一篇博文</h3>
<%= request.getParameter("b_content") %>
</body>
</html>

4.3:運(yùn)行效果

在編輯器輸入一些內(nèi)容，并上傳一個(gè)圖片，如下圖示

點(diǎn)擊發(fā)布文章的按鈕，如下圖所示，發(fā)布成功可以在網(wǎng)頁(yè)查看文章的輸出格式，大功已經(jīng)告成！

以上是“JS中富文本編輯器TinyMCE的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！