【FUCK】基于TinyMCE的XiunoBBS编辑器（未更新）

更新日志：

前端图片判断、宽高限制、水印添加、压缩转换。

针对ObjectURL的转换优化，内存节省1倍。

删除广告，导航栏链接，更新说明。

本地部署：

FUCK基于MIT协议，TinyMCE基于LGPL协议，无法直接集成。

本地化可先从官网下载安装包，再将加载地址改为相关路径。

仓库地址：

https://github.com/netcrashed/xiunobbs.fuck

C

压缩前：JPEG，3024×4032，4.06 MB

压缩后：WEBP，1536×2048，706 KB

（Chrome首选压缩WEBP）

压缩前：GIF，4032×3024，3.48 MB

压缩后：JPEG，2048×1536，1.67 MB

（Firefox无法压缩WEBP，备选压缩JPEG）

压缩前：PNG，1414×2000，10.7 MB

压缩后：WEBP，1414×2000，150 KB

（Chrome首选压缩WEBP，底色保持透明）

未压缩：动态PNG

未压缩：动态GIF

未压缩：动态WEBP

C

第一个尝鲜

CF

配置里直接填完整的这些？

还是说填你的示例？

// 创建Rape对象
// file: 图片文件
new Rape(file).init()
.then((res)=>{
// 成功输出控制台
console.log(res);
})
.catch((err)=>{
// 失败输出控制台
console.log('err:'+err);
});
// 定义设置对象
let conf={
_chop:{url:'view/img/water-small.png',width:400,height:200,x:0.5,y:-80},
// _chop:(undefined)||null||false 不添加水印
// url: 水印图片 同域名URL或Base64编码的DataURL
// url:(undefined)||null||false 不添加水印
// width: 原图达到此宽度才添加水印
// width:(undefined)||null||false 0
// height: 原图达到此高度才添加水印
// height:(undefined)||null||false 0
// x: 顶点横坐标 负数为从右到左 0-1小数为中轴百分比
// x:(undefined)||null||false 0
// y: 顶点纵坐标 负数为从下到上 0-1小数为中轴百分比
// y:(undefined)||null||false 0
_dataurl:true,
// _dataurl:true 输出Base64编码的DataURL
// _dataurl:(undefined)||null||false 输出Blob对象
_png:{width:500,height:500,fill:null,format:'image/png',quality:0.8,render:{}},
_jpg:{width:500,height:500,fill:'#FFF',format:'image/jpeg',quality:0.8},
_webp:{width:500,height:500,fill:null,format:'image/webp',quality:0.8},
// _*: 输出格式模板 对象键名任意
// width: 转换后最大宽度
// width:(undefined)||null||false 不限制
// height: 转换后最大高度
// height:(undefined)||null||false 不限制
// fill: 背景填充色
// fill:(undefined)||null||false 透明
// format:image/png||image/jpeg||image/webp 输出格式选项
// format:(undefined)||null||false image/png
// quality:<0.01-1> 压缩比例 输出格式image/png无视该项
// quality:(undefined)||null||false 0.9
// render:{} CanvasRenderingContext2D 渲染属性
// render:(undefined)||null||false 使用浏览器默认
png:{normal:'_webp',nowebp:'_png',animate:false},
jpg:{normal:'_webp',nowebp:'_jpg'},
bmp:{normal:'_webp',nowebp:'_jpg'},
ico:null,
gif:{normal:'_webp',nowebp:'_jpg'},
webp:{normal:'_webp',nowebp:'_png',animate:false},
// png|jpg|bmp|ico|gif|webp: 指定格式设置
// normal: 常规输出使用哪个模板
// normal:(undefined)||null||false 使用脚本默认
// nowebp: 浏览器不支持webp输出时使用哪个模板
// nowebp:(undefined) 继承normal模板
// nowebp:null||false 不压缩直接输出
// animate: 图片检测到动画时使用哪个模板
// animate:(undefined) 继承normal模板
// animate:null||false 不压缩直接输出
};
// 创建Rape对象
// file: 图片文件
// conf: 转换设置
new Rape(file,conf).conv()
.then((res)=>{
// 成功输出控制台
console.log(res);
})
.catch((err)=>{
// 失败输出控制台
console.log('err:'+err);
});

CF

CF: 配置里直接填完整的这些？还是说填你的示例？// 创建Rape对象 // file: 图片文件 new Rape(file).init() .then((res)=>{ // 成功输出控制台 console.log(res); }) .catch((err)=>{...

CF 配置里直接填完整的这些？还是说填你的示例？ // 创建Rape对象 // file: 图片文件 new Rape(file).init() .then((res)=>{ / ...

填插件里的说明示例，这个是rape.js完整配置，用不到的。

C

C: CF 配置里直接填完整的这些？还是说填你的示例？ // 创建Rape对象 // file: 图片文件 new Rape(file).init() .then((res)=>{ / ... 填插件里的说明示例，这个是rape.js完整配...

C 填插件里的说明示例，这个是rape.js完整配置，用不到的。

如果想要水印的话，去配置最顶层添加这行：

