publish_tinymce.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <div class="layui-form-item layui-form-text">
  2. <label class="layui-form-label">内容</label>
  3. <div class="layui-input-block">
  4. <textarea name="[field]" id="container">{notempty name="$[item].[field]"}{$[item]->getData('[field]')}{/notempty}</textarea>
  5. </div>
  6. </div>
  7. <!-- 配置文件 -->
  8. <script type="text/javascript" src="__PUBLIC__/tinymce/js/tinymce/tinymce.min.js"></script>
  9. <!-- 实例化编辑器 -->
  10. <script type="text/javascript">
  11. //http://tinymce.ax-z.cn/advanced/some-example.php
  12. var tinyID = 'container';
  13. var host = location.protocol + location.port + "//" + document.domain;
  14. tinymce.init({
  15. selector: '#' + tinyID,
  16. language: 'zh_CN',//注意大小写
  17. height: 350,
  18. plugins: 'link image autosave fullscreen autolink code media preview paste',
  19. toolbar: 'undo redo restoredraft| bold italic underline | image media code | fullscreen ',
  20. relative_urls: false,//绝对URL
  21. document_base_url: host,
  22. autosave_interval: "10s",//自动存稿的世界间隔
  23. //上传自定义
  24. images_upload_handler: function (blobInfo, succFun, failFun) {
  25. var xhr, formData;
  26. var file = blobInfo.blob();//转化为易于理解的file对象
  27. xhr = new XMLHttpRequest();
  28. xhr.withCredentials = false;
  29. xhr.open('POST', "{:url('attachment/upload')}");
  30. xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  31. xhr.onload = function () {
  32. var json;
  33. if (xhr.status != 200) {
  34. failFun('HTTP Error: ' + xhr.status);
  35. return;
  36. }
  37. json = JSON.parse(xhr.responseText);
  38. //console.log(json);
  39. if (!json || typeof json.data.src != 'string') {
  40. failFun('Invalid JSON: ' + xhr.responseText);
  41. return;
  42. }
  43. succFun(json.data.src);
  44. };
  45. formData = new FormData();
  46. formData.append('file', file, file.name);//此处与源文档不一样
  47. formData.append('use', 'article_content');//上传附件的参数
  48. xhr.send(formData);
  49. },
  50. //传统点击submit提交按钮会自动同步内容,但ajax之类的用事件提交会导致内容没有同步,暂时的解决办法是在初始化参数中setup参数里加入事件监听,让他自动同步。
  51. setup: function (editor) {
  52. editor.on('change', function () {
  53. editor.save();
  54. });
  55. },
  56. });
  57. function getContent() {
  58. return tinyMCE.editors[tinyID].getContent();
  59. }
  60. </script>