javascript 网页编辑框及拖拽图片的问题_网页编辑器

复制代码 代码如下:

function keyPress(ev){
if(ev.keyCode==13){
//在光标所在处创建一个区域.
var range=document.selection.createRange();
//将区域的内容设置成为换行符.
range.text="\n";
//将区域的起始点向右移动一个字符的长度.
range.moveStart("character", 1);
//将光标移动到区域的结尾.(若为false则是移动到起始位置).
range.collapse(true);
//由于上面的一系列操作,使得区域的位置处在了\n之后,所以再次选择时,光标就到了新一行的结尾.完成换行.
range.select();
//使事件失效
return false;
}
return true;
}

// 初始化可编辑的iframe
content.document.designMode="on";
content.document.onkeypress=function(){return keyPress(content.event);};

复制代码 代码如下:

<div id="iframeWrapper">
<iframe id="content" name="content" style="width:400;height:400;font-size:12px;border: solid 1px #ccc;" frameborder=0></iframe>
</div>

获取代编辑框中内容的代码

复制代码 代码如下:

window.frames["content"].document.body.innerHTML

时间: 2024-09-20 04:17:41

javascript 网页编辑框及拖拽图片的问题_网页编辑器的相关文章

右击拖拽不弹出对话框-鼠标右键拖拽图片超链接,拖拽完成后如何不弹出对话框

问题描述 鼠标右键拖拽图片超链接,拖拽完成后如何不弹出对话框 鼠标右键拖拽图片超链接,拖拽完成后如何不弹出对话框,我已经可以用右键拖拽了,但是完成后他会弹出右键的对话框.该如何编写代码 解决方案 mousedown移除href属性,mouseup的时候判断是否移动过,如果移动过就设置href触发跳转,要不延时设置href即可. <style>a{position:absolute;}</style> <script type="text/javascript&quo

JS实现网页Div层Clone拖拽效果_javascript技巧

本文实例讲述了JS实现网页Div层Clone拖拽效果.分享给大家供大家参考.具体如下: 这是一个层拖动,网页上的拖拽Clone效果实例,两个层可在鼠标的拖动下,任意改变位置,智能判断层级,也就是智能判断自身是否处于最高层,最高处的层是不会被其它层遮挡的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-draw-box-clone-style-codes/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】_javascript技巧

本文实例讲述了JS实现放大.缩小及拖拽图片的方法.分享给大家供大家参考,具体如下: var divId; var v_left; var v_top; window.onload=function(){ divId = document.getElementById("block1"); var height1 = images1.height;//图片的高度 var width1 = images1.width;//图片的宽度 v_left=(document.body.client

原生JS实现拖拽图片效果_javascript技巧

本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a

Java小例子:创建一个可拖拽图片的面板

今天在论坛上看到帖子希望能在 Swing 中实现像拖地图一样拖拽图片.这里是一个最 简单的实现,提供了一个基本思路. import javax.swing.*; import javax.swing.filechooser.FileNameExtensionFilter; import java.awt.*; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import java.awt.event.M

Axure交互效果实例:提示文本框和拖拽效果

Axure是现在交互设计师必不可少的交互原型设计工具,其实和任何一款工具一样,只要根据常用效果实例多练练,基本就会知道各个控件的使用.今天分享一些在Axure经常用到的交互实例:带提示的文本框和拖拽效果. 实例下载:Axure常用交互效果实例.rar 1.带提示的文本框 将提示信息放置于文本框内是一种常见的交互方式.当文本框获得焦点时,提示文字消失.当文本框失去焦点时,提示文字重新显示出来.现在就让我们看下这种控件的制作方法. 第一步: 从widget库中拖出text field控件.双击控件在

请问下mapxtreme for java 4.7 网页中如何实现拖拽 最好有代码可以贴出来

问题描述 请问下mapxtremeforjava4.7网页中如何实现拖拽最好有代码可以贴出来 解决方案 解决方案二:中等开发模式网页嵌applet那种解决方案三:applet的话不是有现成的标签可以用的.那里面的移动就已经是拖拽了.可惜我不会用MAPXTREME自带的标签.所有代码都只能自己摸索了.

bootstrap模态框实现拖拽效果_javascript技巧

本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下 项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞到现在测试了一轮又一轮,发现modal模态框有限bug,因为层级的问题,modal框会被左侧菜单遮挡,需求就改成将modal框改成可以拖动的. 网上搜了搜,找到个blog发现基本功能是可用的.但是效果不太友好.问题有以下两个 拖动时候背后文字会被选中,很难看 modal模态框会被拖出边框以外,很难看

Android 在viewPager中双指缩放图片双击缩放图片单指拖拽图片的实现思路

我们就把这个问题叫做图片查看器吧,它的主要功能有: 1.双击缩放图片. 2. 双指缩放图片. 3.单指拖拽图片. 为此这个图片查看器需要考虑以下的技术点: 一.双击缩放图片: 1.如果图片高度比屏幕的高度小得多,那么就将图片放大到高度与屏幕高度相等,否则就放大一个特定的倍数. 2.如何判断是否到达这个倍数来停止缩放. 3.判断完且停止放大后,图片可能已经超出了这个倍数需要的大小,如何回归到我们的目标大小. 4.判断完且停止缩小后,图片宽度可能已经小于屏幕宽度,在两边留下了空白,如何重置为原来的大