%20(2).svg)
项目简介
本项目为在线评论系统增添了画图板功能，用户能在评论表单中使用画图板进行绘画，并将画作以图片形式插入评论内容，有效增强了评论的互动性与丰富度。
项目的主要特性和功能
- 多格式图片插入：支持将 blob 格式图片插入评论框，提交时转换为 base64 格式；也可直接插入 base64 格式图片。
- 多评论系统适配：能适配如 WordPress、Valine 等特定评论系统，也支持无特殊处理的普通评论系统。
- 可配置化：画图板的打开按钮样式、canvas 元素样式等均可配置。
- 待实现功能：未来版本将支持按钮可配置、背景色、油漆桶、形状，以及将特定评论系统的支持转为插件形式。
安装使用步骤
假设你已下载本项目的源码文件，按以下步骤操作：
通用步骤
- 引入 JS 文件：在 HTML 文件中引入
cave-draw.min.js。 ```html
2. **初始化配置**：根据评论系统类型进行相应配置。js
new CaveDraw({
// 评论表单的 textarea 元素, 画图板插入到它下面
ele: '#comment',
// 评论表单的 form 元素，用来在提交时生成 base64 格式的图片
// 如果评论系统没有 form 元素，则不写或者留空。此时，
// 相应的，会直接把 base64 格式的图片插入到评论表单的 textarea 元素
formEle: '#commentform',
// 指定特殊的评论系统，目前只弄了 valine
special: 'valine',
// 画图板的打开按钮
openBtn: {
style: 'background-color:#b37ba4;color:white;',
hoverStyle: 'background-color: #49d0c0;'
},
// 画图板的 canvas 元素
canvasStyle: 'cursor:crosshair;background:whitesmoke;/margin-bottom:5px;border-radius:0px;/'
})
```
不同评论系统的额外配置
WordPress
- 在
functions.php中设置允许提交 base64 格式的图片。php function add_allowed_html_tags() { global $allowedtags; $allowedtags['img'] = array( 'src' => true, 'alt' => true, 'id' => true ); } add_action('init', 'add_allowed_html_tags', 10); add_filter('kses_allowed_protocols', function ($protocols) { $protocols[] = 'data'; return $protocols; }); - 配置 CaveDraw。
js new CaveDraw({ ele: '#comment', formEle: '#commentform', openBtn: { style: 'background-color:#b37ba4;color:white;', hoverStyle: 'background-color: #49d0c0;' }, canvasStyle: 'cursor:crosshair;background:whitesmoke;/*margin-bottom:5px;border-radius:0px;*/' })
Valine
- 允许提交 base64 格式的图片。在
Valine.min.js搜索allowedSchemes.some(，在该函数最开始添加if("data:image/"==e.substr(0,11))return true;。也可使用valine-modify文件夹中已修改好的Valine.min.js（版本为1.4.18）。js function l(e) { if ("data:image/" == e.substr(0, 11)) return true; function t(t) { return 0 === e.indexOf(t + ":") } var n = e[0]; if ("#" === n || "/" === n) return!0; var r = e.indexOf(":"); if (-1 === r) return!0; var i = e.indexOf("?"); if (-1!== i && r > i) return!0; var o = e.indexOf("#"); return -1!== o && r > o || v.allowedSchemes.some(t) } - 配置 CaveDraw，注意 CaveDraw 初始化要在 valine 前面。 ```html
```
其他评论系统
若评论系统没有 form 元素，也未被特殊处理，可直接把 base64 格式图片插入评论框。 ```html
```
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】