首页 > 代码库 > ckeditor在图像属性加入浏览图片
ckeditor在图像属性加入浏览图片
<!DOCTYPE html>
<!--
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="GB2312">
<title>jLogic-CKEditor</title>
<script src="http://www.mamicode.com/ckeditor/ckeditor.js"></script>
<link rel="stylesheet" href="http://www.mamicode.com/ckeditorCfg/jLogic-ckeditor.css" charset="GB2312">
<script>
function getData()
{
var editor = CKEDITOR.instances.editor1;
return editor.getData();
}
function setData(value)
{
var editor = CKEDITOR.instances.editor1;
editor.setData( value );
}
function insertText(value)
{
var editor = CKEDITOR.instances.editor1;
editor.insertText( value );
}
function insertHtml(value)
{
var editor = CKEDITOR.instances.editor1;
editor.insertHtml( value );
// if ( editor.mode == ‘wysiwyg‘ )
// editor.insertHtml( value );
// else
// alert( ‘You must be in WYSIWYG mode!‘ );
}
</script>
</head>
<body>
<textarea class="ckeditor" id="editor1" name="editor1">
{jLogic-TextArea}
</textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace(‘editor1‘, addUploadButton(this));
editor.on(‘instanceReady‘, function(event){
event.editor.getCommand(‘maximize‘).exec();
});
function addUploadButton(editor){
CKEDITOR.on(‘dialogDefinition‘, function( ev ){
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == ‘image‘ ){
var infoTab = dialogDefinition.getContents( ‘info‘ );
infoTab.add({
type : ‘button‘,
id : ‘upload_image‘,
align : ‘center‘,
label : ‘添加图片‘,
onClick : function( evt ){
var thisDialog = this.getDialog();
var txtUrlObj = thisDialog.getContentElement(‘info‘, ‘txtUrl‘);
var txtUrlId = txtUrlObj.getInputElement().$.id;
addUploadImage(txtUrlId);
}
}, ‘browse‘);
}
});
}
function addUploadImage(theURLElementId){
var obj = new Object();
obj.name="";
var imgUrl = window.showModalDialog("../ckeditor/samples/uploadsFiles.html",obj,"dialogWidth=400px;dialogHeight=200px");
var urlObj = document.getElementById(theURLElementId);
urlObj.value = http://www.mamicode.com/imgUrl;
urlObj.fireEvent("onchange");
}
</script>
</body>
</html>
uploadsFiles.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://www.mamicode.com/">
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">
-->
</head>
<body>
<input type="file" name="imgFile" id="fuPhoto" title="选择图片" />
<input type="submit" value="http://www.mamicode.com/确 定" id="btnUpload" onclick="yes()"/>
<script type="text/javascript">
function yes()
{
// alert(document.getElementById("fuPhoto").value);
//window.location.href="http://www.mamicode.com//replacebyclass.html";
window.returnValue=http://www.mamicode.com/document.getElementById("fuPhoto").value;
window.close();
}
</script>
</body>
</html>