tinymce编辑器上传图片插件配置

转自：http://www.tangshuang.net/1715.html

使用tinymce作为网站的编辑器的时候，由于tinymce本身并不提供本地图片上传（提供付费图片上传插件），所以我们需要自己去集成这个功能。但是我在网上找了很多资料，都没有完整且有效的实现方法，经过对已有插件的研究，最终实现了这个功能。现在记录下来，为今后参考。

1. 使用imageUpload插件

tinymce拥有完备的插件体系，就像WordPress一样，tinymce本身就提供了一些核心插件，例如字体样式等，虽然都是编辑器的核心功能，但是仍然是通过插件实现的。它不提供图片上传功能，它的图片只能引用网络图片。所以我们可以通过插件的形式来实现这个功能。

imageUpload插件可以在这里获取和了解。按照作者的意图，在使用本插件的时候，必须先加载iframe form post插件，这个插件在这里下载。

但是iframe form post插件的机制似乎出现了问题，导致我在使用时无法正常使用imageUpload插件，所以我选择了使用jquery.form.js这个插件。

2.使用jquery.form.js插件

jquery非常漂亮的封装了ajax，但是在进行表单提交的时候，特别是在上传图片的时候，就会出现问题，[type=file]无法被提交。而通过jquery.form.js插件，就可以很好的解决这个问题。

jquery.form.js并没有提交为官方插件，你可以在这里下载下来。点击这里进入插件的官方主页。

3.开始部署tinymce

说了这么多，到底怎么来实现tinymce的本地上传图片功能呢？按照下方的方法一步一步的操作即可。

1）集成tinymce

也就是在你的HTML中先集成tinymce，并可以正常使用。具体集成方法就不说了。

2）载入jQuery.form.js

在进行tinymce的某个实例化之前，要载入jquery.form.js，你可以直接在tinymce的js载入之后，立即载入jquery.form.js。

3）把插件丢入tinymce的插件目录

上面说过了，我们对imageUpload插件进行了改造，点击这里下载我改造过的插件（jquery.form.js也在这里面）。下载之后，解压出imageupload目录，把这个目录直接丢在tinymce的插件目录（tinymce/plugins）下。

4）初始化时配好配置

在第一步中我们正常集成了tinymce，说明你已经知道如何进行配置了。接下来你要让你的上传图标出现在编辑器工具栏中，并且能够上传图片成功。

<script>tinymce.init({selector: "#detail",language : "zh_CN",language_url : "__ASSETS__/TinymceEditor/langs/zh_CN.js", // 语言包，需要到官网去下载，你也可以不使用中文语言包menubar: false,convert_urls: false,height: 450,plugins: ["link imageupload"],toolbar: "undo redo | imageupload link | bold italic | alignleft aligncenter alignright alignjustify",imageupload_url: '{:U("File/uploadPicture")}'});
</script>

要注意上面三个地方，一个是plugins中添加imageupload（初始化时载入插件），toolbar中要添加imageupload（工具栏中出现上传图片按钮），imageupload_url要设置文件上传到哪一个URL（用php去接收$_FILES['file']进行处理，比如上传、水印等）。

imageupload_url用来处理上传好的图片，同时要返回一个json，让插件知道上传是否成功。json格式在imageUpload的github上已经有了，如果成功的情况下，要返回：

{"error":false,"path":"http:\/\/www.mydomain.com\/myimage.jpg"}

这样子，上传成功后，就可以直接将图片插入到该位置了。

tinymce编辑器上传图片插件配置相关推荐

在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻.公告的功能,自然而然就需要用到了富文本编辑器. UEditor.Simditor.wangEditor.CKEditor.TinyMCE.Quill,这是当前比较热门的 ...
xiuno开发文档_大白 · TinyMCE编辑器v1.9_Xiuno Plugin_奇狐插件商店_奇狐网
功能强大,所见即所得的富文本编辑器,本地部署速度快,附带Prism代码高亮插件,支持截图粘贴和手动上传图片,还可以编辑源代码. 版本说明版本内容更新时间 1.0 版本初始化版本2020-03-14 ...
ajax 批量上传图片插件,TinyMCE多图片批量上传（Ajax）教程
需要用上插件:axupimgs 插件作者:莫若卿支持版本:5.0.4+ 支持语言:仅中文插件版本:1.6 一.axupimgs 插件作用: 这是一个tinymce多图片批量上传插件,支持拖拽文件添 ...
kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法
[导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下富文本编辑器上传图片一.导入kindeditor的js 二.将kindeditor与一个文本域textar ...
最强大的代码编辑器(IDE)——Atom。Atom介绍安装与插件配置(一)
最炫酷的代码编辑器(IDE)--Atom 最帅,特效炫酷的IDE,开源! 先上几张图,感兴趣你再往下看介绍 Atom (原子) 是github专门为程序员推出的一个跨平台文本编辑器.其实是一款(ID ...
vue3使用tinymce编辑器
1.npm安装tinymce编辑器 npm install tinymce@^5.10.2 npm install @tinymce/tinymce-vue@^4.0.5 2.在public下面创建t ...
tinymce--一款非常好用的富文本编辑器 VUE如何集成tinymce编辑器
博客(coder的自我修养)原文链接:tinymce--一款非常好用的富文本编辑器 vue集成tinymce编辑器 - coder的自我修养 TinyMC编辑器简介 TinyMCE是一款易用.且功能强 ...
富文本编辑器上传图片的功能
今天,我们来讲一下富文本编辑器上传图片功能的操作.首先,在这里需要引入一个js插件 (config.js),在插件里面写下配置图片上传的路径. 接下来,既然要实现上传图片的功能,那我们就需要一个东西是 ...
ckeditor php 上传图片_ckeditor 4上传图片功能配置方法
ckeditor 4上传图片功能配置方法发布于 2015-01-04 10:04:08 | 2375 次阅读 | 评论: 2 | 来源: PHPERZ CKEditor网页编辑器CKEditor 即 ...

tinymce编辑器上传图片插件配置

tinymce编辑器上传图片插件配置相关推荐

最新文章

热门文章