Demo鏈接:
https://download.csdn.net/download/silverbutter/10557703
有時候需要驗證tinyMCE編輯器中的內容是否符合規范(不為空),就需要獲取里面的內容。
1、如果當前頁面只有一個編輯器:
獲取內容:tinyMCE.activeEditor.getContent()
設置內容:tinyMCE.activeEditor.setContent(“需要設置的編輯器內容”)
2、如果當前頁面有多個編輯器(下面的“[0]”表示第一個編輯器,以此類推):
獲取內容:tinyMCE.editors[0].getContent()
設置內容:tinyMCE.editors[0].setContent(“需要設置的編輯器內容”)
3、獲取不帶HTML標記的純文本內容:
var activeEditor = tinymce.activeEditor;
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
var text = activeEditor.selection.getContent( { ‘format’ : ‘text’ } );
Html代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tinymce 4 editor</title> </head> <body> <script type="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script type="text/javascript" src="tinymce.min.js"></script> <script type="text/javascript" src="jquery.tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "#txt", plugins: [ "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "table contextmenu directionality emoticons template textcolor paste fullpage textcolor codesample" ], toolbar1: "undo redo | cut copy paste | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", toolbar2: " searchreplace | bullist numlist | outdent indent blockquote | link unlink anchor image media code codesample | inserttime preview | forecolor backcolor", toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", menubar: false, toolbar_items_size: 'small', style_formats: [ {title: 'Bold text', inline: 'b'}, {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, {title: 'Example 1', inline: 'span', classes: 'example1'}, {title: 'Example 2', inline: 'span', classes: 'example2'}, {title: 'Table styles'}, {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} ], templates: [ {title: 'Test template 1', content: 'Test 1'}, {title: 'Test template 2', content: 'Test 2'} ], language:'zh_CN' });</script> <form method="post" action="somepage"> <textarea name="content" id ="txt"style="width:100%"></textarea> </form> <button id="btn">提交</button> <pre id="xx"></pre> </body> <script type="text/javascript"> $("#btn").click(function(){ $("#xx").html(tinyMCE.activeEditor.getContent() ); }) </script> </html>