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

最新推荐文章于 2022-02-16 19:11:36 发布

lamp113

最新推荐文章于 2022-02-16 19:11:36 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/lamp113/article/details/50222413

thinkphp 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了如何在ThinkPHP框架中整合KindEditor文本编辑器，包括插件包导入、CSS和JS文件引入、HTML编辑代码集成及关键的JS交互操作。通过遵循步骤指导，开发者能轻松实现在线文本的实时编辑与预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>