前端编辑器-kindeditor的使用

最新推荐文章于 2024-07-10 15:55:23 发布

小女子的博客

最新推荐文章于 2024-07-10 15:55:23 发布

阅读量3.1k

点赞数

分类专栏： web前端/js 编辑器文章标签：前端编辑框 kindeditor

本文链接：https://blog.csdn.net/liuian1946/article/details/70158037

版权

web前端/js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

编辑器

1 篇文章 0 订阅

订阅专栏

项目中用到了编辑器，就来科普了一下，由于不懂什么php,asp什么的，兜了一圈！调用这个插件的时候还需要还需要依赖于show_ads.js，本事只是提供参考，更多的API请参考官网：http://kindeditor.net/doc.php

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>kindeditor</title>
    <style>

    </style>
    <link rel="stylesheet" href="../../../bower_components/kindeditor/themes/default/default.css" />
    <!--<link rel="stylesheet" href="../../../bower_components/kindeditor/themes/simple/simple.css" />-->

</head>
<body>
<form>
    <textarea name="content" style="width:800px;height:200px;" id="test"></textarea>
</form>
<script charset="utf-8" src="../../static/src/js/jquery-1.11.2.js"></script>
<script charset="utf-8" src="../../../bower_components/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="../../../bower_components/kindeditor/lang/zh-CN.js"></script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<script>
    $(function() {
        var editor = KindEditor.create('textarea[name="content"]',{
            afterBlur : function() {
                var  html = editor.html();  //获取编辑器的内容
                alert(editor.html())
            },
            noDisableItems:['source','fullscreen'],   //工具栏小图标的设置,默认的是横向的
            resizeType:0,//2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动
            fullscreenMode:false
        })

    });


</script>

</body>
</html>

这样就是简单的一个可编辑框就出来！