_chop:{url:'view/img/water-small.png',width:400,height:200,x:0.5,y:-80},

意思是横坐标50%居中，纵坐标从下到上80px，图片大于400×200才加水印。

看你水印有多大，调整横纵坐标的值，不用百分比的话填正负数也行。

水印放右下角的话，两个都是负数，最低数值要大于水印的宽高。

url用http地址、相对路径、Base64都可以，建议用透明png。

C

找不到水印的话，看看是不是横纵坐标设置的负数值太小，跑到了图片区域范围外，负数的绝对值要大于水印宽高。

C

成功开启水印。感谢~

CF

其他的BUG还修复不？其实很早就发现了，权限设置里的最大尺寸并没有效果，比如我设置3，但实际可以上传5M的图片。

哦，居然是你前端压缩了，几兆的图片变几十K

CF

这个算BUG吗？今天刚刚测试的图片，没发帖，只上传，想清理，发现日期居然是2月14而不是3月14

CF

CF: 其他的BUG还修复不？其实很早就发现了，权限设置里的最大尺寸并没有效果，比如我设置3，但实际可以上传5M的图片。哦，居然是你前端压缩了，几兆的图片变几十K

CF 其他的BUG还修复不？其实很早就发现了，权限设置里的最大尺寸并没有效果，比如我设置3，但实际可以上传5M的图片。哦，居然是你前端压缩了，几兆的图片变几十K

现在是压缩后的文件大小（也就是实际传到服务器的大小）不能超过设置。

以前有这情况？确定用户组对应没错吗？因为你登录上传是按管理员组的设置走的。

C

C: CF 其他的BUG还修复不？其实很早就发现了，权限设置里的最大尺寸并没有效果，比如我设置3，但实际可以上传5M的图片。哦，居然是你前端压缩了，几兆的图片变几十K 现在是压缩后的文件大小（也就是实际传到服务器的大小）不能超过设置。以前有这情况？确定用户...

C 现在是压缩后的文件大小（也就是实际传到服务器的大小）不能超过设置。以前有这情况？确定用户组对应没错吗？因为你登录上传是按管理员组的设置走的。

无所谓了，反正我服务器post文件最大只能8M

CF

CF: 这个算BUG吗？今天刚刚测试的图片，没发帖，只上传，想清理，发现日期居然是2月14而不是3月14

CF 这个算BUG吗？今天刚刚测试的图片，没发帖，只上传，想清理，发现日期居然是2月14而不是3月14

是bug，多谢反馈，我研究下。

https://www.cnblogs.com/xia-feng/p/11482062.html

JS月份输出是0-11而不是实际月份，这个蛋疼。

回去我验证下图片大小限制是有效。

C

CF: 这个算BUG吗？今天刚刚测试的图片，没发帖，只上传，想清理，发现日期居然是2月14而不是3月14

CF 这个算BUG吗？今天刚刚测试的图片，没发帖，只上传，想清理，发现日期居然是2月14而不是3月14

清理的BUG修了，就改了个字，附件setting.php替换就行了。

文件大小检查没问题的，前后端都有拦截，怎么都会有报错。

C

设置>基础>自定义工具：（增加“formatselect”）

undo redo code removeformat formatselect align bold italic underline strikethrough forecolor backcolor fontsizeselect image media link unlink hr codesample table

设置>基础>自定义配置：（增加此段到结尾）

block_formats:'P=p;H1=h1;H2=h2;H3=h3;H4=h4;H5=h5;H6=h6;',

工具栏详情：

https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/

上面就不多说明了，就是顺序和可用项。

C

没有使用教程吗？对新手不友好啊！

oliolo

oliolo: 没有使用教程吗？对新手不友好啊！

oliolo 没有使用教程吗？对新手不友好啊！

tiny.cloud官方站的编辑器配置都能加，很多很复杂。

翻译版可以看看：http://tinymce.ax-z.cn

新手直接复制我示例配置就行了……

默认就配出这论坛的样子。

C

C: oliolo 没有使用教程吗？对新手不友好啊！ tiny.cloud官方站的编辑器配置都能加，很多很复杂。翻译版可以看看：http://tinymce.ax-z.cn新手直接复制我示例配置就行了……默认就配出这论坛的样子。

C tiny.cloud官方站的编辑器配置都能加，很多很复杂。翻译版可以看看：http://tinymce.ax-z.cn 新手直接复制我示例配置就行了…… 默认就配出这论坛的样子。

其实还有个问题，就是在手机浏览器中编辑会有遮挡。
X浏览器

oliolo

oliolo: C tiny.cloud官方站的编辑器配置都能加，很多很复杂。翻译版可以看看：http://tinymce.ax-z.cn 新手直接复制我示例配置就行了…… 默认就配出这论坛的样子。其实还有个问题，就是在手机浏览器中编辑会有遮挡。X浏览器

oliolo 其实还有个问题，就是在手机浏览器中编辑会有遮挡。X浏览器

这应该是手机或浏览器问题了……

TinyMCE官方没有无工具栏样式的，没辙。

最简单的方案是把前几行打空格，提交时删掉。

C

现在都是p换行，改成br可以吗？

oliolo