经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » PHP » 查看文章
富文本编辑器新增导入word功能,自动转为html,可直接显示图片
来源:cnblogs  作者:陈莺莺呀  时间:2021/2/1 12:02:40  对本文有异议

用我现在最常使用的php框架fastadmin举例子,当然thinkphp或者原生php也是同样的原理,大家理解思路就好了、

 

环境:fastadmin,summernote编辑器
【summernote的居中功能在段落里,且不会吃掉section标签,加上导入word功能之后,简直完美~】
 
按照国际惯例先放效果图
 
 
github上的demo里我还没有换图标,不过fastadmin里的是换了的,效果如下:
 
 
 

1、thinkphp使用composer安装phpword插件(这个插件能够把word转为html)

  1. composer require phpoffice/phpword

安装完成之后的文件在vender目录下

 

2、打开require统一管理后台插件的js

引入我们需要的ajaxfileupload.js插件(这个插件允许文件通过ajax上传到服务器,而不是form表单)

  1. 'ajaxfileupload':'../libs/ajaxfileupload/ajaxfileupload',

 

3、以新增新闻的编辑器为例,打开

 在开头载入需要的组件

  1. define(['jquery', 'bootstrap', 'backend', 'table', 'form','summernote','layer','ajaxfileupload'], function ($, undefined, Backend, Table, Form,summernote,layer,ajaxfileupload) {

 

然后修改add方法

  1. add: function () {
  2. Controller.api.bindevent();
  3. var imageButton = function (context) {
  4. var ui = $.summernote.ui;
  5. var button = ui.button({
  6. contents: '<i class="fa fa-file-image-o"/>',
  7. tooltip: __('Choose'),
  8. click: function () {
  9. parent.Fast.api.open("general/attachmentlect?element_id=&multiple=true&mimetype=image/*", __('Choose'), {
  10. callback: function (data) {
  11. var urlArr = data.url.split(/\,/);
  12. $.each(urlArr, function () {
  13. var url = Fast.api.cdnurl(this);
  14. context.invoke('editor.insertImage', url);
  15. });
  16. }
  17. });
  18. return false;
  19. }
  20. });
  21. return button.render();
  22. };
  23. var attachmentButton = function (context) {
  24. var ui = $.summernote.ui;
  25. var button = ui.button({
  26. contents: '<i class="fa fa-file"/>',
  27. tooltip: __('Choose'),
  28. click: function () {
  29. parent.Fast.api.open("general/attachmentlect?element_id=&multiple=true&mimetype=*", __('Choose'), {
  30. callback: function (data) {
  31. var urlArr = data.url.split(/\,/);
  32. $.each(urlArr, function () {
  33. var url = Fast.api.cdnurl(this);
  34. var node = $("<a href='" + url + "'>" + url + "</a>");
  35. context.invoke('insertNode', node[0]);
  36. });
  37. }
  38. });
  39. return false;
  40. }
  41. });
  42. return button.render();
  43. };
  44. // 新增编辑器导入word功能
  45. var wordBtn = function (context) {
  46. var ui = $.summernote.ui;
  47. var button = ui.button({
  48. contents: '<i class="fa fa-file-word-o"/>',
  49. tooltip: '导入word',
  50. click: function () {
  51. // 点击之后的操作
  52. layer.open({
  53. type: 1,
  54. skin: 'layui-layer-rim', //加上边框
  55. area: ['420px', '160px'], //宽高
  56. content: '<input type="file" id="file" name="file" title="上传word" value="" ><br/><input type="button" value="上传" id="submit" />'
  57. });
  58. }
  59. });
  60. return button.render(); // return button as jquery object
  61. };
  62. $(".summernote,.editor", $('form')).summernote({
  63. height: 250,
  64. lang: 'zh-CN',
  65. fontNames: [
  66. 'Arial', 'Arial Black', 'Serif', 'Sans', 'Courier',
  67. 'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
  68. "Open Sans", "Hiragino Sans GB", "Microsoft YaHei",
  69. '微软雅黑', '宋体', '黑体', '仿宋', '楷体', '幼圆',
  70. ],
  71. fontNamesIgnoreCheck: [
  72. "Open Sans", "Microsoft YaHei",
  73. '微软雅黑', '宋体', '黑体', '仿宋', '楷体', '幼圆'
  74. ],
  75. toolbar: [
  76. ['style', ['style', 'undo', 'redo']],
  77. ['font', ['bold', 'underline', 'strikethrough', 'clear']],
  78. ['fontname', ['color', 'fontname', 'fontsize']],
  79. ['para', ['ul', 'ol', 'paragraph', 'height']],
  80. ['table', ['table', 'hr']],
  81. ['insert', ['link', 'picture', 'video']],
  82. ['select', ['image', 'attachment']],
  83. ['view', ['fullscreen', 'codeview', 'help','word']],
  84. ],
  85. buttons: {
  86. image: imageButton,
  87. attachment: attachmentButton,
  88. word:wordBtn
  89. },
  90. dialogsInBody: true,
  91. followingToolbar: false,
  92. callbacks: {
  93. onChange: function (contents) {
  94. $(this).val(contents);
  95. $(this).trigger('change');
  96. },
  97. onInit: function () {
  98. },
  99. onImageUpload: function (files) {
  100. var that = this;
  101. //依次上传图片
  102. for (var i = 0; i < files.length; i++) {
  103. Upload.api.send(files[i], function (data) {
  104. var url = Fast.api.cdnurl(data.url);
  105. $(that).summernote("insertImage", url, 'filename');
  106. });
  107. }
  108. }
  109. }
  110. });
  111. // 点击上传按钮,发送ajax,上传word文档,并获取到返回的html地址
  112. // 动态生成的元素需要使用在document上加点击事件
  113. $(document).on('click','#submit',function(){
  114. var path = $('#file').val();
  115. if ($.trim(path) == "") {
  116. alert("请选择要上传的文件");
  117. return;
  118. }
  119. $.ajaxFileUpload({
  120. url: 'form', //这里是服务器处理的代码
  121. type: 'post',
  122. secureuri: false, //一般设置为false
  123. fileElementId: 'file', // 上传文件的id、name属性名
  124. dataType: 'json', //返回值类型,一般设置为json、application/json
  125. success: function (data, status) {
  126. console.log('success')
  127. },
  128. error:function(data, status, e){
  129. console.log('error')
  130. var responseText = data.responseText;
  131. // console.log(responseText);
  132. // 把html赋值给富文本,,并关闭layui
  133. $('.layui-layer-close').click();
  134. $(".summernote,.editor", $('form')).summernote('code',responseText);
  135. }
  136. });
  137. });
  138. },

 

 

4、修改控制器

  1. use PhpOffice\PhpWord\PhpWord;
  2. ...
  3. public function form(){
  4. // 接收表单上传的文件,并存储到服务器中
  5. $file = $_FILES['file']['tmp_name'];//上传的文件
  6. move_uploaded_file($file,"/words/res.docx");
  7. // 使用phpword将word转为html
  8. $phpWord = IOFactory::load('/words/res.docx');
  9. $xmlWriter = IOFactory::createWriter($phpWord, "HTML");
  10. $resPath = '/words/res.html';
  11. $xmlWriter->save($resPath);
  12. $html = file_get_contents($resPath);
  13. return $html;
  14. }
 
5、记得public目录下创建一个words文件夹,用来存储word和html文件
 
----------------------------------------------------------------------------------------
 
实践过程中发现base64格式的代码太长、太占空间,于是决定将base64格式的图片转为普通格式的图片,存入服务器
 
1、修改phpoffice\phpword\src\PhpWord\Element\Image.php
在这个类文件的最后新增一个方法,用于将base64格式的图片转为普通格式图片存入服务器
  1. public function base64_image_content($base64_image_content,$path){
  2. //匹配出图片的格式
  3. if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
  4. $type = $result[2];
  5. $new_file = $path."/".date('Ymd',time())."/";
  6. if(!file_exists($new_file)){
  7. //检查是否有该文件夹,如果没有就创建,并给予最高权限
  8. mkdir($new_file, 0700);
  9. }
  10. $new_file = $new_file.time().rand(100000000000, 900000000000).".{$type}"; // 如果同时上传多张图片,则时间戳相同会存在覆盖,因为加上随机上确保图片名称不重复
           if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
  11. return '/'.$new_file;
  12. }else{
  13. return false;
  14. }
  15. }else{
  16. return false;
  17. }
  18. }
 
