tinymce.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <title>文本编辑</title>
  7. <link rel="stylesheet" href="../../component/pear/css/pear.css" />
  8. </head>
  9. <body class="pear-container">
  10. <div class="layui-row layui-col-space10">
  11. <div class="layui-col-md12">
  12. <div class="layui-card">
  13. <div class="layui-card-header">
  14. 开发环境
  15. </div>
  16. <div class="layui-card-body">
  17. Tinymce 文本编辑器
  18. </div>
  19. </div>
  20. </div>
  21. <div class="layui-col-md12">
  22. <div class="layui-collapse">
  23. <div class="layui-colla-item">
  24. <h2 class="layui-colla-title">显示代码</h2>
  25. <div class="layui-colla-content">
  26. <pre class="layui-code" lay-encode="true">
  27. &lt;link href="component/pear/css/pear.css" rel="stylesheet" />
  28. &lt;script src="component/layui/layui.js">&lt;/script>
  29. &lt;script src="component/pear/pear.js">&lt;/script>
  30. </pre>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="layui-col-md12">
  36. <div class="layui-card">
  37. <div class="layui-card-header">富文本编辑器</div>
  38. <div class="layui-card-body">
  39. <textarea name="" id="edit" cols="30" rows="10"></textarea>
  40. <div class="layui-btn-group" style="margin-top: 10px">
  41. <button class="pear-btn pear-btn-primary" lay-event="getContent">获取内容</button>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="layui-col-md12">
  47. <div class="layui-collapse">
  48. <div class="layui-colla-item">
  49. <h2 class="layui-colla-title">显示代码</h2>
  50. <div class="layui-colla-content">
  51. <pre class="layui-code" lay-encode="true">
  52. layui.use(['tinymce'], function() {
  53. var tinymce = layui.tinymce
  54. var edit = tinymce.render({
  55. elem: "#edit",
  56. height: 400
  57. });
  58. edit.getContent()
  59. });
  60. </pre>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. <script src="../../component/layui/layui.js"></script>
  67. <script src="../../component/pear/pear.js"></script>
  68. <script>
  69. layui.use(['tinymce', 'util', 'layer','code','element'], function() {
  70. var tinymce = layui.tinymce
  71. var util = layui.util;
  72. layui.code();
  73. var edit = tinymce.render({
  74. elem: "#edit",
  75. height: 400
  76. });
  77. util.event('lay-event', {
  78. getContent: function() {
  79. console.log(edit.getContent())
  80. layer.msg("展开控制台查看")
  81. }
  82. });
  83. });
  84. </script>
  85. </body>
  86. </html>