【FUCK】基于TinyMCE的XiunoBBS编辑器(未更新)

更新日志:

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

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

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

 

本地部署:

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

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

 

仓库地址:

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

 

压缩前: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

第一个尝鲜

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

还是说填你的示例?

// 创建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
引用
配置里直接填完整的这些? 还是说填你的示例?// 创建Rape对象 // file: 图片文件 new Rape(file).init() .then((res)=>{ ...
CF 配置里直接填完整的这些? 还是说填你的示例? // 创建Rape对象 // file: 图片文件 new Rape(file).init() .then((res)=&gt;{ / ...

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

C
引用
CF配置里直接填完整的这些? 还是说填你的示例? // 创建Rape对象 // file: 图片文件 new Rape(file).init() .then((re...
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。

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

成功开启水印。感谢~

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

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

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

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

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

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

C
引用
CF其他的BUG还修复不?其实很早就发现了,权限设置里的最大尺寸并没有效果,比如我设置3,但实际可以上传5M的图片。 哦,居然是你前端压缩了,几兆的图片变几十K 现在是压缩后的文件大小(也...
C 现在是压缩后的文件大小(也就是实际传到服务器的大小)不能超过设置。 以前有这情况?确定用户组对应没错吗?因为你登录上传是按管理员组的设置走的。

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

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而不是实际月份,这个蛋疼。

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

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

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

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

设置>基础>自定义工具:(增加“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/

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

没有使用教程吗?对新手不友好啊!

oliolo
引用
没有使用教程吗?对新手不友好啊!
oliolo 没有使用教程吗?对新手不友好啊!

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

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

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

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

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

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

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

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

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

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

现在都是p换行,改成br可以吗?

oliolo
引用
现在都是p换行,改成br可以吗?
oliolo 现在都是p换行,改成br可以吗?

自定义配置添加:(不同配置间要有逗号)

forced_root_block:false

然后把我插件的“统一文本换行”关掉。

但是这么搞不知道会出啥问题,也不是很建议。

一般来说文本每个段落都有元素包裹的。

改用div包裹这么写:

forced_root_block : 'div'

1 2