导航:首页 > 文字图片 > ckeditorword上传图片

ckeditorword上传图片

发布时间:2022-09-27 15:19:26

1. ckeditor上传图片时却显示“缺少图像源文件地址”,求助~

缺少图像源文件地址,就是图片的地址,就是你没有引用过来,或者你没有加上去,<img sre="图片地址"/>可能就是某个地方少了这句话,对你有用的就采纳一下!谢谢

2. 谁能告诉我怎样在ASP CKEditor 中实现上传图片功能

1、项目先新建Lbrary文件夹跟js文件夹(js小写)并在js文件夹下,在简历ckeditor和ckfinder文件夹,压缩包找到其中/bin/Debug下的CKEditor.NET.dll考到新建的文件夹下,如后在引用中右键添加对刚才的CKEditor.NET.dll的引用,如图:

3. ckeditor编辑器如何做复制图片上传(包括本地图片及远程图片),以插件方式实现

这个复制图片到编辑器中的问题 是跟浏览器有关系的.IE浏览器是不支持的 .firefox浏览器是支持的.但是firefox是将图片给解析成base64的大字符串而不是图片路径.

4. ckeditor 4.1 调试成功后,发现没有上传图片功能,如果配置出来呢

CKeditor可以配合CKfinder实现文件的上传及管理。但是往往我们上传的图片需要某些自定义的操作,比如将图片路径写入数据库,图片加水印等等操作。
实现原理:配置CKeditor的自定义图标,单击弹出一个子窗口,在在子窗口中上传图片实现我们的自己的功能,然后自动关闭子窗口将图片插入到CKeditor的当前光标位置。
实现步骤:
1、配置CKeditor。网上很多资料,大家自己查。
2、配置config.js文件。此文件为CKeditor的配置文件。配置需要显示的图标。
1 CKEDITOR.editorConfig = function( config )
2 {
3// Define changes to default configuration here. For example:
4 config.language = 'zh-cn';
5 config.skin = 'v2';
6// config.uiColor = '#AADC6E';
7 config.toolbar =
8 [
9 ['Source', '-', 'Preview', '-'],
10 ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
11 ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
12 '/',
13 ['Bold', 'Italic', 'Underline'],
14 ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
15 ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
16 ['Link', 'Unlink', 'Anchor'],
17 ['addpic','Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],//此处的addpic为我们自定义的图标,非CKeditor提供。
18 '/',
19 ['Styles', 'Format', 'Font', 'FontSize'],
20 ['TextColor', 'BGColor'],
21
22 ];
23
24 config.extraPlugins = 'addpic';
25
26 };
3、在CKeditor\plugins文件夹下新建addpic文件夹,文件夹下添加addpic.JPG图标文件,建议尺寸14*13。addpic.JPG图标文件即为显示在CKeditor上的addpic的图标。在图标文件同目录下添加文件plugin.js,内容如下。
1 (function () {
2//Section 1 : 按下自定义按钮时执行的代码
3var a = {
4 exec: function (editor) {
5 show();
6 }
7 },
8 b = 'addpic';
9 CKEDITOR.plugins.add(b, {
10 init: function (editor) {
11 editor.addCommand(b, a);
12 editor.ui.addButton('addpic', {
13 label: '添加图片',
14 icon: this.path + 'addpic.JPG',
15 command: b
16 });
17 }
18 });
19 })();
文件中的show函数为显示子页面使用,我将它写在CKeditor所在的页面中。
4、edit.aspx页面使用的js
edit.aspx页面就是使用CKeditor的页面。
function show() {
$("#ele6")[0].click();
}
function upimg(str) {
if (str == "undefined" || str == "") {
return;
}
str = "<img src='/html/images/" + str+"'</img>";
CKEDITOR.instances.TB_Content.insertHtml(str);
close();
}
function close() {
$("#close6")[0].click();
}
$(document).ready(function () {
new PopupLayer({ trigger: "#ele6", popupBlk: "#blk6", closeBtn: "#close6", useOverlay: true, offsets: { x: 50, y: 0} });
});
以上就是js的代码,弹出窗口是使用jquery的弹出层,弹出层中嵌套iframe,iframe中使用upimg.aspx上传页面,大家如果有其他需要可以自己去设计弹出效果。为了大家调试方便,我将我实现弹出层的代码贴出来。
弹出层效果使用的是popup_layer.js方案,需要进一步加工的朋友可以自己在网络中谷歌。ele6为弹出激发需要的层,blk6为弹出层主体,close6为层中承载关闭按钮的层。代码如下
<div id="ele6" style="cursor:hand; color: blue; display:none;"></div>
<div id="blk6" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<a href="javascript:void(0)" id="close6" class="closeBtn"></a>
<iframe src="upimg.aspx"></iframe>
</div>
</div>
别忘记引用jquery和popup_layer.js。
5、upimg.aspx页面
aspx代码
<div>
<asp:FileUpload ID="FU_indexIMG" runat="server"/>
<br />
<asp:Button ID="Button1" runat="server" Text="上传" onclick="Button1_Click"/>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="取消"/>
</div>
对应的cs代码
1protectedvoid Button1_Click(object sender, EventArgs e)
2 {
3string imgdir = UpImg();
4 script = "window.parent.upimg('" + imgdir + "');";
5 ResponseScript(script);
6 }
7protectedvoid Button2_Click(object sender, EventArgs e)
8 {
9string script = "window.parent.close();";
10 ResponseScript(script);
11 }
12///<summary>
13/// 输出脚本
14///</summary>
15publicvoid ResponseScript(string script)
16 {
17 System.Text.StringBuilder sb = new System.Text.StringBuilder("<script language='javascript' type='text/javascript'>");
18 sb.Append(script);
19 sb.Append("</script>");
20 ClientScript.RegisterStartupScript(this.GetType(), RandomString(1), sb.ToString());
21 }
22///<summary>
23/// 获得随机数
24///</summary>
25///<param name="count">长度</param>
26///<returns></returns>
27publicstaticstring RandomString(int count)
28 {
29 RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider();
30byte[] data = newbyte[count];
31 rng.GetBytes(data);
32return BitConverter.ToString(data).Replace("-", "");
33 }
Button1_Click为确定按钮的单击事件函数。其中使用UpImg函数实现上传图片文件,我还在其中实现了加水印,缩图,将图片文件的大小以及相对路径存入数据库等自定义操作,大家可以在此发挥。UpImg返回值为保存图片的相对路径,然后调用editer.aspx页面的js函数upimg。js函数upimg功能为将字符串插入到CKeditor的当前光标位置,插入的是html代码。至此为止带有新上传图片相对路径的img标签就插入CKeditor的编辑区了,能够显示图片了。
Button1_Click为取消按钮的单击事件函数。调用editer.aspx页面的js函数close,将弹出层隐藏。

5. ckeditor在jsp中上传word时如何自动上传图片,或者粘贴word时上传图片

参考答案 而对于年轻人而言,三年五年就可以是一生一世——《十八春》

6. ckeditor 怎么上传图片 把上传的图片保存到服务器 图片名保存到数据库

给你借鉴一下,新闻发布:
News_add.asp页面代码
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table width="95%" border="0" cellpadding="2" cellspacing="1" class="table_southidc">
<form method="POST" name="myform" onSubmit="return CheckForm();" action="News_save.asp?action=Add" target="_self">
<tr align="center">
<td class="back_southidc" height="30" colspan="2"><font color="#0000FF"><strong>新增新闻</strong></font></td>
</tr>
<tr bgcolor="#ECF5FF">
<td width="20%" height="24" align="right"><div align="left"><font color="#FF0000">*</font>新
闻标题:</div></td>
<td width="80%" valign="top">
<div align="left">
<input name="title" type="text" class="input" value="" size="50" maxlength="200">
</div></td>
</tr>
<tr bgcolor="#ECF5FF">
<td height="24" align="right"><div align="left"><font color="#FF0000">*</font>新闻类别:</div></td>
<td valign="top">
新闻大类:
<%
set rs= Server.CreateObject("ADODB.Recordset")
sql = "select * from BigClass_New"
rs.open sql,conn,1,1
if rs.eof and rs.bof then
response.write "请先添加栏目。"
else
%>
<select name="BigClassName" onChange="changelocation(document.myform.BigClassName.options[document.myform.BigClassName.selectedIndex].value)" size="1">
<option selected value="<%=trim(rs("BigClassName"))%>"><%=trim(rs("BigClassName"))%></option>
<%
dim selclass
selclass=rs("BigClassName")
rs.movenext
do while not rs.eof
%>
<option value="<%=trim(rs("BigClassName"))%>"><%=trim(rs("BigClassName"))%></option>
<%
rs.movenext
loop
end if
rs.close
%>
</select>
<select name="SmallClassName">
<option value="" selected>不指定小类</option>
<%
set rs= Server.CreateObject("ADODB.Recordset")
sql="select * from SmallClass_New where BigClassName='" & selclass & "'"
rs.open sql,conn,1,1
if not(rs.eof and rs.bof) then
%>
<option value="<%=rs("SmallClassName")%>"><%=rs("SmallClassName")%></option>
<% rs.movenext
do while not rs.eof%>
<option value="<%=rs("SmallClassName")%>"><%=rs("SmallClassName")%></option>
<%
rs.movenext
loop
end if
rs.close
%>
</select>
</td>
</tr>
<tr bgcolor="#ECF5FF">
<td align="right" valign="top"><div align="left"><font color="#FF0000">*</font>新闻内容:</div></td>
<td valign="top">
<input type="hidden" name="content" value="">
<iframe ID="eWebEditor1" src="Southidceditor/ewebeditor.asp?id=content&style=southidc" frameborder="0" scrolling="no" width="620" HEIGHT="405"></iframe>
</td>
</tr>
<tr bgcolor="#ECF5FF">
<td height="24" align="right"><div align="left">首页图片:
<input name="IncludePic" type="hidden" id="IncludePic" value="yes">
</div></td>
<td valign="top"><input name="DefaultPicUrl" type="text" id="DefaultPicUrl" value="" size="50" maxlength="200">
</td>
</tr>
<tr bgcolor="#ECF5FF">
<td height="24" align="right"><div align="left"><font color="#FF0000">*</font>发布人:</div></td>
<td valign="top">
<div align="left">
<input name="user" type="text" class="input" size="30" value="admin">
</div></td>
</tr>
<tr bgcolor="#ECF5FF">
<td height="24" align="right"><div align="left">首页图片新闻:</div></td>
<td>
<div align="left">
<input type="radio" value="true" name="OK">

<input type="radio" value="false" checked name="Ok">
否 <font color="#FF0000">(设为首页图片新闻,选择此项时请注意文章中是否添加有图片!)</font></div></td>
</tr>
<tr align="center" bgcolor="#ECF5FF">
<td height="35"><div align="left">录入时间:</div></td>
<td height="35"><div align="left">
<input name="AddDate" type="text" id="AddDate" value="<%=date()%>" maxlength="50">
</div></td>
</tr>
<tr align="center" bgcolor="#ECF5FF">
<input type="hidden" name="Id" value="108">
<td height="35" colspan="2"> <input type="submit" name="Submit" value="提交" class="input">

<input type="reset" name="Submit" value="重置" class="input"> </td>
</tr>
</form>
</table>
</tr>
</table>
<table width="100%" height="28" border="0" cellpadding="0" cellspacing="0" class="HeaderTdStyle">
<tr>
<td>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td align="right">Design By <a href="mailto:[email protected]">ZXKJ</a></td>

</tr>
</table></td>
</tr>
</table>

处理页面News_save.asp代码:
<!--#include file="conn.asp"-->
<%
if Request.QueryString("action")="Add" then
set rs= Server.CreateObject("ADODB.Recordset")
sql="select * from News"
rs.open sql,conn,1,3
If request.form("Title")="" Then
Response.Write("<script language=""JavaScript"">alert(""错误:您没输入标题,请返回检查!!"");history.go(-1);</script>")
response.end
end if
If request.form("content")="" Then
Response.Write("<script language=""JavaScript"">alert(""错误:您没输入新闻内容,请返回检查!!"");history.go(-1);</script>")
response.end
end if
If request.form("user")="" Then
Response.Write("<script language=""JavaScript"">alert(""错误:您没输入发布人,请返回检查!!"");history.go(-1);</script>")
response.end
end if

rs.addnew
rs("Title")=request.form("Title")
rs("Content")=request.form("content")
rs("BigClassName")=request.form("BigClassName")
rs("SmallClassName")=request.form("SmallClassName")
rs("FirstImageName")=request.form("DefaultPicUrl")
rs("User")=request.form("user")
rs("AddDate")=request.form("AddDate")
rs("Ok")=request.form("Ok")
rs.update
rs.close
set rs=nothing
response.Redirect "News_Manage.asp"
end if
%>

7. 你好,我想知道ckeditor3.6以上的在配置上传图片的时候,都要接受哪些参数啊,参数名是什么,

上传的表单名叫 upload, $_FILES['upload']

上传成功后输出:
echo '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('
.$_GET['CKEditorFuncNum'].', \'文件路径\', \'失败显示的消息,成功就为空\');</script>'

8. 如何实现ckeditor文件上传

想把java web项目中的fckeditor在线文本编辑器升级到ckeditor,但又不想购买ckfinder来实现文件上传?老k将告诉你一个不用花钱就可以实现ckeditor上传文件的好方法,只要对fckeditor的filemanager做出几处修改,就可以集成fckeditor的文件上传管理器到ckeditor中使用,可以方便在文章中插入图片及flash。 1.在java web项目中集成fckeditor
如果你是把fckeditor升级到ckeditor的话,可以跳过这一步,否则请下载fckeditor的最终版本,然后把fckeditor文件夹复制到java web项目的webroot目录下。当然,你可以直接下载本文的示例项目fckeditro文件上传管理器集成到ckeditor示例项目 (0)来获得最终版本的fckeditor,而且是已经可以集成到ckeditor的fckeditor。 2.把java实现文件上传需要的jar复制到项目lib目录下
下载本文的示例项目后解压,把项目lib目录下的所有jar文件复制到你的项目的lib下面,如果不是通过myeclipse或者eclipse进行粘贴的话,你还需要把这些jar加入到项目编译路径下。
3.重写fckeditor实现文件上传的ConnectorServlet以解决中文乱码的问题
你可以直接到本文示例项目net.laokboke.servlet目录下的ConnectorServlet.java复制到你的项目的src目录下。
4.实现fckeditor的connector.userActionImpl
其实只需要把fckeditor.properties文件复制到你项目的src目录下就可以了 5.配置你的web.xml文件
配置上传文件的servlet,使tomcat启动的时候就加载该servlet,在web.xml中加入以下的代码:
<servlet>
<servlet-name>Connector</servlet-name> <servlet-class>
net.laokboke.servlet.ConnectorServlet
</servlet-class>

<init-param>
<param-name>baseDir</param-name> <param-value>/userfiles/</param-value> </init-param>
<init-param>
<param-name>debug</param-name> <param-value>true</param-value> </init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping> <servlet-name>Connector</servlet-name>
<url-pattern>/fckeditor/connector</url-pattern>

</servlet-mapping>
6.修改fckeditor文件上传管理器的若干文件
这些文件全部位于fckeditor\editor\filemanager\browser\default\目录下,你只需要把本文的示例项目中同目录下的所有文件复制替换你的就可以了。 7.修改ckeditor的图像属性窗口js,屏蔽一些不必要的选项
该文件是位于ckeditor\plugins\image\dialogs\目录下的image.js文件,增加了291-293这几行代码。
8.在ckeditor集成fckeditor filemanager
其实就是在使用ckeditor时配置它的filebrowserBrowseUrl和filebrowserUploadUrl等属性,如以下js代码
<script type="text/javascript"> CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl :
'<%=path %>/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=/fckeditor/connector', filebrowserUploadUrl : '<%=path %>/fckeditor/connector?Type=Image'
}); </script>

