導航:首頁 > 文字圖片 > 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上傳圖片相關的資料

熱點內容
微信奇葩文字圖片大全 瀏覽:794
2021最火網紅蛋糕圖片女生歐式 瀏覽:267
兔媽媽做飯可愛圖片 瀏覽:790
word文檔中圖片怎麼統一框選 瀏覽:238
書寫文字圖片 瀏覽:780
戲劇動漫人物圖片 瀏覽:831
小學男生帥氣頭像圖片 瀏覽:855
8歲女孩圖片欣賞 瀏覽:43
女孩圖片微信頭像霸氣 瀏覽:418
適合冬天的衣服搭配圖片 瀏覽:110
男生睡覺的圖片真實的 瀏覽:772
衣服太厚卡通圖片 瀏覽:973
蛇圖片簡筆畫圖片大全 瀏覽:391
ipad如何復制圖片中的文本 瀏覽:328
動漫的路燈圖片大全 瀏覽:121
絕美受傷的漫畫女孩圖片 瀏覽:165
女生嘔吐動態圖片 瀏覽:822
男生瘦臉成功案例圖片 瀏覽:81
饞嘴的可愛圖片 瀏覽:45
如何簡單批量提取圖片文件名 瀏覽:797