ref: master
public/javascripts/tinymce/tests/manual/inline-toolbars.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<!DOCTYPE html> <html> <head> <title>Inline toolbars test</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="../../js/tinymce/tinymce.dev.js"></script> <script src="../../js/tinymce/plugins/table/plugin.dev.js"></script> <script src="../../js/tinymce/plugins/paste/plugin.dev.js"></script> <script src="../../js/tinymce/plugins/spellchecker/plugin.dev.js"></script> <script> tinymce.init({ selector: "textarea.tinymce", theme: "modern", plugins: [ "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "save table contextmenu directionality emoticons template paste textcolor importcss" ], content_css: "css/development.css", add_unload_trigger: false, toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table", setup: function(ed) { ed.addContextToolbar('img', 'alignleft aligncenter alignright alignjustify | image remove'); } }); tinymce.init({ selector: "div.tinymce", theme: "modern", inline: true, plugins: [ "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "save table contextmenu directionality emoticons template paste textcolor importcss" ], content_css: "css/development.css", add_unload_trigger: false, toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table", setup: function(ed) { ed.addContextToolbar('img', 'alignleft aligncenter alignright alignjustify | image'); } }); function drawRect(rect, color) { var $elm = tinymce.$('#' + color); if (!$elm.length) { $elm = tinymce.$('<div id="' + color + '" class="rect hidden">').css('position', 'absolute').css('outline', '1px solid ' + color).appendTo(document.body); } if (!rect) { return; } $elm.css({ left: rect.x, top: rect.y, width: rect.w, height: rect.h }); } function toggleRects() { tinymce.$('div.rect').toggleClass('hidden'); } </script> <style> .rect { z-index: 9999999999; } .hidden { display: none; } </style> </head> <body> <form method="post" action="http://www.tinymce.com/dump.php?example=true"> <button type="button" onclick="toggleRects()">Toggle rects</button> <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%" class="tinymce"> <p><img src="../tinymce/ui/img/raster.gif" width="100" height="100">text<img src="../tinymce/ui/img/raster.gif" width="100" height="100" style="float: right"></p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text<img src="../tinymce/ui/img/raster.gif" width="213" height="213" style="float: right"></p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p><img src="../tinymce/ui/img/raster.gif" width="100" height="100">text<img src="../tinymce/ui/img/raster.gif" width="100" height="100" style="float: right"></p> </textarea> <div class="tinymce" style="overflow: auto; height: 300px; padding: 10px;"> <p><img src="../tinymce/ui/img/raster.gif" width="100" height="100">text<img src="../tinymce/ui/img/raster.gif" width="100" height="100" style="float: right"></p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p><img src="../tinymce/ui/img/raster.gif" width="100" height="100">text<img src="../tinymce/ui/img/raster.gif" width="100" height="100" style="float: right"></p> </div> <input type="submit" name="save" value="Submit" /> <input type="reset" name="reset" value="Reset" /> </form> </body> </html> |