kindeditor图片上传后生成带域名绝对路径配置及提交空格无法保存解决方法
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
解决Vue项⽬打包后打开index.html页⾯显⽰空⽩以及图⽚路径错误的问题Vue项⽬运⾏npm run build后会⽣成⼀个dist⽂件夹,我们⼀般都是把这个⽂件夹部署到服务器上。
dist⽂件夹⾥边有⼀个static⽂件和⼀个index.html页⾯,这个index就是最后单页⾯的最终⽂件。
问题⼀:我在打包完成后,打开index.html⽂件发现地址并没有携带路由。
这样的话页⾯就是空⽩了,因为没有组件被添加到页⾯中。
打开F12会看到⼀堆的红⾊failed请求。
打开请求地址是这样的。
进⼊D盘就开始寻找static⽂件夹当然是找不到的。
既然知道了是打包之后寻找⽂件的地址错误,就去config⽂件夹下的index.js中寻找问题。
index.js中的build命令的配置有⼀个属性叫assetsPublicPath,它的值为‘/'。
意思是根⽬录,这时会从index.html所在的硬盘的根⽬录下开始查找,⾃然⽆法找到。
解决办法:改为‘./'这时就不再是绝对路径的根⽬录了,⽽是改为了相对路径,同⽬录下进⾏查找。
再次打包,页⾯基本正常。
问题⼆:我再次打包后,页⾯可以正常打开。
但是页⾯上的⼀些图⽚请求失败。
我这⾥请求失败的都是背景图⽚,⽽且只是某⼀些失败。
我⼀直有⼀个疑惑就是为什么同⼀个css⽂件中的背景图⽚请求有的成功有的失败,要知道我的图⽚都是放在同⼀个⽂件夹下边的。
⽬前这个疑惑还没有解决。
打开某⼀个失败的请求,我们会发现请求的路径是这样的。
也就是说这个css⽂件是从当前⽂件夹下往⾥寻找static/img/XXX.png,要知道static⽂件夹是在dist根⽬录下边的,因此,我们需要修改build的全局配置,改变css⽂件的⽂件请求路径。
css⽂件在static⾥边的css⽂件夹中,因此需要先‘../../'出到dist根⽬录下,然后再static/img/XXX.png,就可以正确找到对应的图⽚⽂件。
【Dreamweaver绝对路径和相对路径】 相对路径 绝对路径
【Dreamweaver绝对路径和相对路径】相对路径绝对路径在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念。
1.绝对路径绝对路径是指文件在硬盘上真正存在的路径。
例如"bg.jpg"这个图片是存放在硬盘的"E:\book网页布局代码第2章"目录下,那么"bg.jpg"这个图片的绝对路径就是"E:\book网页布代码第2章\bg.jpg”。
那么如果要使用绝对路径指定网页的背景图片就应该使用以下语句:2.使用绝对路径的缺点事实上,在网页编程时,很少会使用绝对路径,如果使用"E:\book网页布代码第2章\bg.jpg"来指定背景图片的位置,在自己的计算机上浏览可能会一切正常,但是上传到Web服务器上浏览就很有可能不会显示图片了。
因为上传到Web服务器上时,可能整个网站并没有放在Web服务器的E盘,有可能是D 盘或H盘。
即使放在Web服务器的E盘里,Web服务器的E盘里也不一定会存在"E:\book网页布局代码第2章"这个目录,因此在浏览网页时是不会显示图片的。
3.相对路径为了避免这种隋况发生,通常在网页里指定文件时,都会选择使用相对路径。
所谓相对路径,就是相对于自己的目标文件位置。
例如上面的例子,"s1.htm"文件里引用了"bg.jpg"图片,由于"bg.jpg"图片相对于"s1.htm"来说,是在同一个目录的,那么要在"s1.htm"文件里使用以下代码后,只要这两个文件的相对位置没有变(也就是说还是在同一个目录内),那么无论上传到Web服务器的哪个位置,在浏览器里都能正确地显示图片。
再举一个例子,假设"s1.htm"文件所在目录为"E:\book网页布局代码第2章",而"bg.jpg"图片所在目录为"E:\book网页布局代码第2章img",那么"bg.jpg"图片相对于"s1.htm"文件来说,是在其所在目录的"img"子目录里,则引用图片的语句应该为:注意:相对路径使用"/"字符作为目录的分隔字符,而绝对路径可以使用""或"/"字符作为目录的分隔字符。
kindeditor路径的修改
这样,保存地址就变成了 根目录下的 uploadfiles/年月日/xxxxx.jpg了。
//文件保存目录路径
$save_path = $_SERVER['DOCUMENT_ROOT'].'\\uploadfilesl = '/uploadfiles/';
解释一下:$save_path 即为最后保存文件的目录。这里就是根目录下的uploadfiles
默认情况下kindeditor上传的图片在编辑器的根目录/attached/目录下。以日期建一个目录,然后保存文件。有些时候大概我们并不想这样。考虑到更新编辑器,或更换编辑器不太方便。比如我现在想把上传的文件保存在根目录下的uploadfiles目录下,需要修改以下代码:
首先,打开文件php\upload_json.php,在大约第16行到第19行,定义了文件保存目录路径和文件保存目录URL,我们需要修改为:
KindEditor使用手册
KindEditor使用手册一简单使用方法1.把所有文件上传到程序所在目录下,例如:http://你的域名/editor/。
2.在此目录下创建attached文件夹,并把权限改成777。
3.要添加编辑器的地方加入以下代码。
(原来的TEXTAREA或其它编辑器可以先注释。
)这里[]里的内容要根据你的实际情况修改。
-----------------------------------------------------------------------<input type="hidden" name="[原TEXTAREA名字]" value="[这里放你要编辑的内容]"><script type="text/javascript" charset="utf-8"src="[JS路径]/KindEditor.js"></script><script type="text/javascript">var editor = new KindEditor("editor"); //创建编辑器对象editor.hiddenName = "[原TEXTAREA名字]"; editor.editorWidth = "[编辑器宽度,例如:700px]"; editor.editorHeight = "[编辑器高度,例如:400px]"; editor.show(); //显示//提交时获得最终HTML代码的函数function KindSubmit() {editor.data();}</script>----------------------------------------------------------------------- 4.FORM的onsubmit属性里添加KindSubmit()函数。
UEditor编辑器控件上传配置(解决选择保存目录:正在读取目录...的问题)
项目结构如下ueditor目录直接放在网站的根目录。
在aspx页面的<head></head>里引用js<script src="ueditor/ueditor.config.js" type="text/javascript"></script> <script src="ueditor/ueditor.all.js" type="text/javascript"></script>在<body></body>中初始化显示编辑框控件<div><script id="editor" type="text/plain" style="width: 1024px; height: 500px;"></script><script type="text/javascript">UE.getEditor('editor');</script></div>此时浏览网页已经可以看到编辑器控件已经显示出来了。
下面我们尝试上传图片,结果发现提示”选择保存目录:正在读取目录...“无法列出上传目录,则无法上传图片,尝试上传图片就会提示这个”请等待保存目录就绪“如何解决这个问题呢?下面我们找到ueditor/net/imageUp.ashx把最顶部的2行代码删除<%@ Assembly Src="Uploader.cs" %><%@ Assembly Src="Config.cs" %>刷新一下页面,此时已经可以正常的读出目录并可以正常上传图片了成功上传一张图片,插入到编辑器中,但是无法正确显示刚刚上传的图片。
js控件Kindeditor实现图片自动上传功能
js控件Kindeditor实现图⽚⾃动上传功能Kindeditor本⾝提供了许多⾮常实⽤的插件,由于代码开源,开发⼈员可以根据需要对其进⾏任意扩展和修改。
在使⽤Kindeditor编辑⽹站内容时考虑这样⼀个场景:编辑⼈员往往会从其它页⾯或者Word⽂档将内容复制到Kindeditor编辑器中,⽽不会从⼀张⽩纸开始编写内容。
如果所复制的内容中包含图⽚,则需要⾸先将图⽚从源地址下载到本地,然后将其上传到本⽹站所在的服务器,否则图⽚仍然会指向你所复制的页⾯或者⽂档,这会导致图⽚可能在页⾯中⽆法正确打开。
编辑⼈员往往要处理许多的⽂档,这样的操作⽆疑⾮常繁琐。
能否让Kindeditor⾃动识别粘贴到其中的内容,并将图⽚⾃动上传到服务器呢?下⾯的代码实现了这⼀功能。
有关如何在页⾯中使⽤Kindeditor可以去查看官⽅⽹站的⽂档,这⾥不再详细介绍。
实现该功能的基本思路:在Kindeditor编辑器的keyup事件中添加代码,以检查编辑器的内容中是否包含图⽚;找出需要⾃动上传到服务器的图⽚,通过Ajax⽅式调⽤图⽚上传程序将图⽚上传到服务器;在Ajax的回调函数中将对应图⽚的src地址修改为本地相对地址。
该功能不⽀持将Word中的图⽚复制出来并上传到服务器。
上图是最终实现效果。
程序会⾃动识别编辑器中的内容,如果有图⽚需要上传,则会在编辑器的顶部显⽰⼀条提⽰信息。
⽤户点击“上传”链接,程序会通过Ajax请求调⽤图⽚上传程序,并在回调函数中将对应图⽚的src地址修改为本地相对地址。
具体实现步骤及相关代码:1. Kindeditor编辑器修改找到kindeditor.js⽂件,在keyup()事件中添加⾃定义代码。
不同版本的Kindeditor所提供的代码差别可能会⽐较⼤,需要借助于官⽅⽂档进⾏查找。
本⽂基于Kindeditor 4.1.10版本。
2. auto.js⽂件代码function df() {var haspicContainer = document.getElementById("has_pic");if (haspicContainer == null) {haspicContainer = document.createElement("div");haspicContainer.id = "has_pic";haspicContainer.innerHTML = "<input type='text' id='piclist' value='' style='display:none;'/><div id='upload'><b>您有图⽚需要上传到服务器</b> <a href='javascript:uploadpic();' >上传</a></div><div id='confirm'></div>"; $(".ke-toolbar").after(haspicContainer);}var img = $(".ke-edit-iframe").contents().find("img");var piccount = 0;var sstr = "";$(img).each(function (i) {var that = $(this);if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {piccount++;if (i == $(img).length - 1)sstr += that.attr("src");elsesstr += that.attr("src") + "|";}});$("#piclist").val(sstr);document.getElementById("has_pic").style.display = (piccount > 0) ? "block" : "none";}function closeupload() {$("#has_pic").hide();$("#upload").show();}function uploadpic() {var piclist = encodeURI($("#piclist").val());if (piclist.length == 0) return false;$.ajax({url: "/uploadpic.ashx",data: "pic=" + piclist,type: "GET",beforeSend: function () {$("#upload").hide();$("#confirm").text("正在上传中...");},success: function (msg) {if (msg !== "") {var str = new Array();str = msg.split('|');var img = $(".ke-edit-iframe").contents().find("img");$(img).each(function (i) {var that = $(this);if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {that.attr("src", "/uploads/image/" + str[i]);that.attr("data-ke-src", "/uploads/image/" + str[i]);}});$("#confirm").html(img.length + "张图⽚已经上传成功! <a href='javascript:closeupload();'>关闭</a>");}else $("#confirm").text("上传失败!");}});}其中的$(".ke-edit-iframe").contents().find("img")⽤来查找编辑器内容中的所有图⽚。
彻底解决asp中KindEditor编辑器无法获得提交的数据
彻底解决asp中KindEditor编辑器无法获得提交的数据问题1. 修改HTML页面1在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id"name="content"style="width:700px;height:300px;"><strong>HTML内容</strong></textarea>Note∙id在当前页面必须是唯一的值。
∙在textarea里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、等)直接显示内容,则必须转换HTML特殊字符(>,<,&,”)。
具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、、PHP、JSP。
∙在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。
宽度和高度可用inline样式设置,也可用编辑器初始化参数设置。
2在该HTML页面添加以下脚本。
<script charset="utf-8"src="/editor/kindeditor.js"></script><script charset="utf-8"src="/editor/lang/zh_CN.js"></script><script>var editor;KindEditor.ready(function(K){editor = K.create('#editor_id');});</script>Note∙第一个参数可用其它CSS选择器,匹配多个textarea时只在第一个元素上加载编辑器。
百度ueditor富文本--图片保存路径的配置以及上传到远程服务器
百度ueditor富⽂本--图⽚保存路径的配置以及上传到远程服务器我们在上篇⽂章中学习了上传图⽚的配置:百度ueditor富⽂本--配置图⽚上传在⽂章的最后讲到 ueditor 默认设置的保存图⽚的路径是相对路径,项⽬相关的。
保存的图⽚会放在tomcat的webapp⽬录下的项⽬⽂件夹中。
F:\tomcat7\webapps\ROOT这样的配置会导致重启 tomcat后保存的图⽚丢失。
解决⽅法⼀修改图⽚保存路径在tomcat的webapp中项⽬之外修改了config.json中的imagePathFormat参数重新设置图⽚保存路径,⽐如:"imagePathFormat": "/../temp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以⾃定义保存路径和⽂件名格式 */我们这⾥在原路径上加了/../temp。
意思是项⽬路径ROOT⾥的的上⼀级路径,也就是路径设置为项⽬之外,webapp中。
如图:F:\tomcat7\webapps\temp\ueditor\jsp\upload\image\20170825需要注意的是:⼀、图⽚保存路径在项⽬之外最好先新建好⽂件夹,不然第⼀次上传图⽚时创建⽬录速度会⽐较慢,会导致⾸张图⽚回调找不到图⽚404。
图⽚保存的路径最好在tomcat的webapp⽂件夹中,这样我们才能访问到图⽚。
如果图⽚不在Webapp⽬录下的,需要做做映射才能访问图⽚,回调显⽰图⽚才能成功。
UEditor后端保存图⽚到⽬标位置之后,返回前端⼀个url。
前端根据url,去取图⽚,取不到。
如果想把图⽚存储到⾮Webapp等硬盘⽬录,⽐如C:/img,需要⼿动修改controller.jsp的rootPath[java] view plain copy print?1. <%@ page language="java" contentType="text/html; charset=UTF-8"2. import="com.baidu.ueditor.ActionEnter"3. pageEncoding="UTF-8"%>4. <%@ page trimDirectiveWhitespaces="true" %>5. <%6.7. request.setCharacterEncoding( "utf-8" );8. response.setHeader("Content-Type" , "text/html");8. response.setHeader("Content-Type" , "text/html");9.10. //String rootPath = application.getRealPath( "/" );11. String rootPath = "c:/img";12. System.out.print(rootPath);13. out.write( new ActionEnter( request, rootPath ).exec() );14.15. %>图⽚保存在项⽬的外⾯,⽐如C:/img,前端请求不可能直接访问到,需要做映射。
kindeditor图片上传后生成带域名绝对路径配置及提交空格无法保存解决方法
kindeditor图片上传后生成带域名绝对路径配置方法kindeditor默认上传图是不带域名域名绝对路径了,如果我们希望生成之后带上域名就需要进入urlType进行设置了,我们kindeditor中的urlType有几个参数默认这空值”“、”relative”、”absolute”、”domain”了。
关键在于初始化kindeditor时指定以下参数:urlType”“ 空为不修改URL”relative”相对路径”absolute”绝对路径”domain”带域名的绝对路径。
============================================================================== 关于kindeditor提交空格问题的解决办法版本4.1.10问题反馈:后台编辑器段首空格无法正常保存到数据库。
变通办法:早期,通知用户使用全角空格,但后面发现提交后显示正常,再次编辑时未出现空格。
最终解决办法:修改kindeditor.js 725行部分我公司调整后的js行数为752行将本行修改为:var re =/([ \f\n\r\t\v]*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\ s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>([ \f\n\ r\t\v]*)/g;就是把第一个和最后一个\s 替换成[ \f\n\r\t\v]修改前请注意备份。
百度编辑器ueditor更改图片和附件上传路径的方法
百度编辑器ueditor更改图⽚和附件上传路径的⽅法默认UEditor上传图⽚的路径是,编辑器包⽬录⾥⾯的net⽬录下下⾯就演⽰如何修改图⽚和附件的上传路径,先看效果:步骤1.⾸先修改ueditor.config.js⽂件,如下图,红⾊框即为修改后的效果。
说明:1.imagePath:是⽤来显⽰图⽚上传成功后,编辑器⾥图⽚的预览效果。
如果此路径出错,那么在编辑器中就⽆法预览到我们刚上传图⽚。
可以查看HTML代码查看路径。
2.savePath:这个就是我们上传图⽚时选择的选择保存⽬录,这个需要和Config.cs⾥⾯保持⼀致,否者报:⾮法上传⽬录。
另外本⽬录在imageUp.ashx中保存⽂件时⽤到的。
见步骤2中红⾊框⾥⾯的path。
3.filePaht:和imagePath类似,⽤来附件上传后,在编辑器⾥显⽰的附件的路径。
如果有问题,发布后将⽆法下载附件。
步骤2.修改imageUp.ashx,如下图,红⾊框中即为修改后的效果。
注意箭头所指,如果你遇到类似错误,那么就说明你没有修改Config.cs ⽂件(见步骤2).说明:1,上图箭头所指的⾮法上传⽬录,是编辑器验证图⽚上传的路径,以防⽌恶⼈修改js代码,⾮法乱上传。
要防⽌出现这个问题,就要保证ueditor.config.js中图⽚上传区域中的savePath和config.cs中保持⼀致。
2.红⾊框即为图⽚保存的磁盘路径,注意,path(这⾥相当于ueditor.config.js中图⽚上传区域中的savePath中指定的upload)前加了’/’是为了保证图⽚存放的位置是根⽬录下指定⽂件夹upload,后⾯硬编码了upload下⾯的images⽂件夹。
步骤3.修改Config.cs⽂件,见下图。
因为步骤1中我们修改了ueditor.config.js中图⽚上传配置区图⽚保存路径,所以这⾥也需要修改否则会报:⾮法上传⽬录注意,这⾥就⾮常简单了,就是服务器端验证图⽚上传路径,以防⽌恶⼈通过脚本修改来⽽已上传。
Ckeditor缺少图像源文件地址的解决由错误测试位置引起
Ckeditor缺少图像源⽂件地址的解决由错误测试位置引起Ckeditor本⽂是关于CKEditor ⽆法上传图⽚问题的⼀个解决。
⼤致写了⼀下遇到问题的过程,问题的出处,怎么解决的,原因是什么。
希望能够帮到有需要的⼤家,有些时候找不到问题的答案,真的是会让⼈神魂颠倒。
Ckeditor是新⼀代的FCKeditor,是⼀个重新开发的版本。
Ckeditor是全球最优秀的⽹页在线⽂字编辑器之⼀,因其惊⼈的性能与可扩展性⽽⼴泛的被运⽤于各⼤⽹站。
今天在给⾃⼰的博客项⽬上添加ckeditor时,进⾏了⼀些测试。
出现了缺少图像源⽂件地址的问题!在ckeditor的配置⽂件中,添加上关联ckfinder的代码,当然我们也要有ckfinder,就可以使⽤上传的功能了。
在ckedittor的配置⽂件 config.js 中加⼊连接的配置代码。
放到最后就好了。
// 载⼊CKfinderconfig.filebrowserBrowseUrl = '/App/Back/Public/ckfinder/ckfinder.html';config.filebrowserImageBrowseUrl = '/App/Back/Public/ckfinder/ckfinder.html?Type=Images';config.filebrowserFlashBrowseUrl = '/App/Back/Public/ckfinder/ckfinder.html?Type=Flash';config.filebrowserUploadUrl = '/App/Back/Public/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';config.filebrowserImageUploadUrl = '/App/Back/Public/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';config.filebrowserFlashUploadUrl = '/App/Back/Public/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';成功后:但是到了上传⽂件的时候,这个编辑器总是会卡死,在上传处出现⼀些隐蔽的代码。
kindeditor在designer图片不能上传暂时解决方法(原创)
Kindeditor插件在designer中图片不能上传的解决方案一、开发环境Designer、vs2008、firefox以及firefox的插件firebug二、解决过程1.用vs打开designer生成的项目,右击包含kindeditor的页面aspx文件,选择“在浏览器中查看”,默认用IE浏览器打开,从地址栏复制打开的地址,然后打开firefox浏览器,把地址粘贴到firefox的地址栏里,然后如下打开firefox的firebug插件,操作如图(也可以使用快捷键F12)然后选择网络-HTML,如图所示点击kindeditor中的图片上传按钮打开上传的对话框,并选择本地上传,点击浏览选择一张图片,并选择打开然后点击确定,查看firebug的post内容仔细观察看到post的地址与vs中创建的项目的post地址略有不同,如图可以明显的看到designer生成的项目post地址多了editor/plugins/,致使找不到upload_json.ashx这个后台处理文件,最简单的解决办法就是按照这个路径给其添加上相关的文件,根据这个想法,我们进行第二步2.打开designer的项目文件夹,找到editor文件夹,复制一份,然后打开editor文件夹下的plugins文件夹,将editor文件夹粘贴,然后再次运行程序便能够上传图片了,如图应该注意的问题,如此改动文件夹后图片的上传路径不再是editor/attched了,而是改为了editor/plugins/editor/attched在此加以说明,designer项目中上传图片post路径多了editor/plugins肯定有其他原因,此解决方法只是暂时用来解决图片上传问题,不是最终有效的办法,改进工作仍在进行中Author:王洪贺。
绝对路径指带有域名的,文件的完整路径
绝对路径是指带有域名的文件的完整路径。
在互联全球信息站,每个资源都有一个唯一的绝对路径,通过这个路径可以准确地定位到该资源所在的位置。
绝对路径是由协议、域名、路径和文件名组成的,可以精确地描述一个文件的位置,不会因为环境的变化而发生改变。
绝对路径的作用非常广泛,它可以用来指定网页中的图片、样式表、脚本等资源的位置。
在网页编程中,如果使用相对路径来引用这些资源,可能会受到网页所在位置的影响,造成资源无法加载的问题。
而使用绝对路径则可以保证资源的准确加载,提高网页的稳定性和可靠性。
绝对路径的格式通常为:协议://域名/路径/文件名其中,协议是指资源的传输协议,常见的有网络协议、网络协议s、ftp等;域名是指资源所在的主机名,可以是IP位置区域或者域名;路径是指资源所在的目录路径,文件名是指资源的具体文件名。
通过这些组成部分,可以唯一地确定一个资源的位置,使得网络上的各种资源能够准确地被访问和加载。
绝对路径的使用需要注意一些问题。
要确保路径的准确性,包括协议、域名、路径和文件名等各个部分都需要正确无误。
要考虑资源所在的服务器的可靠性和稳定性,以确保资源能够被稳定地访问和加载。
另外,还需要考虑资源的安全性,以防止恶意的攻击和篡改。
绝对路径是互联全球信息站资源定位的重要方式,通过绝对路径可以准确地确定一个资源的位置,从而确保资源能够被准确地访问和加载。
在网页编程和全球信息站建设中,合理地使用绝对路径可以提高网页的稳定性、可靠性和安全性,是网络资源管理的重要工具之一。
很多网页开发者和全球信息站管理员都清楚,绝对路径在指定资源位置时非常重要。
它不仅在网页编程中起着关键作用,同时也对网络安全和用户体验产生着深远影响。
1. 绝对路径在网页开发中的重要性在网页开发中,使用绝对路径可以准确地指定网页所需资源的位置,包括图片、样式表、脚本等,从而确保这些资源能够被正确地加载。
相对路径有时会因为网页所在位置的变化而导致资源无法加载的问题,而绝对路径可以解决这一困扰,确保网页的稳定性和一致性。
关于Kindeditor编辑器上传图片文件的几个问题汇总(asp)
技术积累 - 关于Kindeditor编辑器上传图片文件的几个问题汇总(asp)[摘要]:我想做网站开发的程序员们对Kindeditor编辑器并不陌生的吧,它是一款非常强大的编辑器,轻量级的。
结合纯jQuery+CSS写成的,部署环境起来非常的简单方面快捷。
在Kindeditor的官方网站上面供下载的Demo,不过里头默认的都是php方面的demo。
那么asp的大神些如何能够实用在自己的网站项目中去呢?我们需要做如下几点。
1、设置负责文件上传asp文件的路径设置这个路径值我们可以设置两个地方:1)、/kindeditor/plugins/images/image.js内的第15行,修改为如下图中所示2)、修改kindeditor所嵌入的页面,写上上传文件asp的地址,最好写相对路径,不要使用.../这样的形式2...我想做网站开发的程序员们对Kindeditor编辑器并不陌生的吧,它是一款非常强大的编辑器,轻量级的。
结合纯jQuery+CSS写成的,部署环境起来非常的简单方面快捷。
在Kindeditor的官方网站上面供下载的Demo,不过里头默认的都是php 方面的demo。
那么asp的大神些如何能够实用在自己的网站项目中去呢?我们需要做如下几点。
1、设置负责文件上传asp文件的路径设置这个路径值我们可以设置两个地方:1)、/kindeditor/plugins/images/image.js内的第15行,修改为如下图中所示2)、修改kindeditor所嵌入的页面,写上上传文件asp的地址,最好写相对路径,不要使用.../这样的形式2、修改upload_json.asp文件'上传成功返回true,否则返回falseresult = file.saveToFile(savePath, 0, true)if result = false thenresponse.Write("")response.Endend if3、修改Upload_Class.asp文件修改Upload_Class.asp内的saveToFile函数内的518行和520行如下If Not Err ThenSaveToFile = trueElseSaveToFile = falsemException=Err.DescriptionEnd If。
kindeditor详细使用说明
kindeditor详细使用说明1.下载KindEditor 最新版本。
打开下载页面2. 解压zip文件,将所有文件上传到您的网站程序目录下。
例如:http://您的域名/editor/3.在需要显示编辑器的位置添加TEXTAREA输入框。
id在当前页面必须是唯一的值,还有,在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。
宽度和高度可用inline样式设置,也可用编辑器初始化参数设置。
在TEXTAREA里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、等)直接显示内容,则必须转换HTML特殊字符(>,<,&,")。
具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、、PHP、JSP。
<textarea id="editor_id" name="content" style="width:700px;height:300px;"><strong>HTML内容</strong></textarea>4.在该HTML页面添加以下脚本。
<script charset="utf-8" src="/editor/kindeditor.js"></script><script> KE.show({ id : 'editor_id' });</script>注:KE.show的原理是先执行KE.init设置一些变量,等DOM全部创建以后才开始执行KE.create创建编辑器。
如果浏览器不触发DOMContentLoaded事件(例如:jQuery的$.ready,点击某个按钮,通过innerHTML插入HTML等),则不能使用KE.show,需要直接调用KE.init和KE.create。
jsp修改fckeditor上传图片路径_绝对路径的修改
jsp修改fckeditor上传图片路径绝对路径的修改我们这里讨论的是绝对路径的修改。
如果你需要该相对路径只需要改<param-value>UserFiles/</param-value> 里的值就可以了fckeditor对jsp支持一般般,要配置一大堆,网上都是类似的文章,就不复述了,如何修改上传文件的路径,却一直没有解决方法,找了半天,最后只有自己哼哧哼哧的改由于fckeditor默认的上传路径是自己工程环境下,/UserFiles,是在web.xml里配置的1.<init-param>2.<param-name>baseDir</param-name>3.<param-value>UserFiles/</param-value> *这里少了一个 /4.</init-param>这里没法改成绝对路径,所以只有到servlet里想办法,找到类fffinit方法里的参数获取不要管,主要是在doGet()里面String currentPath=baseDir+typeStr+currentFolderStr;String currentDirPath = getServletContext().getRealPath(currentPath);这个是原来的写法取的就是当前项目webcontent下的/UserFiles/这里改成String currentPath=baseDir+typeStr+currentFolderStr;currentPath=currentPath.replace('\\','/');String currentDirPath="你需要存放文件的绝对路径"+currentPath;如String currentDirPath="d:/dweb_box/"+currentPath; *这里多了一个/下面还要改原来的写法如下Noderoot=CreateCommonXml(document,commandStr,typeStr,currentFolderStr,req uest.getContextPath()+currentPath);这里改成Noderoot=CreateCommonXml(document,commandStr,typeStr,currentFolderStr,"你需要存放文件的tomcat应用的相对路径"+currentPath);如Noderoot=CreateCommonXml(document,commandStr,typeStr,currentFolderStr,"/d web_box/"+currentPath);* 和tomc应用的path="/dweb_box" 对应doPost()方法里currentPath和currentDirPath改法与doGet一致servlet里只需要改这么多就可以了注意哈如果你上传文件后还是看不到很可能是你的存放文件的路径没有配置成tomcat 应用如上面的例子<Context displayName="dweb_box" docBase="d:/dweb_box"path="/dweb_box"></Context>如有疑问和遗漏请留言给我。
vue打包静态资源后显示空白及static文件路径报错的解决
vue打包静态资源后显⽰空⽩及static⽂件路径报错的解决今天使⽤vue打包(npm run build)遇到了⼏个坑,在这⾥分享给⼤家打包之后打开dist的页⾯显⽰空⽩:这个问题以前就处理过,是打包过程中出现错误频率较⾼的⼀种,可能有3处地⽅会出现这种情况1、记得改⼀下config下⾯的index.js中bulid模块导出的路径。
因为打包后的index.html⾥边的内容都是通过script标签引⼊的,默认显⽰的路径不对,打开肯定是空⽩的。
build: {index: path.resolve(__dirname, '../dist/index.html'),assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',productionSourceMap: true,devtool: '#source-map',productionGzip: false,productionGzipExtensions: ['js', 'css'],bundleAnalyzerReport: process.env.npm_config_report}这⾥需要将 assetsPublicPath: '/'改为assetsPublicPath: './',2.src⾥边router/index.js路由配置⾥边默认模式是mode:'hash'(页⾯会在路由上加#),有时候改成了history(纯净路由)模式的话,打开也会是⼀⽚空⽩。
所以改为hash或者直接把模式配置删除,让它默认的就⾏。
export default new Router({//mode: 'history',mode:'hash',\\或者直接不写routes: [{}])}3.也有可能是因为背景图⽚路径没有配置需要在build/utils.js添加配置publicPath: '../../'if (options.extract) {return ExtractTextPlugin.extract({use: loaders,publicPath:'../../',fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}打包后找不到响应路径:这都是⽐较常见的⼏种解决⽅式,如果将静态资源的图⽚路径作为绑定数据以js引⼊,图⽚放⼊了static⾥⾯⽤来引⼊这个页⾯⼜该怎样处理呢,如果以绝对路径访问vue打包是不会处理这⼀类的,所以打包后它图⽚访问的路径不会更改,⽽打包后dist ⽂件⾥就只有index.html和webpack不会处理的static⽂件夹(vue static/下的⽂件都不会被Webpack处理:它们使⽤相同的⽂件名,直接拷贝到最终的路径)解决⽅式有两种,1.如果要上线的话,需要将你的主域名加在static之前然后他会逐级去访问打包后的⽂件。
记录下tinymce编辑器遇到的问题
记录下tinymce编辑器遇到的问题
最近需要使⽤编辑器,选了这款,说实话⼀般般,凑合⽤
下⾯记录下问题
1.编辑器不出来
引⼊⽪肤样式
import 'tinymce/skins/ui/oxide/skin.css'
2.icons报错
引⼊图标库
import 'tinymce/icons/default/icons'
3.语⾔包报错
本地路径,需要require引⽤
language_url: require('/static/tinymce/langs/zh_CN.js')
4.显⽰本地上传图⽚
init添加images_upload_handler函数即可,但是点击还是要切换下,以后再研究吧
images_upload_handler: (blobInfo, success, failure) => {
5.关于存在两个视频的情况(补充)
问题
这个主要就是css的问题,添加编辑器后,会⾃动引⼊下⽅样式,是从根⽬录的static查找,问题就是根⽬录访问不到static的⽂件
点击后视频后下⽅显⽰出⼀个,其实就是css未⽣效
解决
不要设置skin_url(除⾮要设置其他⽪肤样式,这⾥暂不讨论)
public⽬录新增static
把需要的两个css放⼊就可以了
ps:假如封装了组件,建议传对象赋值,否则就要监听回传;项⽬需要使⽤多个编辑器的话,去除editor的id,不然渲染失败。
安装请另⾏参考。
。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
kindeditor图片上传后生成带域名绝对路径配置方法
kindeditor默认上传图是不带域名域名绝对路径了,如果我们希望生成之后带上域名就需要进入urlType进行设置了,我们kindeditor中的urlType有几个参数默认这空值”“、”relative”、”absolute”、”domain”了。
关键在于初始化kindeditor时指定以下参数:
urlType
”“ 空为不修改URL
”relative”相对路径
”absolute”绝对路径
”domain”带域名的绝对路径。
============================================================================== 关于kindeditor提交空格问题的解决办法
版本4.1.10
问题反馈:后台编辑器段首空格无法正常保存到数据库。
变通办法:早期,通知用户使用全角空格,但后面发现提交后显示正常,再次编辑时未出现空格。
最终解决办法:
修改kindeditor.js 725行
部分我公司调整后的js行数为752行
将本行修改为:
var re =
/([ \f\n\r\t\v]*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\ s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>([ \f\n\ r\t\v]*)/g;
就是把第一个和最后一个\s 替换成[ \f\n\r\t\v]
修改前请注意备份。