Reference: http://www.tinymce.com/official website
Http://www.tinymce.com/wiki.php Wiki particularly useful for the second configuration
http://blog.csdn.net/chenloveyue/article/details/7039913 Related profiles Chinese notes
Version: TinyMce 4.X
1. Installation
Download to unzip
2. Demo
1<!DOCTYPE HTML>2<HtmlLang= "en-US">34<Head>5<ScriptType= "Text/javascript"Src= "Tinymce.min.js"></Script>6<ScriptType= "Text/javascript"Src= "Jquery-1.7.1.min.js"></Script>7<Script>8Tinymce.init ({9Selector"H1.editable#elm2",//ELM2 is an ID that understands selector values as class, ID, etc. in CSS, using TINYMCE styles (such as text display style in edit box, toolbar style)--personal understanding, not guaranteed correct10InlineTrue,//When True, the edit toolbar is hidden11Toolbar"Undo Redo",12MenuBarFalse13});14Tinymce.init ({15Selector‘Textarea#elm1‘,//Edit area in <textarea>16Theme"Modern",//Theme17Language"Zh_cn",//Language, you can download your own Chinese1819Height300,20Plugins: [//Plug-in, can be deleted according to the actual content21st"Advlist autolink lists Charmap print preview HR anchor PageBreak spellchecker",22"Searchreplace wordcount visualblocks visualchars fullscreen insertdatetime nonbreaking",23"Save table ContextMenu directionality Emoticons Paste TextColor"24],25CONTENT_CSS:"Css/content.css",//Referenced external CSS style, can be deleted26Toolbar"InsertFile Undo Redo | Styleselect Fontselect fontsizeselect| Bold Italic | AlignLeft aligncenter alignright alignjustify | Bullist numlist outdent Indent | l | Print Preview Fullpage | ForeColor BackColor",//Toolbars that can be deleted on demand27Style_formats: [//Default format provided at the beginning28{title:‘Bold text‘, inline:‘B‘},29{title:‘Red text‘, inline:‘Span‘, styles: {color:‘#ff0000‘}},30{title:‘Red Header‘, Block:‘H1‘, styles: {color:‘#ff0000‘}},31{title:‘Example 1‘, inline:‘Span‘, classes:‘Example1‘},32{title:‘Example 2‘, inline:‘Span ', classes: ' Example2 '},33 {title: ' Table Styles '},34 {title: ' Table row 1 ', selector: ' tr ', classes: ' Tablerow1 '}35] 36}); Panax Notoginseng </script>38
3. Read the contents of the edit box and set the contents of the edit box
Reference: Http://www.tinymce.com/wiki.php/api4:method.tinymce.Editor.setContent
Http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.setContent
4. For custom deployment TinyMCE (CSS, JS script not the same document)
Highly recommended reference: Http://www.tinymce.com/wiki.php/Configuration
1Tinymce.init ({2Selector: ' Textarea#elm1 ',3Language: "ZH_CN",4height:400,5Skin_url: "/content/tinymce",//define the external skin style, the original file skins-lightgray/the contents of the document to be copied, including CSS and fonts/(fronts the file name and content is indispensable)6Font_formats: "Andale mono=andale mono,times;" +//Here is the initial default font style, can not be written7"Arial=arial,helvetica,sans-serif;" +8"Arial black=arial black,avant Garde;" +9"Book Antiqua=book Antiqua,palatino;" +10"Comic Sans ms=comic Sans ms,sans-serif;" +11"Courier new=courier new,courier;" +12"Georgia=georgia,palatino;" +13"Helvetica=helvetica;" +14"Impact=impact,chicago;" +15"Symbol=symbol;" +16"Tahoma=tahoma,arial,helvetica,sans-serif;" +17"Terminal=terminal,monaco;" +18"Times New roman=times new Roman,times;" +19"Trebuchet Ms=trebuchet Ms,geneva;" +20"Verdana=verdana,geneva;" +21st"Webdings=webdings;" +22"Wingdings=wingdings,zapf Dingbats",
Define the font, which can be added "bold = blackbody" + "young circle = Young Circle" ... ，convert Chinese to Unicode encoding, such as "\u5b8b\u4f53=\u5b8b\u4f53;" Http://blog.javawind.net/tools/native2ascii.jsp?action=transform23Plugins: [24"Advlist autolink lists print preview hr",25"Searchreplace wordcount fullscreen insertdatetime",26"Save table ContextMenu directionality paste TextColor"27],28Toolbar: "InsertFile undo Redo | Styleselect Fontselect Fontsizeselect | Bold Italic | AlignLeft aligncenter alignright alignjustify | Bullist numlist outdent Indent | Print Preview Fullpage | ForeColor BackColor ",29Style_formats: [30 {title: ' Bold text ', inline: ' B '},32 33 34 35
5. Does not involve the image upload and other functions, but can refer to the function document
6. The preview function is actually implemented with <iframe>, the SRC source is src= "data:text/html,....", the ellipsis part is the whole page HTML code UTF8 encoded content, can F12 view TINYMCE preview function display source code, It is not recommended to display content directly without encoding.
Added -------------------------------------------- --------------------------------------------2015/03/25
7. Template function
Reference: Http://www.tinymce.com/wiki.php/Plugin:template
On the use of TinyMce
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