2、提前创建好存放图片的文件夹
D:/phpstudy_pro/WWW/word/public/word_images
 
3、修改phpoffice\phpword\src\PhpWord\Writer\HTML\Element\Image.php
原先是将图片以base64格式返回的,改为html里访问服务器图片的格式并返回
  1. public function write()
  2. {
  3. if (!$this->element instanceof ImageElement) {
  4. return '';
  5. }
  6. $content = '';
  7. $imageData = $this->element->getImageStringData(true);
  8. if ($imageData !== null) {
  9. $styleWriter = new ImageStyleWriter($this->element->getStyle());
  10. $style = $styleWriter->write();
  11. $imageData = 'data:' . $this->element->getImageType() . ';base64,' . $imageData;
  12. // 1、获取到项目根目录
  13. // ---- D:/phpstudy_pro/WWW/word/vendor/phpoffice/phpword/src/PhpWord/Writer/HTML/Element/
  14. $path = str_replace('\\','/',realpath(dirname(__FILE__).'/'))."/";
  15. // --- D:/phpstudy_pro/WWW/word
  16. $path = explode('/vendor/phpoffice/phpword/src/PhpWord/Writer/HTML/Element/',$path)[0];
  17. // 2、调用在类中新增的方法,将图片存入 D:/phpstudy_pro/WWW/word/public/word_images
  18. $imageData = $this->element->base64_image_content($imageData, $path.'/public/word_images');
  19. // 3、替换为html里要显示的格式,替换时根据项目的默认路径灵活修改
  20. $imgPath = str_replace($path."/","",$imageData); // 原生php版本
  21. // $imgPath = str_replace($path."/public/","",$imageData); // thinkphp版本
  22. $content .= $this->writeOpening();
  23. // 4、返回
  24. $content .= "<img border=\"0\" style=\"{$style}\" src=\"{$imgPath}\"/>";
  25. $content .= $this->writeClosing();
  26. }
  27. return $content;
  28. }
 
4、原生php的demo(框架的demo实在太大了,就不放出来了,大家同理自己改写下就好)
下载项目部署到服务器上,访问form.html即可查看效果~

原文链接:http://www.cnblogs.com/chenyingying0/p/14349292.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号