将kindeditor在线编辑器制作成smarty插件

在web开发中，在线编辑器是经常要用到的功能模块，虽说配置在线编辑器没有多大难度，但是每一次编写重复的代码，总是让人感觉不爽。

本篇，就来讲解一下，如何将kindeditor制作成smarty的一个自定义函数。

为什么要制作成自定义函数呢？当然是为了避免写很多重复的代码。

{html_kindeditor name="kindcontent"}

假如在模板中调用一个smarty标签，就能生成一个文本编辑器（如上），那开发起来会不会感觉很过瘾呢？

好了，说下流程（本文以集成了smarty模板的ci框架为例）。

首先，将下载好的kindeditor解压后放在项目根目录。

然后在smarty的plugins目录新建一个文件function.html_kindeditor.php

<?php

/**
 * kindeditor 在线编辑器
 * @author rick <shaoyikai@qq.com>
 *
 * 使用举例：
 * {html_kindeditor name="kindcontent" width="700" height="250" theame="simple" lang="en" items="simple"}
 */
function smarty_function_html_kindeditor($params)
{
    
    $params['height'] = empty($params['height']) ? 300: $params['height'];
    $params['theame'] = empty($params['theame']) ? 'default': $params['theame'];
    $params['name'] = empty($params['name']) ? 'content': $params['name'];
    $params['lang'] = empty($params['lang']) ? 'zh_CN': $params['lang']; //可选择的语言zh_CN,zh_TW,en,ko,ar
    $params['items'] = empty($params['items']) ? 'default': $params['items']; 

    if($params['items'] === 'simple') 
    {
        $params['width'] = empty($params['width']) ? 480: $params['width'];
        $items = '["source","preview","code","|","cut","copy","paste","|","justifyleft","justifycenter","justifyright",
        "justifyfull","|","insertorderedlist","insertunorderedlist","indent","outdent","|","subscript",
        "superscript","clearhtml","fullscreen","/",
        "formatblock","fontname","fontsize","|","forecolor","hilitecolor","bold",
        "italic","underline","lineheight","removeformat","|","image","multiimage","table","emoticons","|",
        "anchor","link","unlink"]';
    }
    else
    {
        $params['width'] = empty($params['width']) ? 680: $params['width'];
        $items = '["source","|","undo","redo","|","preview","print","template","code","cut","copy","paste","plainpaste","wordpaste","|","justifyleft","justifycenter","justifyright",
        "justifyfull","insertorderedlist","insertunorderedlist","indent","outdent","subscript",
        "superscript","clearhtml","quickformat","selectall","|","fullscreen","/",
        "formatblock","fontname","fontsize","|","forecolor","hilitecolor","bold",
        "italic","underline","strikethrough","lineheight","removeformat","|","image","multiimage",
        "flash","media","insertfile","table","hr","emoticons","baidumap","pagebreak",
        "anchor","link","unlink","|","about"]';
    }


    $editor = '<script charset="utf-8" src="/kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="/kindeditor/lang/'.$params["lang"].'.js"></script>
    <link rel="stylesheet" href="/kindeditor/themes/'.$params["theame"].'/'.$params["theame"].'.css" />
    <script>
            KindEditor.ready(function(K) {
                    window.editor = K.create("#editor_id",{
                        themeType:"'.$params["theame"].'",
                        langType : "'.$params["lang"].'",
                        items: '.$items.',
                        minWidth: 400,
                    });
            });
    </script>
    
    <textarea id="editor_id" name="'.$params["name"].'" style="'.$params["width"].'px;height:'.$params["height"].'px;">
    </textarea>';

    
    return $editor;
}

注意js,css路径要根据自己的项目灵活修改，当然也可以放进参数里面，不过这样的话调用的时候就麻烦些。鉴于这些路径不会经常改动，所以这里直接写死了。

然后，就可以在模板中使用html_kindeditor插件函数了，比如：

{html_kindeditor name="kindcontent" width="700" height="250" theame="simple" lang="en" items="simple"}

以后，项目中需要编辑器的地方，直接写个这样的标签就行，是不是很方便呢？