zoukankan      html  css  js  c++  java
  • 基于thinkphp的在线编辑器kindeditor-v4.1.3

    首先,去官网下载最新版的kindeditor,然后把里面asp,jsp,net,example的全删除,然后改名为editor放进public(最外层目录的public)文件夹里面。

    在目录lib目录建立ORG文件夹(个人习惯用ORG存储公用类),建立一个共用类,editor.class.php

    下面是这个类的具体代码 

    <?php
    /*编辑器调用的初始化类
     *
     */
    class editor {
    var $Width;
    var $Height;
    var $Value;
    /* 此方法是编辑器的构造方法
     *第一个参数,$Height是高度,不填默认是500px
     *第二个参数,$Width是宽度,不填默认是700px
     *第三个参数,$Value是编辑器默认内容,不填默认是“<h2>欢迎使用编辑器</h2><br>”
     *
     */
    function editor($Height="500px",$Width="700px",$Value="<h2>欢迎使用编辑器</h2><br>") {
    $this->Value = $Value;
    $this->Height = $Height;
    $this->Width = $Width;
    }
    
    
    /*此方法是在线编辑器的调用
     * 在需要编辑器的地方调用此函数
     */
    function createEditor(){
    return "<textarea name='content1' style='$this->Width;height:$this->Height;visibility:hidden;'>$this->Value</textarea>";
    }
    
    /*使用在线编辑器必须在html<head></head>之间调用此方法,才能正确调用,
     * 内容主要都是script
     */
    function usejs(){
    $str=<<<eot
    <link rel="stylesheet" href="__PUBLIC__/editor/themes/default/default.css" />
    <link rel="stylesheet" href="__PUBLIC__/editor/plugins/code/prettify.css" />
    <script charset="utf-8" src="__PUBLIC__/editor/kindeditor.js"></script>
    <script charset="utf-8" src="__PUBLIC__/editor/lang/zh_CN.js"></script>
    <script charset="utf-8" src="__PUBLIC__/editor/plugins/code/prettify.js"></script>
    <script>
    KindEditor.ready(function(K) {
    var editor1 = K.create('textarea[name="content1"]', {
    cssPath : '__PUBLIC__/editor/plugins/code/prettify.css',
    uploadJson : '__PUBLIC__/editor/php/upload_json.php',
    fileManagerJson : '__PUBLIC__/editor/php/file_manager_json.php',
    allowFileManager : true,
    afterCreate : function() {
    var self = this;
    K.ctrl(document, 13, function() {
    self.sync();
    K('form[name=example]')[0].submit();
    });
    K.ctrl(self.edit.doc, 13, function() {
    self.sync();
    K('form[name=example]')[0].submit();
    });
    }
    });
    prettyPrint();
    });
    </script>
    eot;
    return $str;
    }
    
    /*取得在线编辑器的值并返回
     */
     function getEditorContent(){
        $htmlData = '';
       if (!empty($_POST['content1'])) {
    if (get_magic_quotes_gpc()) {
    $htmlData = stripslashes($_POST['content1']);
    } else {
    $htmlData = $_POST['content1'];
    }
    return $htmlData;
       }
     }
    
    }

    代码注释都写的比较清楚了,

    然后在action建立个文件,是IndexAction.class.php

    class IndexAction extends Action {
    public function _initialize() {       
    header("Content-Type:text/html; charset=utf-8");
    }
    
        public function index(){
         import("@.ORG.editor");  //导入类
        $editor=new editor();     //创建一个对象
    $a=$editor->createEditor();   //返回编辑器
    $b=$editor->usejs();             //js代码
    $this->assign('usejs',$b);     //输出到html
            $this->assign('editor',$a);
            $this->display();      
    
        }
        public function php(){
        import("@.ORG.editor");
        $editor=new editor();   
        $a=$editor->getEditorContent();   //获取编辑器的内容
    $this->assign('a',$a);
    $this->display();
    // $this->success('数据添加成功!');
        }
    }

    然后在tpl建立index文件夹,在里面建立2个html文件,

    index.html    //使用编辑器

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
       {$usejs}
    </head>
    <body>
    <form name="example" method="post" action="__URL__/php">
    <?php //<textarea name="content1" style="700px;height:200px;visibility:hidden;"></textarea>   ?>
            {$editor}
    <br />
    <input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)
    </form>
    </body>
    </html>

    php.html    //获取编辑器的内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    {$a}
    </body>
    </html>

    代码仅供参考!有问题可以留贴!

  • 相关阅读:
    编程作业4.1:神经网络反向传播(BP算法)
    700. Search in a Binary Search Tree
    671. Second Minimum Node In a Binary Tree
    653. Two Sum IV
    606. Construct String from Binary Tree
    590. N-ary Tree Postorder Traversal
    589. N-ary Tree Preorder Traversal
    617. Merge Two Binary Trees
    SHELL 变量
    egrep 正则表达式
  • 原文地址:https://www.cnblogs.com/kingfly/p/3236932.html
Copyright © 2011-2022 走看看