Use of TinyMCE (including Chinese and Local Image Upload functions) and tinymce Image Upload

Use of TinyMCE (including Chinese and Local Image Upload functions) and tinymce Image Upload

TinyMCE I will not introduce more, this is: https://www.tinymce.com/download/

The downloaded version is in English, and it is easy to get the Chinese version. First download a Chinese package from the Internet, and then extract the package into the langs folder.

Copy zh_CN.js to the langs folder of TinyMCE you downloaded. Finally, add tinymce. init

"Language:" zh_CN "," (the code will be posted later)

 

Local Image Upload I used uploadify and UI in Jquery, so I need to reference jquery. uploadify. min. js and jquery-ui.js

In Jquery, uploadify is based on two versions: flash and HTML. The latter is $5... This, I still use flash-based.

You also need to add the swfobject. js reference. The download of these references will not be pasted, and there will be a lot on the Internet.

 

After the basic introduction, let's look at the Code:

<Style type = "text/css">. mceuploadify {display: block;} </style> <link rel = "stylesheet" href = "@ Url. Content ("~ /Uploadify/uploadify.css ")"/> <script type = "text/javascript" src = "@ Url. Content ("~ /Content/js/history. js ")"> </script> <script type = "text/javascript" src = "@ Url. Content ("~ /Tinymce_4.3.12/tinymce/js/tinymce. min. js ")"> </script> <script type = "text/javascript" src = "@ Url. content ("~ /Scripts/jquery-1.4.4.min.js ")"> </script> <script type = "text/javascript" src = "@ Url. Content ("~ /Scripts/jquery-ui.js ")"> </script> <script type = "text/javascript" src = "@ Url. Content ("~ /Uploadify/jquery. uploadify. min. js ")"> </script> <script type = "text/javascript" src = "@ Url. Content ("~ /Uploadify/swfobject. js ")"> </script> <script type = "text/javascript"> $ (document ). ready (function () {var tinymceEditor; tinymce. init ({selector: "textarea # Content", auto_focus: "Content", language: "zh_CN", theme: "modern", plugins: ["advlist autolink lists link image charmap preview", "searchreplace visualblocks fullscreen", "insertdatetime media table contextmenu paste", "emoticons textcolor"], Toolbar1: "undo redo | styleselect | fontselect | fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent", toolbar2: "fullscreen preview | forecolor backcolor emoticons | table | link image media | mybutton", setup: function (editor) {editor. addButton ('mybutton', {text: 'upload image', icon: false, onclick: function () {tin YmceEditor = editor; $ ("# uploadofedit "). dialog ({modal: false, resizable: false, width: 400, height: 200, dialogClass: "mceuploadify "});}});}, // TinyMCE converts all the font elements into the span element convert_fonts_to_spans: true, // The linefeed is converted into the br element convert_newlines_to_brs: false, // At the line feed, TinyMCE will use the BR element instead of inserting the paragraph force_br_newlines: false. // when it returns or enters Mozilla/Firefox, this option can enable/disable the establishment of the paragraph force_p_newlines: false, // This option controls whether to wrap Removed from the output HTML. Option is enabled by default, because many server systems convert line breaks to <br/>, because the text is entered in a non-format textarea. Use this option to make all content in the same row. Remove_linebreaks: false, // You cannot remove this setting. Otherwise, the image path will encounter an error in relative_urls: false, // you cannot drag the size resize: false, font_formats: "= AKs; =; Arial = arial, helvetica, sans-serif; Comic Sans MS = comic sans MS, sans-serif; Courier New = courier new, courier; Tahoma = tahoma, arial, helvetica, sans-serif; Times New Roman = times new roman, times; Verdana = verdana, geneva; webdings = webdings; Wingdings = wingdings, ZKP dingbats ", fontsize_formats:" 8pt 10pt 12pt 14pt 18pt 24pt 36pt "}); $ (" # tinymceuploadify "). uploadify ({'swf ':'/uploadify/uploadify.swf ', 'buttontext': 'upload local image', 'upload':'/Home/upload', 'auto ': true, 'filetypeexts ':'*. gif ;*. jpg ;*. png ', 'method': 'post', 'Multi': false, 'onuploadsuccess ': function (event, data, flag) {var img = " "; tinymceEditor. insertContent (img); setTimeout (function () {$ ("# uploadofedit "). dialog ('close') ;}, 1000) ;}, 'onuploaderror': function () {setTimeout (function () {$ ("# uploadofedit "). dialog ('close') ;}, 1000); alert ("Upload Failed") ;}}) ;}</script>

<Div> <form method = "post" action = "/Home/"> <textarea id = "content" name = "content" style = "width: 100%; height: 600px; "> </textarea> <input type =" submit "value =" submit "/> </form> </div> <div id = 'uploadofedit 'style =" display: none; "> <input type = 'file' name = 'tinymceuploadify 'id = 'tinymceuploadify'/> <label> only images in png, jpg, and gif formats smaller than 10 MB can be uploaded. </ label> </div>

 

Note:

$ ("# Tinymceuploadify "). uploadify ({'swf ':'/uploadify/uploadify.swf ', 'buttontext': 'upload local image', 'upload':'/Home/upload', 'auto ': true, 'filetypeexts ':'*. gif ;*. jpg ;*. png ', 'method': 'post', 'Multi': false, 'onuploadsuccess ': function (event, data, flag) {var img = " "; tinymceEditor. insertContent (img); setTimeout (function () {$ ("# uploadofedit "). dialog ('close') ;}, 1000) ;}, 'onuploaderror': function () {setTimeout (function () {$ ("# uploadofedit "). dialog ('close') ;}, 1000); alert ("Upload Failed ");}});

Parameters in this Code, such as 'swf ', 'upload', and 'filetypeexts '.

You must determine the jquery. uploadify. js version you have downloaded. For details, see the official instructions.

I will not introduce the background

Reference blog: http://www.cnblogs.com/guzhehang/p/3629029.html? Utm_source = tuicool & utm_medium = referral # commentform

This blog is also written in the background. The front-end is not clearly described. I will add this article to him.