kindeditor论坛(KindEditor的简单使用)
一、如何向KindEditor里插入HTML内容
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.magnify{
width: 200px;
margin: 80px auto;
position: relative;
}
/*在这里我们来设置放大镜的样式*/
.large{
width: 180px;
height: 180px;
position: absolute;
/*圆角*/
border-radius: 100%;
/*这里使用多重阴影、来实现玻璃的效果*/
box-shadow: 0 0 0 7px rgba(255,255,255,0.8),0 0 7px 7px rgba(0,0,0,0.3),inset 0 0 40px 2px rgba(0,0,0,0.3);
/*加载放大镜的图片*/
background: url() no-repeat;
/*放大镜默认隐藏*/
display: none;
}
/*解决放大镜在放大的过程中边缘重叠的BUG*/
.small{
display: block;
}
</style>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(document).ready(function(){
//定义图像的实际尺寸、
var native_width= 0;
var native_height= 0;
//首先、我们应该获得图像的实际尺寸、（本地的图片）
$('img').load(function(){
//这里我们需要重新创建一个和之前相同的图像对象、
//因为我们不能直接获得图像尺寸的宽高、
//因为我们在HTML里已经指定了图片宽度为200px、
var img_obj= new Image();
img_obj.src=$(this).attr('src');
//在这里这段代码写在这里是非常有必要的、
//如果在图像加载之前就访问的话、return的宽高值为0、
native_width= img_obj.width;
native_height= img_obj.height;
//现在、我来开始写鼠标移动的函数、mousemove()
$('.magnify').mousemove(function(e){
//获得鼠标X轴和Y轴的坐标
//先获得magnify相对与document的定位position
var magnify_offset=$(this).offset();
//这里我们用鼠标相对与文档的位置减去鼠标相对于magnify这个人容器的位置来得到鼠标的位置
var mouse_x= e.pageX- magnify_offset.left;
var mouse_y= e.pageY- magnify_offset.top;
//现在、我们来调整一下放大镜的隐藏与显示、
if( mouse_x> 0&& mouse_y> 0&& mouse_x<$(this).width()&& mouse_y<$(this).height()){
$('.large').fadeIn(100);
}else{
$('.large').fadeOut(100);
}
if($('.large').is(':visible')){
//放大镜图片背景的定位是根据鼠标在小图片上改变的位置来改变的、
//因此、我们应该先得到放大的比例、来定位这个放大镜里背景图片的定位、
/*
var ratio_x= mouse_x/$('.small').width();//得到的是缩放的比例
var large_x= ratio_x*native_width;
//我们需要让它在放大镜的中间位置显示、
large_x= large_x-$('.large').width()/2;
//因为背景图片的定位、这里需要转化为负值、
large_x= large_x*-1;
//现在我们来整合一下所有的计算步骤、
*/
var rx= Math.round(mouse_x/$('img').width()*native_width-$('.large').width()/2)*-1;
var ry= Math.round(mouse_y/$('img').height()*native_height-$('.large').height()/2)*-1;
var bgp= rx+'px'+ ry+'px';
//现在我们应该来写放大镜跟随鼠标的效果、
//放大镜移动的位置相对于文档的位置减去放大镜相对于放大这个层的offset的位置、
//再减去放大镜宽高的一半、保证放大镜的中心跟随鼠标
var gx= mouse_x-$('.large').width()/2;
var gy= mouse_y-$('.large').height()/2;
$('.large').css({
'left':gx,
'top':gy,
'backgroundPosition':bgp
})
}
})
})
//最后、我们来把这个mousemove()这个函数来放在这个load这个函数里
})
</script>
</head>
<body>
<div style="width:400px;height:400px;">
<div class='magnify'>
<div class='large'></div>
<img src='; width='200px' class='small'>
</div>
</div>
<center>
</center>
</body>
</html>
二、KindEditor编辑器的使用方法 KindEditor怎么用
KindEditor是一款用Javascript编写的开源在线HTML编辑器，主要用户是让用户在网站上获得可见即可得的编辑效果，开发人员可以用 KindEditor把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。你可以在其官网了解更多信息，包括演示、文档、下载等。
KindEditor的使用方法也非常简单，下面言小鱼就简单介绍一下其用法，这些内容你可以在KindEditor官网找到。
KindEditor编辑器的使用方法 KindEditor怎么用
工具/原料
KindEditor编辑器
电脑
方法/步骤
1
你要把所需的文件下载下来，下载地址去上面的官网找吧。
2
你要把所需要的文件上传到你的网站，接下来就是引用了。在需要显示编辑器的位置添加textarea输入框，注意ID在页面中应该是唯一的，不说你也知道。
KindEditor编辑器的使用方法 KindEditor怎么用
3
在该HTML页面添加以下脚本，第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考编辑器初始化参数(官网有详细介绍)。
KindEditor编辑器的使用方法 KindEditor怎么用
KindEditor编辑器的使用方法 KindEditor怎么用
4
如果你想获得编辑器中的数据，可以用下面的代码。
KindEditor编辑器的使用方法 KindEditor怎么用
5
KindEditor的使用方法就介绍到这里了，如果您还有不明白的地方可以去官网查找详细资料，相信一定能找到您想要的答案!
END
注意事项
本文由言小鱼原创，转载请注明，也可以去小鱼的博客看原文。
三、KindEditor编辑器使用教程
1、你要把所需的文件下载下来，下载地址去上面的官网找吧。
2、你要把所需要的文件上传到你的网站，接下来就是引用了。在需要显示编辑器的位置添加textarea输入框，注意ID在页面中应该是唯一的，不说你也知道。
3、在该HTML页面添加以下脚本，第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考编辑器初始化参数(官网有详细介绍)。
4、如果你想获得编辑器中的数据，可以用下面的代码。
KindEditor的使用方法就介绍到这里了，希望对您有用。