PHP wangEditor插件打包(包含公式、上传附件)完整版

news2025/1/13 13:38:31

注意:js,css文件引用路径需要修改

先看效果

 

index.html文件

<!--  新版编辑器 -->
<script type="text/javascript" src="js/editor/dist/index.js"></script>
<link href="js/editor/dist/css/style.css" rel="stylesheet">
<!--  公式插件  -->
<script type="text/javascript" src="js/editor/katex/katex.js"></script>
<script type="text/javascript" src="js/editor/pluformula/index.js"></script>
<!--   上传附件 -->
<script type="text/javascript" src="js/editor/fujiandist/index.js"></script>

<textarea
                    style="width: 800px; height: 400px; outline: none;"
                    id="body" name="body"
                ><?= $row["body"] ?></textarea>

                <style>
                    #editor—wrapper {
                        border: 1px solid #ccc;
                        z-index: 100; /* 按需定义 */
                        width: 100%;
                    }

                    #toolbar-container {
                        border-bottom: 1px solid #ccc;
                    }

                    #editor-container {
                        height: 500px;
                    }
                </style>

                <div id="editor—wrapper">
                    <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
                    <div id="editor-text-area" style="height: 500px"></div>
                </div>
                <script>
                    const E = window.wangEditor
                    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
                    E.i18nChangeLanguage(LANG) // 切换语言
                    //自带公式插件
                    E.Boot.registerModule(window.WangEditorPluginFormula.default)
                    //上传附件插件
                    E.Boot.registerModule(window.WangEditorPluginUploadAttachment.default)

                    //公式插件
                    class MyKityFormulaMenu {
                        constructor() {
                            this.title = '公式'
                            this.iconSvg = '<svg t="1686991680388" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1152" width="200" height="200"><path d="M552.0896 565.90336L606.03392 512l-53.94432-53.90336L290.6112 196.83328l551.0144-0.29696v-76.25728l-659.17952 0.3584v76.25728L498.14528 512 182.3744 827.50464v75.85792l659.17952 0.3584v-76.25728l-551.0144-0.29696 261.55008-261.26336" p-id="1153" fill="#595959"></path></svg>'
                            this.tag = 'button'
                            this.showModal = true;
                            this.modalWidth = 900;
                            this.modalHeight = 600;
                        }

                        isActive(editor) {//默认选中
                            return false;
                        }

                        getValue(editor) {
                            return '';
                        }

                        isDisabled(editor) {//只读设置
                            return false;
                        }

                        exec(editor, value) {

                        }

                        getModalPositionNode(editor) {
                            return null; // modal 依据选区定位
                        }

                        // 定义 DropPanel 内部的 DOM Element
                        getModalContentElem(editor) {
                            // panel 中需要用到的id
                            const inputIFrameId = "kityformula_" + Math.ceil(Math.random() * 10);
                            const btnOkId = "kityformula-btn" + Math.ceil(Math.random() * 10);

                            const $content = $(`
    <div>
      <iframe id="${inputIFrameId}" class="iframe" height="400px" width="100%" frameborder="0" scrolling="no" src="js/editor/kityformula/index.html"></iframe>
    </div>`);
                            const $button = $(
                                `<div style="display: flex;justify-content: flex-end;">
<button id="${btnOkId}" type="button" class="right" style='margin: 5px 0'>
        确认插入
      </button></div> `

                            );
                            $content.append($button);

                            $button.on("click", () => {
                                // 执行插入公式
                                const node = document.getElementById(inputIFrameId);
                                const kfe = node.contentWindow.kfe;

                                kfe.execCommand("get.image.data", function (data) {
                                    // 获取base64
                                    // console.log(data.img);
                                });

                                let latex = kfe.execCommand("get.source");
                                latex = latex.replace(/\s/g, ""); // 去掉空格
                                const formulaNode = {
                                    type: "paragraph",
                                    children: [
                                        {
                                            type: "formula",
                                            value: latex,
                                            children: [
                                                {
                                                    text: "",
                                                },
                                            ],
                                        },
                                    ],
                                };
                                editor.insertNode(formulaNode);
                                editor.hidePanelOrModal();
                            });

                            return $content[0]; // 返回 DOM Element 类型

                            // PS:也可以把 $content 缓存下来,这样不用每次重复创建、重复绑定事件,优化性能
                        }
                    }

                    // 插件配置
                    const myMenuConf = {
                        key: 'kityFormula',
                        factory() {
                            return new MyKityFormulaMenu()
                        }
                    }
                    // 插件注入
                    E.Boot.registerMenu(myMenuConf)

                    //上传附件插件

                    window.editor = E.createEditor({
                        selector: '#editor-text-area',
                        html: $("#body").val(),
                        config: {
                            placeholder: '请输入内容...',
                            hoverbarKeys: {
                                formula: {
                                    menuKeys: ['editFormula'], // “编辑公式”菜单
                                },
                                attachment: {
                                    menuKeys: ['downloadAttachment'], // “下载附件”菜单
                                },
                            },
                            //配置上传信息
                            MENU_CONF: {
                                'uploadImage': {
                                    server: '../adminIsAdmin/js/editor/_up.php?act=main',
                                    timeout: 30 * 1000, // 上传时间
                                    fieldName: 'upfile', //字段名称
                                    meta: {file_type: 'image'}, //POST参数
                                    metaWithUrl: false,  // 将 meta 拼接到 url 参数中,默认 false
                                    headers: {Accept: 'text/x-json', admintoken: ''},// admintoken是否验证登录状态
                                    // 单个文件的最大体积限制,默认为 10M
                                    maxFileSize: 10 * 1024 * 1024,
                                    maxNumberOfFiles: 10,//最多可上传几个文件
                                    allowedFileTypes: ['image/*'],// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
                                    //小于该值就插入 base64 格式(而不上传),默认为 0
                                    // base64LimitSize: 5 * 1024,
                                    // 上传之前触发
                                    onBeforeUpload(file) {
                                        return file
                                    },
                                    // 上传进度的回调函数
                                    onProgress(progress) {
                                    },
                                    // 单个文件上传成功之后
                                    onSuccess(file, res) {
                                    },
                                    // 单个文件上传失败
                                    onFailed(file, res) {
                                        alert(res.message)
                                    },
                                    // 上传错误,或者触发 timeout 超时
                                    onError(file, err, res) {
                                        alert(err.message)
                                    },
                                },
                                'uploadVideo': {
                                    server: '../adminIsAdmin/js/editor/_up.php?act=main',
                                    timeout: 30 * 1000, // 上传时间
                                    fieldName: 'upfile', //字段名称
                                    meta: {file_type: 'video'}, //POST参数
                                    metaWithUrl: false,  // 将 meta 拼接到 url 参数中,默认 false
                                    headers: {Accept: 'text/x-json', admintoken: ''},// admintoken是否验证登录状态
                                    // 单个文件的最大体积限制,默认为 10M
                                    maxFileSize: 40 * 1024 * 1024,
                                    maxNumberOfFiles: 3,//最多可上传几个文件
                                    allowedFileTypes: ['video/*'],// 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
                                    // 上传之前触发
                                    onBeforeUpload(file) {
                                        return file
                                    },
                                    // 上传进度的回调函数
                                    onProgress(progress) {
                                    },
                                    // 单个文件上传成功之后
                                    onSuccess(file, res) {
                                    },
                                    // 单个文件上传失败
                                    onFailed(file, res) {
                                        alert(res.message)
                                    },
                                    // 上传错误,或者触发 timeout 超时
                                    onError(file, err, res) {
                                        alert(err.message)
                                    },
                                },
                                "uploadAttachment": {
                                    server: '../adminIsAdmin/js/editor/_up.php?act=main',
                                    timeout: 30 * 1000, // 上传时间
                                    fieldName: 'upfile',
                                    meta: {file_type: 'file'},
                                    metaWithUrl: false, // meta 拼接到 url 上
                                    headers: {Accept: 'text/x-json'},
                                    maxFileSize: 10 * 1024 * 1024, // 10M
                                    // 上传之前触发
                                    onBeforeUpload(file) {
                                        return file
                                    },
                                    // 上传进度的回调函数
                                    onProgress(progress) {
                                    },
                                    // 单个文件上传成功之后
                                    onSuccess(file, res) {
                                    },
                                    // 单个文件上传失败
                                    onFailed(file, res) {
                                        alert(res.message)
                                    },
                                    // 上传错误,或者触发 timeout 超时
                                    onError(file, err, res) {
                                        alert(err.message)
                                    },
                                }
                            },
                            onCreated(editor) {//初始化加载完成
                            },
                            onChange(editor) {
                                $("#body").val(editor.getHtml());
                            },
                        }
                    })

                    window.toolbar = E.createToolbar({
                        editor,
                        selector: '#editor-toolbar',
                        config: {
                            insertKeys: {
                                index: 0,
                                keys: [
                                    // "insertFormula", // “插入公式”菜单
                                    "kityFormula", // “编辑公式”菜单
                                    "uploadAttachment",//“附件”菜单
                                ],
                            },
                            // insertKeys: {
                            //     index: 24,
                            //     keys: [
                            //         "uploadAttachment",
                            //     ],
                            // },
                            excludeKeys: [
                                'codeBlock','undo','redo'
                            ]
                        }
                    })

                    // //查看当前工具栏排序和分组
                    //   const curToolbarConfig = window.toolbar.getConfig()
                    //   console.log(curToolbarConfig.toolbarKeys)
                </script>

