Java Development Rich Text editor TINYMCE

One, off-topic

Recently responsible for the operation of a CMS website, there are many issues related to the editor, such as editing some news blog, thesis module. The system uses the FCKeditor, self-feeling is not very good, such as

Especially in the user want to insert a picture, it is very troublesome, all users share a file directory, so it is not good, so I think of TinyMCE Editor, blog Park default is this editor, then

Come on, let's get started.

Ii. TINYMCE Editor Integration step 2.1: Download related files

(1) Download TINYMCE plugin Package

: https://www.tinymce.com/download/, as shown, download the development version

(2) Download additional feature packs

Including Chinese language pack zh_cn.js, image upload operation required Plugin.min.js and Jquery.form.js

Or you can download from My network: Link: Http://pan.baidu.com/s/1skJ6uRV password: xn0r It's important, it's important, it's important.

After the download is complete as shown

2.2: Operation Steps

(1): Copy TinyMCE to Project

Unzip the download to the Tinymce_4.6.4_dev.zip, after decompression there will be a TinyMCE folder, the entire folder into the WebContent directory, the directory structure as shown

(2): page integration TinyMCE

Initialize the TINYMCE Editor in the JS tab of the page, as shown in the code below

<script type= "Text/javascript" >tinymce.init ({selector: "textarea", Upload_image_url: './uploa d ',//configuration of the upload image route height:400, language: ' Zh_cn ', plugins: [' Advlist Autoli NK Lists link Charmap print preview hr anchor pagebreak ', ' Searchreplace wordcount visualblocks Visualchar                s 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 ', CO Ntent: ' Test 1 '}, { Title: ' Test template 2 ', Content: ' Test 2 '}], menubar:false});</script> 

Run as shown, basic integration is complete

Third, TINYMCE editor local upload image function

Note: The default TINYMCE is not the ability to upload local images to the server, so here we need to implement their own, the following we say a specific implementation steps

3.1: Integrated uploadimage plug-in

Create a new Uploadimage directory under the./tinymce/js/tinymce/plugins directory, put the downloaded plugin.min.js, as shown in the directory structure

3.2: Add upload Picture button in TINYMCE initialization

As shown in the code, it is important to note that in plugins and toobar2 you need to join UPLOADIMAGE,TOOLBAR1 to represent the first line menu, toolbar2 for the second row menu, and the secondary initialization code from https:// www.tinymce.com/docs/demo/full-featured/Official Website A complete example, the function button you can try to remove or add

Tinymce.init ({selector:"TextArea", Upload_image_url:'./upload ',//routing of the configured upload pictureheight: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 HelpUploadimage‘], 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 HelpUploadimage‘, Image_advtab:true, templates: [{title:' Test template 1 ', Content: ' Test 1 '}, {title:' Test template 2 ', Content: ' Test 2 '}], menubar:false        });

Run again, found in the editor's menu bar more than one image of the button is to upload the image (tinymce default has an image, can be removed, because the image can only give the URL of the network image), always here plugins inside

The default image has been removed, such as

3.3: Implement the ability to upload local image to the server

Premise: You need to first implement a upload tool class with Java, this tool class can complete the local image upload to the server, and return the URL of the picture to Ajax,ajax in success method to receive the URL and insert an image tag into the TINYMCE

The JS core code, which is included in the Plugin.min.js file, is noted here that the TINYMCE version does not have to be different from the command.

Successfunction(data) {//alert (' 2222 ');                    //alert (data);                    if(data!=NULL) {                        //alert (' 4444 ');Editor.focus (); //TinyMCE 4.X version of Insert ObjectTinyMCE.activeEditor.insertContent (' </img> ');//editor.selection.setContent (dom.createhtml (' img ', {SRC:SRC}));//Data.file_path.forEach (function (src) {//editor.selection.setContent (dom.createhtml (' img ', {SRC:SRC}));//                        })}

Ajax also uses form.ajaxsubmit in the operation of form forms, so the jquery.form.js package needs to be introduced in the editor's page, as shown in the overall following

<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>

To achieve the effect, click on the image upload can be selected from the local image file, determined after Ajax asynchronous upload, and return the URL of the picture, let TinyMCE do the operation of inserting the IMG tag

4: Demo An editor Publish page Content Example 4.1: Add Publish button

Add a button to publish the article below the editor page to define the onclick event as Gettinymcecontent ()

function gettinymcecontent () {// /// HTTP request mode B_content parameters can not be too long, too long will be truncated, here just do the demo editor , the real situation is to get the content into the database and / or display the content in the page Traversal database fields ///Alert (' one One '); Window.location.href= "blog.jsp?b_content=" +tinyMCE.activeEditor.getContent ();}

4.2: Add article Display page

As shown

<%@ 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><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Article content-html</title></Head><Body><H2Align= "Center">My first blog post</H2><%=Request.getparameter ("b_content") %></Body></HTML>

4.3: Run effect

Enter some content in the editor and upload a picture, as shown

Click the Publish Article button, as shown, publish success can be viewed in the Web page output format, the merit has been Gaocheng!

4.4: summary

The content that is TINYMCE in the real environment will not be processed by the parameter name = argument value, then the page <%= request.getparameter ("B_content")%> in the form of the request. This is just a demonstration of a process that does not involve database content. The real scene is that after editing, the contents of the TINYMCE with HTML tags are stored in a text large text field in the database, and then the front-end takes out the string object into the HTML element

Java Development Rich Text editor TINYMCE