TinyMCE and local upload pictures of the function of the example detailed _jquery

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

Download down is English version, to Chinese is also very simple.

First go to the Internet to download a Chinese-made package, and then unpack the Langs folder in the zh_cn.js copy to your download TinyMCE langs folder on the line. Finally, add "language:" ZH_CN "in the Tinymce.init" (the code will be posted later)

Local image upload I use the uploadify and UI in jquery, so I need to draw Jquery.uploadify.min.js and Jquery-ui.js

jquery Uploadify has a version based on Flash and two based on HTML, the latter is to be $ ... This, I still use the flash based.

Then you also need to add swfobject.js references. The download of these references will not be posted, a lot of online.

The basic introduction is over, look directly at the code below:

<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/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 tabl E 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 picture ', Icon:false, onclick:function () {Tin
Ymceeditor = editor;
$ ("#uploadofedit"). Dialog ({modal:false, Resizable:false, width:400, height:200, Dialogclass: "Mceuploadify"});
}
}); //TINYMCE converts all font elements into span element convert_fonts_to_spans:true,//line breaks are converted to BR element Convert_newlines_to_brs:false,//In line feed The TINYMCE will use the BR element instead of inserting the paragraph force_br_newlines:false,//when returning or entering Mozilla/firefox, this option can open/close the paragraph's build force_p_newlines:false,/ /This option controls whether line breaks are removed from the HTML of the output. option is turned on by default because many service-side systems willThe newline is converted to <br/&gt, because the text is entered in an unformatted textarea.
Use this option to make all content on the same line. Remove_linebreaks:false,//Can not remove this setting, otherwise the image path will be wrong relative_urls:false,//not allowed to drag size resize:false, font_formats: "XXFarEastFont-arial = XXFarEastFont-tw. black body; imitation = imitation; italics = italics; Official script = official script; Young circle = Young circle; 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,zapf dingbats ", Fontsize_formats:" 8pt 10pt 12pt 14pt 18pt 24pt 36pt "}); $ ("#tinymceuploadify"). Uploadify ({' swf ': '/uploadify/uploadify.swf ', ' buttontext ': ' Upload local picture ', ' uploader ': '/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= "submitted"/> </form> </div> <div id= ' Uploadofedit ' Style= "Display:none;" > <input type= ' file ' name= ' tinymceuploadify ' id= ' tinymceuploadify '/> <label> can only be on the flyer 10M below PNG, JPG, GIF Picture of the format </label> </div>

Description

$ ("#tinymceuploadify"). Uploadify ({
' swf ': '/uploadify/uploadify.swf ', '
buttontext ': ' Upload local picture ',
' Uploader ': '/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");
}
);

The parameters in this code, such as ' SwF ', ' uploader ', ' filetypeexts ', are important parameters

Depends on the version of the jquery.uploadify.js you downloaded. You can see the official documentation.

The above is a small set to introduce the TINYMCE and local upload picture function examples, I hope to help you, if you want to know more content please pay attention to cloud Habitat community website.