您的位置：首页 > 编程语言

简单插入图片在线编辑器代码

2008-08-20 17:22 453 查看

简单的实现插入图片的在线编辑器，如果要测试，需要更改函数insImg()中的变量imgPath的值，上传文件的控件只起到获取文件名的作用，具体路径由自己来设置。

当然，在插入图片之前需要上传本地文件到服务器～

<html>
<head>
<title>editer </title>
<style>
body {
font-size: 12px;
}

#edit, #view {
border: 1px solid red;
width: 100%;
height: 200px;
overflow-y: auto;
margin-bottom: 10px;
}

#view {
border-color: #ddd;
}
</style>
</head>
<body>
<form name="myForm" enctype="mulitipart/form-data" method="post" action="#">
<IFRAME id="edit">
</IFRAME>
<Script Language="JavaScript">

var editor;
editor = document.getElementById("edit").contentWindow;

editor.document.designMode = 'On';
editor.document.contentEditable = true;

editor.document.open();
editor.document.writeln('<html><body></body></html>');
editor.document.close();

function getData(){
alert("getting data");
var value = editor.document.body.innerHTML;
alert("the value is " + value);
document.getElementById("view").value = value;
}

function insImg(){
var file = document.getElementById('myFile');
var fileURL = file.value;

fileURLSplit = fileURL.split(".");

fileExt = fileURLSplit[fileURLSplit.length - 1].toLowerCase();

if (fileExt == "jpg" || fileExt == "gif" || fileExt == "bmp") {
var imgPath = 'http://192.168.0.3/test/img/' + fileURL;
var obj = document.getElementById("edit").contentWindow
obj.document.execCommand('InsertImage', false, imgPath);
}
else {
alert("the format is not correct!" + fileURL);
}

}
</script>
<input type="hidden" id="view" name="desc">
</input>
<br>
<input type="file" id="myFile">
<br>
<input type="button" value="insPic" onclick="insImg()"><input type="button" value="getDate" onclick="getData()">
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航