如何向KindEditor里插入HTML内容?

Jewel_M 发布于 2011/12/19 22:49
阅读 10K+
收藏 1

云栖大会9月17火热来袭,云栖训练营福利提前大放送!>>>

我在做一个项目里需要采集外部数据到编辑器中

内容已经采集成了JSON格式,现在就是需要在AJAX采集结束后将 data.content 返回到编辑器中

在论坛里看到用 insertHtml 可以实现 但试了半天不知道如何弄

调用编辑器代码

KindEditor.ready(function(K) {
	K.create('textarea[name="content"]', {
       allowFileManager : true
	});
});

 编辑器的ID是 contentID 在页面中调用的另外一JS里向编辑器中写入采集到的内容,如何实现?

加载中
0
pyawen
pyawen
var editor = K.create('textarea[name="content"]', {
       allowFileManager : true
});
editor.insertHtml('<b>ccccc</b>');

0
Jewel_M
Jewel_M

谢谢 pyawen 的回复  我是想在另外一个JS文件里用insertHtml  不知道行不行?

0
pyawen
pyawen
可以的啊  editor 申明为全局变量 在另外的js 就可以调用到
0
pyawen
pyawen
var editor;
KindEditor.ready(function(K) {
    editor  = K.create('textarea[name="content"]', {
   allowFileManager : true
	});
});
在另外的js上直接操作editor就可以的
0
Jewel_M
Jewel_M
好的  谢谢  我试试!
0
Jewel_M
Jewel_M

引用来自“pyawen”的答案

var editor;
KindEditor.ready(function(K) {
    editor  = K.create('textarea[name="content"]', {
   allowFileManager : true
	});
});
在另外的js上直接操作editor就可以的
非常感谢!
0
a
asasqw
<!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(http://127.0.0.1/ht/template/default/images/8.jpg) no-repeat;
    /* 放大镜默认隐藏 */
    display: none;
}
/* 解决放大镜在放大的过程中边缘重叠的BUG */
.small {
    display: block;
}
</style>


<script type="text/javascript" src="http://localhost/ht/js/jquery-1.8.0.min"></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='http://127.0.0.1/ht/template/default/images/8.jpg' width='200px' class='small'>
    </div>
    </div>
    <center>
    
</center>
</body>
</html>



0
a
asasqw
<!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(http://127.0.0.1/ht/template/default/images/8.jpg) no-repeat;
    /* 放大镜默认隐藏 */
    display: none;
}
/* 解决放大镜在放大的过程中边缘重叠的BUG */
.small {
    display: block;
}
</style>


<script type="text/javascript" src="http://localhost/ht/js/jquery-1.8.0.min"></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='http://127.0.0.1/ht/template/default/images/8.jpg' width='200px' class='small'>
    </div>
    </div>
    <center>
    
</center>
</body>
</html>

返回顶部
顶部