TinyMCE（图源自TinyMCE官网）
在上一篇文章 「 TinyMCE | 一款非常不错的富文本编辑器 」 中介绍了TinyMCE的简单配置，以及如何自定义上传图片，如果我们手头上有一篇含有文字图片的文章，如何直接拷贝过来粘贴到这款富文本编辑器中呢，这篇文章告诉你答案。
上代码
<!DOCTYPE html>
<html>
<head>
<script src='tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#mytextarea',
language:'zh_CN',
plugins: 'powerpaste image table imagetools',
toolbar: 'image | table',
width:1000,
height: 650, //编辑器高度
min_height: 400
});
</script>
</head>
<body>
<h1>TinyMCE快速开始示例</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
技巧
1. 如何快速排版图片？
这个问题其实和 如何在word中快速排版图片 是一样的。比如排版一个九宫格图片，如果全靠纯手工打造就太low了，思想就是创建一个3×3的表格，然后分别插入图片，居中显示，设置好表格大小，然后隐藏表格边框就OK了。
在TinyMCE中添加插件Table,让编辑器支持表格插件，然后就和word操作类似了。
插入表格
粘贴图片
表格居中，隐藏边框，九宫格就成了
2. 编辑图片
添加插件imagetools,可以支持很多图片的编辑操作：
- 方向旋转
- 裁剪
- 调整大小
- 调整亮度
-
亮度、锐化、对比度、颜色层次、伽马值、反转
调整亮度
锐化
调整对比度
调整颜色层次
调整伽马值
反转
说明
有了powerpaste这个插件，就可以很方便的从word中直接ctrl+v图片了，但是官网是要 收费 的，而且价格不菲！！一个月要30刀。。
不过有小伙伴需要的话，可以打赏5块钱（是RMB，不是美元哦~），私发简信给我，我发你哟，支持TinyMCE v5。
图片源自网络，侵权必删！
网友评论