【】js前端不同颜色的常用代码大全（方案+规则），上传图片代码呈现和生成静态

保存文件命名规则工程通用避免中文、空格、特殊符号❌禁止中文文件名、空格、# ? / \ : * |这些字符操作系统不允许。方案 AID 命名后端数据库场景最稳妥工业项目首选规则{type}-{id}.htmlarticle‑1.html article‑2.html note‑105.html report‑228.html优点永不重复简单url 友好方便数据库一一对应。数据库表里存 id标题、创建时间、状态存在数据库文件名只用 id。访问地址http://127.0.0.1:8000/static/html/article‑1.html方案 B时间戳 短 hash无数据库纯文件静态站点article‑20260823‑7a2f91.html note‑20260823‑bc34da.htmlyyyyMMdd日期 6 位 hash防止重名。方案 Cslug 别名对外网站url 好看标题转英文 / 拼音小写横杠分隔how‑to‑use‑editor.html system‑config‑note.html缺点标题修改要改文件名容易冲突需要做唯一性校验内部后台系统不推荐。目录组织结构建议project/ ├─ static/ │ ├─ html/ #生成的静态页面存放目录 │ │ ├─ article‑1.html │ │ └─ article‑2.html │ └─ upload/ #编辑器上传图片 │ ├─ a123.png │ └─ b456.png └─ templates/ └─ static‑page‑tpl.html #完整静态页面外壳模板关键业务规则图片路径处理编辑器输出的 img 是相对路径生成静态页时统一转为网站根绝对路径/static/upload/xxx.png不要用./相对路径防止页面目录层级不同图片 404。不要直接把用户输入标题当文件名用户输入可以任意字符会造成文件系统报错。片段文件和完整文件区分片段article‑1.fragment.html只正文给 fetch 嵌入框架完整页article‑1.full.html独立打开参考一段应该是wangEditor 5的 Editor 文件编辑器代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlewangEditor5 编辑器示例/title !-- wangEditor css -- link hrefhttps://cdn.jsdelivr.net/npm/wangeditor/editor5/dist/css/style.css relstylesheet style body { padding:20px; } #toolbar-container { border:1px solid #ccc; border-bottom:none; } #editor-container { border:1px solid #ccc; min-height:400px; } .btn-group { margin:12px 0; } button { padding:6px 14px; margin-right:8px; cursor:pointer; } /style /head body div classbtn-group button idbtn-get-html获取HTML内容/button button idbtn-set-html填充测试内容/button button idbtn-clear清空编辑器/button /div !-- 工具栏容器 -- div idtoolbar-container/div !-- 编辑区域容器 -- div ideditor-container/div div stylemargin-top:20px; h4输出HTML预览/h4 pre idoutput-html styleborder:1px solid #999;padding:10px;white-space:pre-wrap;/pre /div !-- wangEditor js CDN -- script srchttps://cdn.jsdelivr.net/npm/wangeditor/editor5/dist/index.js/script script const { createEditor, createToolbar } window.wangEditor; const editorConfig { placeholder: 请输入内容支持粘贴截图、上传图片、插入代码块..., // 图片上传配置修改server为你的后端上传接口地址 MENU_CONF: { uploadImage: { server: /api/upload, // 后端上传接口 fieldName: file, // form表单file字段名 maxFileSize: 10 * 1024 *1024,//最大10MB // 上传成功回调 onSuccess(file, res) { console.log(上传成功, res) }, onFailed(file, err) { alert(图片上传失败 err.message) } } } } // 创建编辑器 const editor createEditor({ selector: #editor-container, config: editorConfig, mode: default }) // 创建工具栏 const toolbar createToolbar({ editor, selector: #toolbar-container }) // 按钮事件 const outputBox document.getElementById(output-html); // 获取html document.getElementById(btn-get-html).addEventListener(click,(){ const html editor.getHtml(); outputBox.innerText html; }) // 设置html document.getElementById(btn-set-html).addEventListener(click,(){ const testHtml h2测试标题/h2p测试文本内容/pprecodeconst a 100;/code/pre editor.setHtml(testHtml) outputBox.innerText testHtml; }) // 清空 document.getElementById(btn-clear).addEventListener(click,(){ editor.clear(); outputBox.innerText ; }) /script /body /html