_up.php上传处理文件

<?php
include("../../../adminIsAdmin/php_conn.php");
?>
<?php
set_time_limit(600);
$act = Ititle("get.act");
$infoArray = array();
$infoArray["errno"] = 0;
$infoArray["message"] = 'ok';
//sleep(1);
if ($act == "main" && empty($_FILES) === false) {
    if (!empty($_FILES['upfile']['error'])) {
        switch ($_FILES['upfile']['error']) {
            case '1':
                $error = '超过php.ini允许的大小。';
                break;
            case '2':
                $error = '超过表单允许的大小。';
                break;
            case '3':
                $error = '图片只有部分被上传。';
                break;
            case '4':
                $error = '请选择图片。';
                break;
            case '6':
                $error = '找不到临时目录。';
                break;
            case '7':
                $error = '写文件到硬盘出错。';
                break;
            case '8':
                $error = 'File upload stopped by extension。';
                break;
            case '999':
            default:
                $error = '未知错误。';
        }
        //Eleditor
        $infoArray["errno"] = 1;
        $infoArray["message"] = $error;
        $infoArray["_POST"] = $_POST;
    } else {
        $ext_arr = array(
            "image" => array("gif", "jpg", "jpeg", "png", "bmp"),
            "file" => array("rar", "zip", "tar", "gz", "7z", "bz2", "cab", "iso", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf", "txt", "md", "xml"),
            "music" => array("mp3"),
            "video" => array("mp4"),
        );
        $wjj_arr = array(
            "image" => "image/up_image/",
            "file" => "image/up_file/",
            "music" => "image/up_music/",
            "video" => "image/up_video/",
        );
        $php_path = dirname(dirname(dirname(dirname(__FILE__)))) . '/';
        //$php_url = dirname($_SERVER['PHP_SELF']) . '/';
        $php_url = "" . $swtWjj . "/";
        $save_path = $php_path;
        $save_path = realpath($save_path) . '/';
        $file_name = $_FILES['upfile']['name'];
        $picsize = $_FILES['upfile']['size'];
        $tmp_name = $_FILES['upfile']['tmp_name'];
        $max_size = 1024 * 1024 * 10;
        $url_pic = $_POST["file_type"] ? $wjj_arr[$_POST["file_type"]] : 'image/';
        $arr_url = $php_url . $url_pic . date("Ymd") . "/";
        $pic_url = $save_path . $url_pic . date("Ymd") . "/";
        if (!file_exists($pic_url)) {
            mkdir($pic_url, 0777, true);
        }
        $dir_name = $_POST["file_type"] ? $_POST["file_type"] : 'image';
        if (!$file_name) {
            $infoArray = array();
            $infoArray["errno"] = 1;
            $infoArray["message"] = '请选择文件';
            $infoArray["_POST"] = $_POST;
            $infoArray["file"] = $_FILES;
            $josn = json_encode($infoArray, true);
            echo $josn;
            exit;
        }
        if (@is_dir($pic_url) === false) {
            $infoArray = array();
            $infoArray["errno"] = 1;
            $infoArray["message"] = '上传目录不存在';
            $infoArray["_POST"] = $_POST;
            $josn = json_encode($infoArray, true);
            echo $josn;
            exit;
        }
        if (@is_writable($pic_url) === false) {
            $infoArray = array();
            $infoArray["errno"] = 1;
            $infoArray["message"] = '上传目录没有写权限';
            $infoArray["_POST"] = $_POST;
            $josn = json_encode($infoArray, true);
            echo $josn;
            exit;
        }
        if ($picsize > $max_size) {
            $infoArray = array();
            $infoArray["errno"] = 1;
            $infoArray["message"] = '文件大小不能超过10M';
            $infoArray["_POST"] = $_POST;
            $josn = json_encode($infoArray, true);
            echo $josn;
            exit;
        }
        $temp_arr = explode(".", $file_name);
        $type_ext = array_pop($temp_arr);
        $type_ext = trim($type_ext);
        $type_ext = strtolower($type_ext);
        if (in_array($type_ext, $ext_arr[$dir_name]) === false) {
            $infoArray = array();
            $infoArray["errno"] = 1;
            $infoArray["message"] = '上传文件扩展名,只允许' . implode(",", $ext_arr[$dir_name]) . '格式';
            $infoArray["type_ext"] = $type_ext;
            $infoArray["ext_arr"] = $ext_arr;
            $infoArray["_POST"] = $_POST;
            $josn = json_encode($infoArray, true);
            echo $josn;
            exit;
        }
        $temp_arr = explode(".", $file_name);
        $new_file_name = $temp_arr[count($temp_arr) - 2];
        $new_file_name = $new_file_name;
        $new_file_name = "" . build_order_no() . "." . $type_ext;
        $pic_path = $pic_url . iconv('UTF-8', 'GB2312//IGNORE', $new_file_name);
        if (move_uploaded_file($tmp_name, $pic_path) === false) {
            $infoArray = array();
            $infoArray["errno"] = 1;
            $infoArray["message"] = '上传文件失败';
            $infoArray["_POST"] = $_POST;
            $josn = json_encode($infoArray, true);
            echo $josn;
            exit;
        }
        //图片尺寸压缩
        /*      if ($_POST["imageSizeCompression"] == "true" && is_numeric($_POST["w"]) && is_numeric($_POST["h"])) {
                  //图片尺寸处理
                  $picurl = $arr_url . $new_file_name;
                  $w = $_POST["w"];
                  $h = $_POST["h"];
                  $zoom_crop = $_POST["zoom_crop"] ? $_POST["zoom_crop"] : 1;
                  if ($picurl) {
                      $arr = explode('/', $picurl);
                      $num = count($arr);
                      $picurl_old = "" . $arr[$num - 4] . "/" . $arr[$num - 3] . "/" . $arr[$num - 2] . "/" . $arr[$num - 1] . "";
                      if (file_exists($picurl_old)) {
                          imgSmallFun_small($picurl_old, $picurl_old, $w, $h, '', $zoom_crop);
                      }
                  }
              }*/
        /**
         * 得到上传文件所对应的各个参数,数组结构
         * array(
         *     "state" => "",          //上传状态,上传成功时必须返回"errno"=0
         *     "url" => "",            //返回的地址
         *     "title" => "",          //新文件名
         *     "original" => "",       //原始文件名
         *     "type" => ""            //文件类型
         *     "size" => "",           //文件大小
         * )
         */
        $infoArray["errno"] = 0;
        $infoArray["message"] = "SUCCESS";
        $infoArray["_POST"] = $_POST;
        $infoArray["data"] = array();
        $infoArray["data"]["url"] = $arr_url . $new_file_name;
        $infoArray["data"]["alt"] = '';
        $infoArray["data"]["href"] = '';
    }
}
$josn = json_encode($infoArray, true);
echo $josn;
?>

引用文件统一放代码包了。行调整下引用路径就行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/689929.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Mysql_5.7下载及安装(CentOS7)

文章目录 安装MySQL的几种方式一、 使用docker安装MySQL1.1 卸载旧版本&#xff08;如果存在docker&#xff0c;需先卸载旧版本&#xff09;1.2 安装Docker使用存储库安装(推荐使用) 1.3 安装mysql5.7.35(普通用户下)*** 安装MySQL:5.7.35镜像*** 进入容器中查看配置文件以及数…

Vue----Vue条件渲染

【原文链接】Vue----Vue条件渲染 &#xff08;1&#xff09;在components文件夹下新建一个Ifdemo.vue文件。 &#xff08;2&#xff09;然后在文件中编写如下内容&#xff0c;即写入一个标题 <template><h3>条件渲染</h3> </template> <script&…

Go语言开发者的Apache Arrow使用指南:数据类型

如果你不是做大数据分析的&#xff0c;提到Arrow这个词&#xff0c;你可能会以为我要聊聊那个箭牌卫浴或是箭牌口香糖(注&#xff1a;其实箭牌口香糖使用的单词并非Arrow)。其实我要聊的是Apache的一个顶级项目&#xff1a;Arrow[1]。 为什么要聊这个项目呢&#xff1f;说来话长…

【吴恩达deeplearning.ai】基于ChatGPT API打造应用系统(上)

以下内容均整理来自deeplearning.ai的同名课程 Location 课程访问地址 DLAI - Learning Platform Beta (deeplearning.ai) 一、大语言模型基础知识 本篇内容将围绕api接口的调用、token的介绍、定义角色场景 调用api接口 import os import openai import tiktoken from dote…

使用 MediaPipe 身体跟踪构建不良身体姿势检测和警报系统

文末附实现相关源代码下载链接 正确的身体姿势是一个人整体健康的关键。然而,保持正确的身体姿势可能很困难,因为我们经常忘记这一点。这篇博文将引导您完成为此构建解决方案所需的步骤。最近,我们在使用 MediaPipe POSE 进行身体姿势检测方面玩得很开心。 使用 MediaPipe P…

el-form复杂表单嵌套el-table实现复制字段并校验删除等功能

功能&#xff1a;表单项全部复制&#xff0c;表单项根据el-table选择后复制部分内容&#xff0c;做所有表单项的校验&#xff0c;部分表单项删除功能 点击添加饮品爱好后弹出el-table表单 选择好后点确定如下图&#xff0c;并且实现删除功能&#xff0c;删除仅仅删除饮品和爱好…

Excel 插入对象选PDF文件后,跳出图像数据不充分对话框,怎么解决

环境&#xff1a; excel 2021 Win10 专业版 问题描述&#xff1a; Excel 插入对象选PDF文件后&#xff0c;跳出图像数据不充分对话框 解决方案&#xff1a; 1.打开文件-选项-高级-不压缩文件中的图像&#xff0c;前面打勾 2.重启excel&#xff0c;再此插入解决&#xf…

Kears-4-深度学习用于计算机视觉-使用预训练的卷积网络

0. 说明&#xff1a; 本篇学习记录主要包括&#xff1a;《Python深度学习》的第5章&#xff08;深度学习用于计算机视觉&#xff09;的第3节&#xff08;使用预训练的卷积神经网络&#xff09;内容。 相关知识点&#xff1a; 预训练模型的复用方法&#xff1b;预训练网络 (p…

ResNet网络结构

Deep Residual Learning for Image Recognition 论文&#xff1a;https://arxiv.org/abs/1512.03385 代码&#xff1a;ResNet网络详解及Pytorch代码实现&#xff08;超详细帮助你掌握ResNet原理及实现&#xff09;_basic block结构图_武晨的博客-CSDN博客 【DL系列】ResNet网…

前端Vue自定义签到积分获取弹框抽取红包弹框 自定义弹框内容 弹框顶部logo

前端Vue自定义签到积分获取弹框抽取红包弹框 自定义弹框内容 弹框顶部logo&#xff0c; 下载完整代码请访问uni-app插件市场地址&#xff1a;https://ext.dcloud.net.cn/plugin?id13204 效果图如下&#xff1a; # cc-downloadDialog #### 使用方法 使用方法 <!-- show&…

用VSCode开发的Vue项目请求HBuilder项目的JSON数据

在学Vue之前采用HBuilder学习了HTML,CSS.JavaScript&#xff0c;jQuery&#xff0c;AJAX&#xff0c;最方便的就是可以请求项目中的JSON数据&#xff0c;当然也可以请求【聚合数据】的数据。 现在用VSCode开发&#xff0c;去访问HBuilder发布的项目中的json数据&#xff0c;因…

chatgpt赋能python:Python计算器程序代码:一种简单却强大的工具

Python计算器程序代码&#xff1a;一种简单却强大的工具 如果你是一名计算机编程爱好者&#xff0c;那你一定不会陌生于Python编程语言。Python是如今最受欢迎的编程语言之一&#xff0c;它简单易学、功能强大&#xff0c;也有着庞大的社区支持&#xff0c;使得它成为了很多人…

嵌入式ppt

第二章 第五章 第六章 第七章 第八章 第九章 第十章 考点 条件编译 volatile、static、 union、 struct、 const指针 堆与栈的不同点 3.功能模块应用题 (1) GPIO 的应用:流水灯的电路及软件编码、驱动数码管的电路及编码。 (2)外部中断的应用:电路及回调函数编码。 (3) …

云原生安全取决于开源

本文首发微信公众号网络研究院&#xff0c;关注获取更多。 Kubernetes 和 K3S 等技术是云原生计算的成功和开源力量的代名词。他们在竞争中大获全胜绝非偶然。当企业寻求安全的云原生环境时&#xff0c;开源是难题中的关键部分。 工具法则是众所周知的认知偏差。当你只有一把…

openeuler22.03系统salt-minion启动报“Invalid version: ‘cpython‘“错的问题处理

某日&#xff0c;检查发现一台openeuler22.03 SP1系统的服务器上之前正常运行的saltstack客户端minion未运行&#xff0c;查看服务状态&#xff0c;报"Invalid version: cpython"错&#xff0c;无法正常运行&#xff0c;本文记录问题处理过程。 一、检查salt-minion…

【Nginx】第三章 Nginx常用的命令和配置文件

第3章 Nginx常用的命令和配置文件 3.1 nginx常用的命令 &#xff08;1&#xff09;启动命令 在/usr/local/nginx/sbin目录下执行 ./nginx &#xff08;2&#xff09;关闭命令 在/usr/local/nginx/sbin目录下执行 ./nginx -s stop &#xff08;3&#xff09;重新加载命令…

docker报错 driver failed programming external connectivity on e

Error response from daemon: driver failed programming external connectivity on e ndpoint mj 原因&#xff1a;在我们启动了Docker后&#xff0c;我们再对防火墙firewalld进行操作&#xff0c;就会发生上述报错&#xff0c; 详细原因&#xff1a;docker服务启动时定义的…

分别用最小二乘法和梯度下降法实现线性回归

下面代码中包含了两种方法 import numpy as npnp.random.seed(1234)x np.random.rand(500, 3) # x为数据&#xff0c;500个样本&#xff0c;每个样本三个自变量 y x.dot(np.array([4.2, 5.7, 10.8])) # y为标签&#xff0c;每个样本对应一个y值# 最小二乘法 class LR_LS():d…

LENOVO联想笔记本拯救者Legion R7000P APH8 2023款(82Y9)原厂Windows11系统原装出厂状态预装系统

lenovo联想笔记本电脑&#xff0c;拯救者Legion R7000P APH8(2023款)(82Y9)原装出厂Windows11系统安装&#xff0c;预装系统重装镜像&#xff0c;恢复出厂状态 系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件、联想电脑管家等预装程序 所需要工具&#xff1a;16G或以上…