最近使用了一下TinyMCE富文本框，感觉是非常不错的一款，配置简单，界面优美，完全免费...推荐大家使用。

官方文档也比较容易阅读，大家有兴趣的可以自己去看看https://www.tiny.cloud/docs/quick-start/

这里简单记录一下我自己使用TinyMCE的配置，如果阅读过官方文档的前端配置也是极其简单的。

注意：上传本地图片是TinyMCE 4.3才新引入的功能，所以该配置只适合4.3及其以上，我本次使用的是4.8.2版本的。

<!doctype html>
<html>
<head>
<script src='https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=自己申请的KEY'></script>
<script>tinymce.init({selector: 'textarea#mytextarea',//意思是将TinyMCE插件放入‘textarea’ID为mytextarea的标签里plugins: [ //配置插件：可自己随意选择，但如果是上传本地图片image和imagetools是必要的'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker','searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking','save table contextmenu directionality emoticons template paste imagetools textcolor'],
//工具框，也可自己随意配置toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',    image_advtab: true,table_default_styles: {width: '100%',borderCollapse: 'collapse'},image_title: false, // 是否开启图片标题设置的选择，这里设置否automatic_uploads: true,// 图片异步上传处理函数images_upload_handler: (blobInfo, success, failure) => { var xhr, formData;xhr = new XMLHttpRequest();xhr.withCredentials = false;xhr.open('POST', 'FileAction_updateFile');//第一个参数是请求方式，第二个参数是请求地址，我这里配置的是struts的action，如果是其他（PHP等）的可这样配置：xxx.phpxhr.onload = function () {var json;if (xhr.status !== 200) {failure('HTTP Error: ' + xhr.status);return;}json = JSON.parse(xhr.responseText);            if (!json || typeof json.location !== 'string') {failure('Invalid JSON: ' + xhr.responseText);return;}success(json.location);};formData = new FormData();formData.append('file', blobInfo.blob(), blobInfo.filename());xhr.send(formData);}});</script>
</head>
<body>
<center>
<br><form method="post" action="${pageContext.request.contextPath}/TextareaAction"><textarea id="mytextarea" name="test"></textarea><input type="submit" value="提交"></form>
</center>
</body>
</html>

这里需要注意的是：在异步处理函数中xhr.open('POST', 'FileAction_updateFile');第二个参数是后台页面，文件上传的页面，如果文件上传成功，需要返回一个Json数据，其中必须包含一个location数据，比如：

{ location : '/uploaded/image/path/image.png' }

location记录的是你图片保存的地址，然后返回到前台进行显示。

若不进行返回，异步处理函数将不会执行success(json.location);

富文本框TinyMCE4.8上传本地图片基本配置（后端篇）

富文本框TinyMCE4.8上传本地图片基本配置（前端篇）相关推荐

tinymce4.x 上传本地图片(自己写个插件)
tinymce是一款挺不错的html文本编辑器.但是添加图片是直接添加链接,不能直接选择本地图片. 下面我写了一个插件用于直接上传本地图片. 在tinymce的plugins目录下新建一个upload ...
element-tiptap富文本编辑器，上传本地图片
因为通过富文本编辑器上传本地图片,都会直接转成base64格式的,我们可以先上传到服务器,再从服务器返回的URL拿到给富文本框展示(引入我就不说了,直接看我上篇文章有说到过) data () {// ...
JavaWeb富文本编辑器与文件上传
目录一.富文本编辑器 1.下载富文本编辑器 2.富文本编辑器的应用二.文件上传文件上传必须要注意的规则: 文件上传案例文件夹的访问一.富文本编辑器富文本编辑器在项目中很常见,它可以将文本, ...
关于wangEditor5上传本地图片的详细配置
最近在写个人博客用到了富文本编辑器,这里用的是wangEditor5版本,但是浏览了官网并没有发现上传本地图片的详细配置,很是头疼,最终在官方的demo源码中找到了本地上传的详细配置,豁然开朗! co ...
php上传图片代码编辑,simditor上传本地图片 php
网上有很多simditor这个编辑器的文档,但是大多是重复的,并且php做服务端的也很少.最近做了一个上传功能,研究了一下,跟大家分享一下. 首先说一下逻辑,理解好了逻辑,才能更好的理解代码. 点击 ...
无水印上传本地图片到网络获取地址+小书匠使用 +github和七牛云图床绑定--菜鸟小回
无水印上传本地图片到网络获取地址+小书匠使用 +github和七牛云图床绑定简介: 最近开始写博客,缺少一个Markdown编辑器.寻找了两三天终于找到了这款<小书匠>,可复制粘图, ...
解决MarkDown上传本地图片无法显示
解决MarkDown上传本地图片无法显示前言提示:什么牛头马面写的代码,今天写个技术博客想插入一张图片发现无法显示,接着按流程在博客一顿找,发现我开头第一句,不知道怎么形容垃圾场里面找垃圾的心情. ...
有道云笔记markdown上传本地图片的方法
有道云笔记markdown上传本地图片的方法有道云笔记markdown模式非会员发现不能直接截屏粘贴图片了.后来网上搜集了下方法,发现了好几种解决办法. 当然,如果你一年,不差那两百块钱,直 ...
kindeditor上传本地图片的问题
终于给我发现kindeditor上传本地图片时,为什么出现服务器错误原来demo.jsp里的: KE.show({ id : 'content1', imageUploadJson : '../.. ...

富文本框TinyMCE4.8上传本地图片基本配置（前端篇）

富文本框TinyMCE4.8上传本地图片基本配置（后端篇）

富文本框TinyMCE4.8上传本地图片基本配置（前端篇）相关推荐

最新文章

热门文章