导航:首页 > 文字图片 > ckeditor从word粘贴图片

ckeditor从word粘贴图片

发布时间:2023-11-07 23:54:00

A. 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,将弹出层隐藏。

B. dedecms织梦网站,我复制黏贴word内容时,图片都不显示,请问如何才能方便快捷地把word里面内容上传网站

可以弄个插件,把上传的word,自动整理为网页形式的。在word文档中编辑一篇文章,格式段落都整理好后,粘贴到dede编辑器汪脊里面却发现,格式都无效了,可能dede有自己的打算,比如这样可以文章字体大小统一,样色统一,整体比较整洁。但是用惯了word编辑文章的同学们就感觉不顺手了。郑州亿仟家网络经过查资料和实际操作,把方法给大家介绍一下。
Dedecms集成的是CKEditor编辑器,我们要做的是把CKEditor编辑器替换成kindeditor编辑器,kindeditor编辑器以其强大的功能和良好的用户体验度,是目前国内使用最广泛的编辑器之一。
具体操作步骤如下:
1,首先下载kindeditor文件包,下载地址:余液/uploads/file/20130430/20130430105608_10173.zip
2,解压后把kindeditor文件夹上传到include/目录下。
3,用kindeditor文件夹下的inc_fun_funAdmin.php替换include/inc/下的inc_fun_funAdmin.php文件。
4,修改dedecms系统参数——核心设置——Html编辑器(ckeditor,需要fck的用户可以去官网下载)困毁渗:将ckeditor改成kindEditor。

C. 怎么为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>");

阅读全文

与ckeditor从word粘贴图片相关的资料

热点内容
肖战高清最帅壁纸图片 浏览:743
白描图片简单又好看 浏览:719
短发图片带字头像女生 浏览:553
制作带文字的图片 浏览:751
买衣服真实图片女 浏览:281
姓氏颜头像带字图片男生 浏览:287
绘画海洋动物简单图片 浏览:927
女孩与红苹果图片 浏览:601
胖脸小女孩适合的发型图片 浏览:848
光绪元宝图片及价格福建官局造 浏览:73
老鼠图案简单漂亮图片 浏览:56
如何右键保存网页图片 浏览:214
奇迹暖暖人物图片女生可爱 浏览:847
如何用ps把圆形图片变成方的 浏览:890
word图片两张排一页 浏览:232
露肩膀图片美女背面 浏览:270
电脑画图如何截图半圆形图片 浏览:794
小清新图片卡通头像女生头像 浏览:178
如何用扫描全能王把图片处理小 浏览:441
怎么画鱼的图片 浏览:477