simditor编辑器在php环境下使用
Simditor 编辑器文档地址：https://simditor.tower.im/docs/doc-usage.html
官方下载地址：https://github.com/mycolorway/simditor/releases
这是自己做了个 demo 的文件结构：
文件目录结构： -assets └ _coffee └ 省略 └ _sass └ 省略 └ images └ 省略 └ scripts └ dompurify.js hotkeys.js jquery.min.js mobilecheck.js module.js page-demo.js page-doc.js page-download.js page-form.js simditor.js uploader.js └ styles └ app.css mobile.css simditor.css -demo.html -index.html -upload_files.php
编辑器文件 index.html：
<!DOCTYPE html> <html> <head> <title>simditor编辑器实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引用的 cdn 服务器上的 bootstrap 前端框架，可不引用 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="assets/styles/simditor.css"> <link rel="stylesheet" href="assets/styles/mobile.css"> <!-- Simditor 编辑器引用的框架和组件是相互依赖的，注意引用顺序，jquery 应该第一时间引用 --> <script type="text/javascript" src="assets/scripts/module.js"></script> <script type="text/javascript" src="assets/scripts/uploader.js"></script> <script type="text/javascript" src="assets/scripts/hotkeys.js"></script> <script type="text/javascript" src="assets/scripts/dompurify.js"></script> <script type="text/javascript" src="assets/scripts/simditor.js"></script> <script type="text/javascript" src="assets/scripts/page-demo.js"></script> <script type="text/javascript" src="assets/scripts/page-download.js"></script> <script type="text/javascript" src="assets/scripts/mobilecheck.js"></script> </head> <body> <div class="container"> <section id="page-demo">
<!--<div id="txt-content" contenteditable="true"></div>-->
<textarea id="txt-content" data-autosave="editor-content" autofocus required></textarea> </section> <br> <button onclick="getValue()" class="btn btn-info">获取内容</button> <div> <script> function getValue(){ var obj = document.getElementById("txt-content"); alert(obj.value); } </script> </body> </html>
simditor 的配置，我用的是原demo文件 page_demo.js：
(function() { $(function() { var $preview, editor, mobileToolbar, toolbar; Simditor.locale = 'zh-CN'; //设置为中文字符 toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment']; mobileToolbar = ["bold", "underline", "strikethrough", "color", "image", "ul", "ol"]; if (mobilecheck()) { toolbar = mobileToolbar; } editor = new Simditor({ textarea: $('#txt-content'), placeholder: '这里输入文字...', toolbar: toolbar, toolbarFloat: true, pasteImage: true, defaultImage: 'assets/images/image.png', //编辑器显示默认的图片 upload: { url: '/upload_files.php', // post 请求的后端接口 params: null, fileKey: 'file', // 重要！这里的值要与 php 文件 upload_files.php 的 $_FILES['file'] 的下标统一 leaveConfirm: '正在上传文件..', connectionCount: 3 //允许同时上传的文件数 } }); $preview = $('#preview'); if ($preview.length > 0) { return editor.on('valuechanged', function(e) { return $preview.html(editor.getValue()); }); } }); }).call(this);
php 服务端接口文件：upload_file.php：
<?php $url = "http://localhost:8080/"; //域名地址 $_file = $_FILES["file"]; //这里的下标要与 new Simditor 内的 fileKey 的值要统一 $isSuccess = true; //是否上传成功 $msg = ''; //上传错误提示 $timeStamp = time(); //时间戳 $random = str_pad(mt_rand(10, 999999), 6, "0", STR_PAD_BOTH); //6位随机数 // 允许上传的图片后缀 $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = explode(".", $_file["name"]); $extension = end($temp); // 获取文件后缀名 if ((($_file["type"] == "image/gif") || ($_file["type"] == "image/jpeg") || ($_file["type"] == "image/jpg") || ($_file["type"] == "image/pjpeg") || ($_file["type"] == "image/x-png") || ($_file["type"] == "image/png")) && ($_file["size"] < 204800) // 小于 200 kb && in_array($extension, $allowedExts)) { if ($_file["error"] > 0) { $isSuccess = false; $msg = "错误：: " . $_file["error"] . "<br>"; } else { // 判断当前目录下的 upload 目录是否存在该文件 // 如果没有 upload 目录，你需要创建它，upload 目录权限为 777 if (file_exists("upload/" . $_file["name"])) { $isSuccess = false; $msg = $_file["name"] . " 文件已经存在。 "; } else { $isSuccess = true; // 如果 upload 目录不存在该文件则将文件上传到 upload 目录下 move_uploaded_file($_file["tmp_name"], "upload/" . $random . $timeStamp . '.' . $extension); $path = $url . "upload/" . $random . $timeStamp . '.' . $extension; } } } else { $isSuccess = false; $msg = "非法的文件格式"; } //注意：前面不能有任何输出信息，否则编辑器会出错 echo json_encode([ 'success' => $isSuccess, 'msg' => '图片上传错误信息：'.$msg, //当 success 为 false 时显示的内容 'file_path' => $path //返回到编辑器 img 标签上的图片地址 ]);
提示：Simditor 编辑器在上传图片时的宽度是按图片宽度来显示的，如果要用百分比显示图片，在文件 simditor.js 中搜索 “width = img.width;”或者搜索“$img.attr({”，把“width = img.width;”改为“width = "%80";”，把“height = img.height;”改为“height = "auto";”即可。
编辑器容器可以用 div 代替，属性 contenteditable 设置为"true"，代码如下：
<div id="txt-content" contenteditable="true"></div>