9. ckeditor只能上传网络图片,如何设置能上传本地图片

现在的ckeditor更新了 要用上传图片的功能貌似还要收费你可以用fckeditor 这个跟ckeditor差不多,简单配置后,就可以上传图片上传后提交表单 _POST数组里有图片的路径 把它存到数据库里就可以了详细的方法可以看里面的demo,很简单的
知道了吗。给分 走人 采纳

10. 怎么为ckeditor添加图像

为ckeditor添加图像的方法
1. 到官网下载ckeditor
2. 复制到java web项目目录下
3. 配置config文件,打开图片上传功能

CKEDITOR.editorConfig = function (config) {
// 换行方式
config.enterMode = CKEDITOR.ENTER_BR;
// 当输入:shift+Enter是插入的标签
config.shiftEnterMode = CKEDITOR.ENTER_BR;//
//图片处理
config.pasteFromWordRemoveStyles = true;
config.filebrowserImageUploadUrl = "ckUploadImage.action?type=image";

// 去掉ckeditor“保存”按钮
config.removePlugins = 'save';
};

4. java后台处理代码
// 上传图片
@Action(value = "/ckUploadImage", results = { @Result(name = "success", location = "/upload.jsp") })
public String uploadImages() throws Exception {
HttpServletRequest request = ServletActionContext.getRequest();
FileOutputStream fos;
String webRoot = request.getSession().getServletContext().getRealPath(
"");
// 获取图片后缀名
String partRightType = uploadFileName.substring(uploadFileName
.lastIndexOf("."));
String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
// 判断图片的格式
if (!ImageFile.checkImageType(partRightType)) {
String path = "";
String alt_msg = "Sorry! Image format selection is incorrect, please choose GIF, jpeg, PNG format JPG, picture!";
pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');</script>");
} else {
try {
uploadFileName = DateUtils.getDateNoStyle() + "-"
+ UUID.randomUUID() + partRightType;
String savePath = webRoot + Constants.UPLOAD_IMAGES_PATH;
File uploadFilePath = new File(savePath);
if (uploadFilePath.exists() == false) {
uploadFilePath.mkdirs();
System.out.println("路径不存在,但是已经成功创建了" + savePath);
} else {
System.out.println("路径存在了" + savePath);
}
fos = new FileOutputStream(new File(savePath + uploadFileName));
FileInputStream fis = new FileInputStream(getUpload());
byte[] buffer = new byte[1024];
int len = 0;
while ((len = fis.read(buffer)) > 0) {
fos.write(buffer, 0, len);
}
fos.close();
fis.close();
} catch (FileNotFoundException foe) {
System.out.println("上传文件为0字节");
}
// String path = "http://" + request.getServerName() + ":"
// + request.getServerPort() + request.getContextPath()
// + Constants.UPLOAD_IMAGES_PATH + uploadFileName;
String path = request.getContextPath()
+ Constants.UPLOAD_IMAGES_PATH + uploadFileName;
String alt_msg = "";
pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');</script>");
}
return null;
}

* 其实重点的代码就是这点
pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');</script>");

阅读全文

与ckeditorword上传图片相关的资料

热点内容
二次元动漫图片人物女生 浏览:859
感情可爱图片 浏览:119
苹果系统如何储存大量图片 浏览:358
怎么从图片里删掉文字 浏览:20
如何用图片搜电影 浏览:851
环保时装秀衣服制作图片 浏览:682
非常丧文字图片 浏览:432
老秦穿衣服图片 浏览:26
word中visio图片去底色 浏览:281
借物喻人文字图片 浏览:952
日记是怎么占格的图片 浏览:885
花瓣拼画美女手绘图片素材 浏览:660
电脑图片怎么存放 浏览:872
好看又简单的画图片 浏览:529
美图秀秀怎么给图片加字 浏览:398
可爱的女孩小图片 浏览:592
word文档里的图片怎么能统一大小 浏览:270
教师节内容图片简单鞋 浏览:459
红色帆布鞋搭配图片男生 浏览:537
如何利用wps将图片文字转换成表格 浏览:585