当前位置: 首页 > 编程日记 > 正文

07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器

LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui

LoT.UI开源地址如下:https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI

先看在LoT.UI里面的应用效果图:

完整Demo:(https://github.com/dunitian/LoTCodeBase/tree/master/NetCode/3.常用技能/03.Ueditor)

核心代码演示:

1.HTML部分:

2.Script部分(提交的时候最好清一下草稿箱)

net程序员注意点:(根目录的配置)(所有的都改下,这边就举例2处,下面是我的配置文件,仅供参考)

/* 前后端通信相关的配置,注释只允许使用多行方式 */
{/* 上传图片配置项 */"imageActionName": "uploadimage", /* 执行上传图片的action名称 */"imageFieldName": "upfile", /* 提交的图片表单名称 */"imageMaxSize": 2048000, /* 上传大小限制,单位B */"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */"imageCompressEnable": true, /* 是否压缩图片,默认是true */"imageCompressBorder": 1600, /* 图片压缩最长边限制 */"imageInsertAlign": "none", /* 插入的图片浮动方式 */"imageUrlPrefix": "", /* 图片访问路径前缀 */"imagePathFormat": "/UEUpload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 *//* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 *//* {rand:6} 会替换成随机数,后面的数字是随机数的位数 *//* {time} 会替换成时间戳 *//* {yyyy} 会替换成四位年份 *//* {yy} 会替换成两位年份 *//* {mm} 会替换成两位月份 *//* {dd} 会替换成两位日期 *//* {hh} 会替换成两位小时 *//* {ii} 会替换成两位分钟 *//* {ss} 会替换成两位秒 *//* 非法字符 \ : * ? " < > | *//* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename *//* 涂鸦图片上传配置项 */"scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */"scrawlFieldName": "upfile", /* 提交的图片表单名称 */"scrawlPathFormat": "/UEUpload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"scrawlMaxSize": 2048000, /* 上传大小限制,单位B */"scrawlUrlPrefix": "", /* 图片访问路径前缀 */"scrawlInsertAlign": "none",/* 截图工具上传 */"snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */"snapscreenPathFormat": "/UEUpload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"snapscreenUrlPrefix": "", /* 图片访问路径前缀 */"snapscreenInsertAlign": "none", /* 插入的图片浮动方式 *//* 抓取远程图片配置 */"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],"catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */"catcherFieldName": "source", /* 提交的图片列表表单名称 */"catcherPathFormat": "/UEUpload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"catcherUrlPrefix": "", /* 图片访问路径前缀 */"catcherMaxSize": 2048000, /* 上传大小限制,单位B */"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 *//* 上传视频配置 */"videoActionName": "uploadvideo", /* 执行上传视频的action名称 */"videoFieldName": "upfile", /* 提交的视频表单名称 */"videoPathFormat": "/UEUpload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"videoUrlPrefix": "", /* 视频访问路径前缀 */"videoMaxSize": 102400000, /* 上传大小限制,单位B,默认100MB */"videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 *//* 上传文件配置 */"fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */"fileFieldName": "upfile", /* 提交的文件表单名称 */"filePathFormat": "/UEUpload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */"fileUrlPrefix": "", /* 文件访问路径前缀 */"fileMaxSize": 51200000, /* 上传大小限制,单位B,默认50MB */"fileAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp",".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"], /* 上传文件格式显示 *//* 列出指定目录下的图片 */"imageManagerActionName": "listimage", /* 执行图片管理的action名称 */"imageManagerListPath": "upload/image", /* 指定要列出图片的目录 */"imageManagerListSize": 20, /* 每次列出文件数量 */"imageManagerUrlPrefix": "", /* 图片访问路径前缀 */"imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 *//* 列出指定目录下的文件 */"fileManagerActionName": "listfile", /* 执行文件管理的action名称 */"fileManagerListPath": "upload/file", /* 指定要列出文件的目录 */"fileManagerUrlPrefix": "", /* 文件访问路径前缀 */"fileManagerListSize": 20, /* 每次列出文件数量 */"fileManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp",".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"] /* 列出的文件类型 */
}

文件后缀:if (string.IsNullOrEmpty(extension)) { extension = ".jpg"; } //针对有些网站图片是:xxx.jpg?xxx/xxx/xxx 或者 xxx.aspx?id=123  后缀就为空了。你通过UE保存的图片也就没有后缀了,如果你IIS设置了则图片正常显示,没有设置就蛋疼了,所以还是加个默认格式吧

网络参考方法:(IIS显示没有后缀的图

显然,默认情况下IIS不支持对这种无任何后缀文件的解析,因为它无法识别这是普通的HTML文件,还是图片文件,抑或是其他类型的文件。从IIS 7.0版本开始,就已经支持相当多种的后缀名了,其机制是在“MIME类型”这个模块中完成的。如下图,这是IIS 8.0的界面,也同样适用于IIS 7.0/7.5/8.0/8.5,但不适用于IIS 6.0(IIS 6.0也可以设置MIME类型,只是界面不同)。

进入“MIME类型”模块后,我们点击右侧的“添加”,然后填好文件扩展名和类型值。对于无后缀的图片文件,扩展名只需填写“点”符号即可,类型值根据图片文件实际的扩展名填写。如果是jpeg格式的,那么就填写image/jpeg,同样的道理,也可以填写image/gif或image/png等。

这样,就完成了新MIME类型的设置。其实,设置MIME类型无需服务器管理员来操作,IIS 7.0以上的版本已经把这个功能放权给了站长。细心的人会发现,设置完成后,在站点根目录下多了一个web.config文件。稍微观察下就会发现,config文件里的XML代码就对应着我们刚才的设置。如果您还需要设置其他MIME类型的话,只需接着第一个mimeMap标记后继续编写即可。需要注意的是,自定义的设置不能和IIS默认已经提供的其他文件后缀名重复。

<?xml version="1.0" encoding="UTF-8"?>
<configuration><system.webServer><staticContent><mimeMap fileExtension="." mimeType="image/jpeg" /></staticContent></system.webServer>
</configuration>

开源组件:https://github.com/fex-team/ueditor

转载于:https://www.cnblogs.com/dunitian/p/5551701.html

相关文章:

workerman结合laravel开发在线聊天应用的示例代码

项目背景&#xff1a; 最近由于公司的业务需求&#xff0c;需要用到聊天功能。而且有比较多的个性化需求需要定制。之前使用别人的聊天组件是基于微擎的。如果要移植到普通的H5在逻辑修改还有定制上存在比较多的困难。为此只能克服困难&#xff0c;自己搭建一个吧 什么是Worker…

复杂系统设计 企业开发的困境

复杂系统设计源自我多年对企业复杂系统的设计的一些思考&#xff0c;类似日记吧&#xff0c;不断完善。 为什么从一个大公司的引入架构师甚至架构师组还是很难架构企业开发中的很多问题&#xff1f; 这些问题表现出架构上的复杂性&#xff0c;和业务上的复杂性。 有时候架构…

数据库服务器跟网站服务器间传输慢的问题

数据库服务器和网站服务器是分开的&#xff0c;现在从网站服务器这边查数据比较慢&#xff0c;什么原因&#xff1f;&#xff1f;&#xff1f; 一、首先确定服务器之间的网络有没有问题 可以简单的在网站服务器上ping数据库服务器&#xff08;反过来也可以&#xff09;&#xf…

【Python】百度贴吧图片的爬虫实现(努力努力再努力)

学会爬取图片以后&#xff0c;第一时间去了张艺兴吧&#xff0c;哈哈哈哈哈哈 一定要放上一张爬取的照片&#xff0c;哼唧 import reimport requestsimport urllibclass Baidutieba():def __init__(self):self.url "http://tieba.baidu.com/p/4876047826?pn{}"#u…

cin、cout的重载

一、cin重载 1.cin为ostream类的成员 2.cin重载应为全局函数&#xff08;毕竟ostream是别人写好的&#xff09; 3.代码 a.核心代码 ostream & operator<<(ostream &os,const A &a)//const A &a是为了避免复制函数的调用 &#xff1b;ostream &o 相当…

第二次冲刺第十天

第二次冲刺今天就结束了&#xff0c;这十天来学会了不少的东西。 简单说一下昨天做的&#xff1a;整合各个部件的功能。 今天&#xff1a;小组进行总结&#xff0c;加强性能。 这十天来遇到的问题&#xff1a; 一&#xff0c;对于网络云端&#xff0c;之前都是其他小组成员在使…

说透泛型类和泛型方法以及Class<T>和Class<?>的差异

泛型类和泛型方法看起来似乎可以实现类似的功能&#xff0c;但是很多人并未真正掌握泛型方法&#xff0c;网上很多文章说了很多还是似是而非&#xff0c;特别是初学者还是搞不明白。 一.关于泛型方法 1.泛型方法可以独立于泛型类 2.泛型方法等效于泛型类里泛型参数方法&…

win10 +python 3.6.4安装scrapy

第一步&#xff1a; 首先&#xff0c;我们先在电脑上安装好python3.6并且配置好环境变量&#xff0c;以可以直接在命令行界面输入python命令可以出现如图的界面为主。 第二步&#xff1a; 升级pip &#xff0c;在cmd窗口中会有提示&#xff0c;没有提示的话就已经是最新版本了…

7 种 Javascript 常用设计模式学习笔记

7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制&#xff0c;并不是 23 种设计模式都常用。 有的是没有使用场景&#xff0c;有的模式使用场景非常少&#xff0c;所以只是列举 7 个常见的模式 本文的脉络&#xff1a; 设计与模式5 大设计原则 7 种常见的设计…

从难免的线上bug说起代码的思考

经常是某司线上又出bug了&#xff0c;然后是给公司造成多少损失&#xff0c;追根究底总是可以找到一些原因&#xff0c;诸如&#xff1a;写代码逻辑考虑不全面&#xff0c;或者代码有硬伤&#xff0c;也有测试不充分&#xff0c;甚至不测试都有&#xff0c;也有是运维的问题等等…

PHP-Fpm应用池配置

//php.net php-fpm配置简介http://php.net/manual/zh/install.fpm.configuration.php//Global Options//pool defined[www]user nobodygroup nobodylisten 127.0.0.1:9000pm dynamicpm.max_children 5pm.start_servers 2pm.min_spare_servers 1pm.max_spare_servers 3s…

【Python】百度首页GIF动画的爬虫

今天百度首页的GIF动画很可爱&#xff0c;就想着用才学的爬虫爬取一下&#xff0c;虽然直接点击“图片另存为”就可以了 import requestsimport urllibclass Gif():def __init__(self):self.url "https://www.baidu.com/"self.headers {"User-Agent": …

CSS题目系列(3)- 实现文字切割效果

描述 有一天逛 Codepen 的时候&#xff0c;看到这么一个效果&#xff1a;将文字上下切开两半。 点进去看了一下代码&#xff0c;发现原理很简单&#xff0c;大概就是通过伪类使用attr()函数获取内容&#xff0c;然后进行定位。 你可以点下方链接查看效果&#xff1a; gd4ark.gi…

Java开发字符串JSON处理

需求很简单就是数据库存json。 数据库字段 varchar 入参request 定义 List<String> 如果不定义这个 而是定义String那么需要加"/转义比较难看 这样就只要入参传这个就行了&#xff1a; "xxxIds": ["33","44"], 数据库也是…

1.JSONObject与JSONArray的使用

参考文献&#xff1a; http://blog.csdn.net/huangwuyi/article/details/5412500 1.JAR包简介 要使程序可以运行必须引入JSON-lib包&#xff0c;JSON-lib包同时依赖于以下的JAR包&#xff1a; commons-lang.jarcommons-beanutils.jarcommons-collections.jarcommons-logging.ja…

【Python】Scrapy爬虫实战(豆瓣电影 Top 250)

今天一天都在弄Scrapy&#xff0c;虽然爬虫起来真的很快&#xff0c;很有效率&#xff0c;但是......捣鼓了一天 豆瓣电影 Top 250&#xff1a;https://movie.douban.com/top250 安装好的scrapy 在你想要的文件夹的目录下输入命令&#xff1a; scrapy startproject douban_m…

vmrun 批量创建vmware虚拟机

1 准备模板机 具体步骤如下&#xff1a; 1. 下载镜像安装系统 https://mirrors.aliyun.com/centos/7.5.1804/isos/x86_64/2. 安装完成配置好IP &#xff0c;关闭SELINUX ,关闭firewalld ,修改网卡名 3. 预设置好修改其他机器IP脚本 1.1 安装系统 略 1.2 模板机的设置 修改网卡名…

暗时间:开发效率为何如此低下

产品 开发 测试 三者都理解不一致。 产品怎么样表达出自己的诉求&#xff0c;是否写清文档就够了。 开发觉得自己沟通了&#xff0c;但是为什么测试一提测又许多问题。 测试的case看似都一起评审了。 而这样的结果必然是重新修修补补&#xff0c;怎么样事前把问题全部解…

【Python】Scrapy爬虫实战(传智播客老师简介)

在文件夹里创建一个爬虫项目 scrapy startproject ITcast 在spiders目录下&#xff1a; scrapy genspider itcast ------------------------------------------------------------------------------------------------------------------------------------------------------…

坑系列 --- 高可用架构的银弹

呵呵&#xff0c;题图是一队困在坑中的鸭子&#xff1a;&#xff09;作为一个搬砖的&#xff0c;我经常被困着。今天高考&#xff0c;想起15年前的今天&#xff08;哦&#xff0c;那时候是七月高考&#xff09;&#xff0c;恩&#xff0c;考完了&#xff0c;还不错&#xff0c;…

【TeeChart Pro ActiveX教程】(八):ADO数据库访问(上)

2019独角兽企业重金招聘Python工程师标准>>> 下载TeeChart Pro ActiveX最新版本 介绍 将TeeChart控件连接到ADO.NET数据库可以在设计时使用TeeChart编辑器完成&#xff0c;并在运行时使用几行代码完成。 任何Series都可以使用TeeChart Editor连接到ADO.NET表或查询。…

代码规范碎碎念

代码规范碎碎念 list条件多于2不要写命名上 controller (model-DTO) service (model) repository层 语义化构造 (entity->model) String转map 语义化数据结构 String转model 从数据库层增强语义 组装模型 DAO ( entity) mapper VO(admin) DTO(client) -------…

RRDTool原理简介

1.概述 RRDtool 代表 “Round Robin Database tool” &#xff0c;作者同时也是 MRTG 软件的发明人。官方站点位于http://oss.oetiker.ch/rrdtool/ 。 所谓的“Round Robin” 其实是一种存储数据的方式&#xff0c;使用固定大小的空间来存储数据&#xff0c;并有一个指针指向最…

【Python】Scrapy爬虫实战(腾讯社会招聘职位检索)

爬虫网页&#xff1a;https://hr.tencent.com/position.php 应用Scrapy框架&#xff0c;具体步骤就不详细说明&#xff0c;前面几篇Scrapy有一定的介绍 因为要涉及到翻页&#xff0c;下面的代码使用拼接的方式获取url&#xff0c;应用在一些没办法提取下一页链接的情况下 直…

一对一直播app源码功能操详解方案分享

一&#xff1a;登录页面&#xff1a;1.快捷登录&#xff1a;可以利用第三方账号进行快捷登录2.手机登录&#xff1a;可以让用户通过输入手机号码和密码进行登录.3.注册&#xff1a;可以使用手机号获取验证码注册账号二&#xff1a;打开一对一直播APP首页打开APP&#xff0c;会显…

从一个需求看问题的无限复杂化和简单化

一个需求 如果你一开始的出发点就错了&#xff0c;那么后续的设计只会非常复杂&#xff0c;而且还会有漏洞&#xff0c;也很难发现&#xff0c;发现了也很难解决。 先看数据结构&#xff1a; A表 主键id 其他各种字段不重要 &#xff0c;重要的就一个字段sort字段 aid1 …

使用自定义材质球,实现NGUI屏幕溶解和灰显

UITexture实现的溶解&#xff1a; 重设UITeture的材质球实现上述效果&#xff0c;把当前屏幕渲染的Texture2D丢给UITexture&#xff0c;即可实现UI屏幕特效&#xff0c;背景模糊等都可以。 难点主要是实时刷新问题 解决的比较粗暴&#xff0c;每次Update重设材质球&#xff0c;…

【Python】Tkinter 体验

import tkinter as tk root tk.Tk() root.title("work hard") #添加一个Label组件&#xff0c;Label组件是GUI程序中最常用的组件之一 #Label组件可以显示文本&#xff0c;图标或图片 #在这里我们让它显示指定文本 theLabel tk.Label(root,text"努力努力再努力…

debian手动安装java两种方法

2019独角兽企业重金招聘Python工程师标准>>> 方法一&#xff1a;下载后修改~/.bashrc文件 方法二&#xff1a;使用update-alternatives进行命令安装 相关配置记录 法一&#xff1a; 官网下载压缩包&#xff0c;解压&#xff0c;然后复制到/usr/lib/jvm目录下&#x…

【Python】Label组件 Button组件 Checkbutton组件

Label组件 Label组件是用于在界面上输出描述的标签。 #导入tkinter模块所有内容 from tkinter import *#创建一个主窗口&#xff0c;可以容纳整个GUI程序 root Tk() root.title("hhh")textLabel Label(root,text"努力努力再努力&#xff01;\n努力努力再努力…