ThinkPHP框架--编辑器kindeditor-4.1.10插件的使用

最新推荐文章于 2019-05-09 13:53:36 发布

lamp113

最新推荐文章于 2019-05-09 13:53:36 发布

阅读量1.3k

点赞数

分类专栏： thinkphp 文章标签： thinkphp 编辑器

本文链接：https://blog.csdn.net/lamp113/article/details/50222413

版权

thinkphp 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

ThinkPHP框架采用3.1.3版本，PHP采用5.3
第一步：放入插件包
这里写图片描述
第二步：导入css和js文件

//css文件，建议把css文件放入<head>标签里面。
<link rel="stylesheet" href="/Public/kindeditor/themes/default/default.css" />
//js文件，建议把js文件放入整个html文件的最底部
<script src="/Public/js/classie.js"></script>
<script src="/Public/js/modalEffects.js"></script>

第三步：导入html编辑代码

<textarea name="article_content" class="cg_text" ></textarea><br />

第四步：导入js代码，放在textarea下面

<script>
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="article_content"]', {
            allowFileManager : true
        });
        K('input[name=getHtml]').click(function(e) {
            alert(editor.html());
        });
        K('input[name=isEmpty]').click(function(e) {
            alert(editor.isEmpty());
        });
        K('input[name=getText]').click(function(e) {
            alert(editor.text());
        });
        K('input[name=selectedHtml]').click(function(e) {
            alert(editor.selectedHtml());
        });
        K('input[name=setHtml]').click(function(e) {
            editor.html('<h3>Hello KindEditor</h3>');
        });
        K('input[name=setText]').click(function(e) {
            editor.text('<h3>Hello KindEditor</h3>');
        });
        K('input[name=insertHtml]').click(function(e) {
            editor.insertHtml('<strong>插入HTML</strong>');
        });
        K('input[name=appendHtml]').click(function(e) {
            editor.appendHtml('<strong>添加HTML</strong>');
        });
        K('input[name=clear]').click(function(e) {
            editor.html('');
        });
    });
</script>