tinymce编辑器进行本地图片上传

首先下载tinymce.js之后

在form中添加一个<textarea>元素 给其一个id和name

然后就可以初始化编辑器了

tinymce.init({})进行

里面的属性简单介绍一下:relative-urls:所有通过MCFileManager返回的URL都会与知道的document_base_url相关。如果设为false,所有URL会被转化成绝对URL,默认为true。

selector: 表示编辑器绑定的选择器 "textarea#content"  textarea 表示控件 #content表示textarea的id

auto-focus:自动焦点

theme:主题名称,默认default  自带 simple,default和advanced

plugins:以逗号分隔的主题插件列表

toorbar:工具条

setup:初始化调用函数了

例如:

这里面就是添加了个按钮"上传图片" 然后将“mybutton”这个新的按钮加入到工具条中

当点击“上传图片”时将编辑器取出

这时候弹出选择图片的提示框,点击选择文件按钮,这里面的选择文件,是一个  <input type='file' style="margin-top: 20px" name='tinymceuploadify' id='tinymceuploadify' />

类型是file

这时候要给tinymceuploadify进行绑定uploadify

uploadify({})里的属性进行简单介绍

swf:表示uploadify.swf 文件的相对JS文件的路径

buttontext: 显示文字 例如“上传本地图片”

method:请求方法 post/get

auto:bool类型 设置为true时,当选择文件后自动上传,false时需要调用上传方法触发

uploader:表示调用后台的上传方法地址 例如:/Home/Upload

multi:bool类型  默认为true 是否允许多文件上传

onUploadSuccess: 上传成功时触发,有五个参数,file:上传的文件对象  bytesUploaded:已上传的总字节数 bytesTotal:文件的总字节数  totalBytesUploaded:所有文件中已上传的总字节数

上传成功后将上传成功后的img插入到编辑器中

tinymceEditor.insertContent(img)  tinyceEditor其中就是开始时全局定义的一个变量,在初花调用编辑器的时候就将editor赋给他了

在后台进行处理时就是点击上传的时候,找到uploader对应的后台控制器地址,进行操作

首先找到上传的图片地址 给定一个时间字符串

extension 表示上传文件的扩展名

最后检查这个上传图片的路径在不在

不存在就创建一个

存在就直接保存

最后返回

提交所有内容后,会到后台进行处理,主要就是存储 然后跳转显示

首先写个path server.MapPath("~/File/123.txt")

判断这个文件在不在 存在就给他删了   if(system.io.exists(path))  system.io.file.delete(path)

最后将所有编辑器中的数据全部写入到这个路径下的123.txt文件中

system.io.file.writealltext(path,model.content)

最后跳转就行

redirecttoaction("show")

在show显示的时候,给一个viewbag 来传递数据

例如 viewbag.str=这里写你从你保存的文件中读取到的所有内容 system.io.file.readalltext(server.path----)

从show界面中用@html.Raw(viewbag.str)来获取

转载于:https://www.cnblogs.com/jiangyou-lz/p/5620227.html

tinymce 编辑器 上传图片相关推荐

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

    转自:http://www.tangshuang.net/1715.html 使用tinymce作为网站的编辑器的时候,由于tinymce本身并不提供本地图片上传(提供付费图片上传插件),所以我们需要 ...

  2. xiuno开发文档_大白 · TinyMCE编辑器v1.9_Xiuno Plugin_奇狐插件商店_奇狐网

    功能强大,所见即所得的富文本编辑器,本地部署速度快,附带Prism代码高亮插件,支持截图粘贴和手动上传图片,还可以编辑源代码. 版本说明 版本内容更新时间 1.0 版本初始化版本2020-03-14 ...

  3. vue3使用tinymce编辑器

    1.npm安装tinymce编辑器 npm install tinymce@^5.10.2 npm install @tinymce/tinymce-vue@^4.0.5 2.在public下面创建t ...

  4. tinymce编辑器实现视频上传功能

    1.思路:上传后把上传后的得到的地址追加到富文本. (注:我是用的是laui,原生js同理) 效果图: 2.具体代码: div代码部分 <!-- 富文本内容区 --><div cla ...

  5. tinymce--一款非常好用的富文本编辑器 VUE如何集成tinymce编辑器

    博客(coder的自我修养)原文链接:tinymce--一款非常好用的富文本编辑器 vue集成tinymce编辑器 - coder的自我修养 TinyMC编辑器简介 TinyMCE是一款易用.且功能强 ...

  6. ueditor html显示图片,百度ueditor编辑器上传图片后img标签的title、alt属性优化简单方法...

    <百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法>要点: 本文介绍了百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法,希望 ...

  7. ue编辑器拖拽上传图片_为百度UE编辑器上传图片添加水印功能

    前些日子把phpcms的内置编辑器改成了百度UE编辑器,非常好用,但是有个地方不是很满意,就是没法给上传的图片加水印了,经过一番研究终于实现了出来,分享给大家 UEditor编辑器上传图片是自动提取的 ...

  8. java ueditor 图片上传加水印_Ueditor编辑器上传图片加水印【亲测可用】-帝国CMS整合...

    Ueditor编辑器上传图片加水印 百度一下,有很多,但是方法都是一样的,写的不清不楚的.对于代码不是很了解的我们,却是头大.我整理了一下,下载下面的压缩包,解压缩之后,直接上传到  ueditor ...

  9. vue问题四:富文本编辑器上传图片

    vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...

  10. Flask博客开发——Tinymce编辑器

    之前Flask博客的文本编辑器比较简陋,这里为博客添加个优雅易用的Tinymce文本编辑器. github见:https://github.com/ikheu/my_flasky 1 项目中添加Tin ...

最新文章

  1. C++编译期多态与运行期多态
  2. ipmitool 设置网关_IPMI (Intelligent Platform Management Interface)
  3. CCF NOI1014 写评语
  4. 【转】使用Jmeter针对ActiveMQ JMS Point To Point压力测试
  5. linux 多个select,Linux select()和多个套接字的FIFO排序?
  6. 一些css3简单的练习
  7. 20200218:不同路径(leetcode62)
  8. 学习AccessibilityService实现微信抢红包插件
  9. 围棋棋盘有多少正方形 19*19
  10. 华为手机USB调试与Log
  11. 华中邀请四届 WHU1567 Sloth's Angry
  12. 小程序 - canvas绘制海报
  13. 22图详解ElasticSearch 使用教程
  14. 青柠开车Spring Cloud(七) —— 断路器 Hystrix
  15. API接口搜索商品列表的调用展示
  16. 浏览器对视频格式的支持
  17. Android Studio 更换/设置App应用图标Icon
  18. eBPF/XDP实现Conntrack功能
  19. FATAL_ERROR:Xst:Portability/export/Port_Main.h:126:1.13.
  20. Angular2+简单入门

热门文章

  1. gedit增加对指定文件格式(如qml)的识别和启用合适的语法高亮
  2. 用python简单处理图片(3):添加水印
  3. 神经网络入门之DNN(一)
  4. oracle里的or 短路么,Oracle CASE短路不能分组工作
  5. VHDL计算机硬件能直接执行吗,第5章 VHDL程序结构.ppt
  6. DevOps使用教程 华为云(15)git如何将本地项目初始化为远程仓库
  7. arm开发板放张图片动起来_Python与Zynq的桥梁,米尔PYNQ开发板来了
  8. 数据结构和算法——堆排序
  9. 基于SSM的学生宿舍管理系统
  10. LeetCode之Z字形变换