Kindeditor编辑器

官网: http://kindeditor.net/demo.php

导入选中的文件夹

通常在 webapp 下,建立 editor 文件夹

当使用kindEditor进行编辑时,编辑后内容,不会自动随表单进行提交

KindEditor 工作原理,隐藏原来 textarea 文本框,生成 iframe,在 iframe 里面进行编辑

使用kindeditor导入

应用 kindeditor,页面提供<textarea>文本框

编辑器初始化参数使用

语法: K.create(‘#id‘,{options}); 参数采用 key-value 格式

采用 items 属性,定制工具栏按钮显示

使用 kindeditor 使用图片上传编辑显示功能,需要指定 uploadJson 和 fileManagerJson

实现文件上传是PHP程序

使用文件管理器功能

和 fileManageJson 一组

默认文件管理器,服务器端程序采用 PHP

KindEditor 图片上传功能 图片上传功能

KindEditor 默认采用 PHP 实现,如果使用 java 实现,需要设置初始化参数

查看文件上传返回参数

设置页面 kindeditor 请求路径

在服务器编写 ImageAction ,处理 kindediotr 文件上传功能

/**
     * 上传图片
     *
     * @return
     */
    private File imgFile;
    private String imgFileFileName;
    private String imgFileContentType;

    public void setImgFile(File imgFile) {
        this.imgFile = imgFile;
    }

    public void setImgFileFileName(String imgFileFileName) {
        this.imgFileFileName = imgFileFileName;
    }

    public void setImgFileContentType(String imgFileContentType) {
        this.imgFileContentType = imgFileContentType;
    }

    @Action(value = "image_upload", results = { @Result(name = "success", type = "json") })
    public String upload() throws IOException {
        System.out.println("文件:" + imgFile);
        System.out.println("文件名:" + imgFileFileName);
        System.out.println("文件类型:" + imgFileContentType);

        String savePath = ServletActionContext.getServletContext().getRealPath("/upload/");
        String saveUrl = ServletActionContext.getRequest().getContextPath() + "/upload/";

        // 生成随机图片名
        UUID uuid = UUID.randomUUID();
        String ext = imgFileFileName.substring(imgFileFileName.lastIndexOf("."));
        String randomFileName = uuid + ext;

        // 保存图片(绝对路径)
        File destFile = new File(savePath + "/" + randomFileName);
        System.out.println("绝对路径:" + destFile.getAbsolutePath());
        FileUtils.copyFile(imgFile, destFile);

        // 通知浏览器文件上传成功
        Map<String, Object> result = new HashMap<>();
        result.put("error", 0);
        result.put("url", saveUrl + randomFileName); // 返回相对路劲给浏览器加载图片
        ActionContext.getContext().getValueStack().push(result);
        return SUCCESS;
    }

KindEditor  图片管理器功能

点击图片空间,显示服务器端 所有已经上传图片列表,选择一张图片加入当前编辑器

内容中

在页面点击图片空间, 发送请求 image_manage.action

编写 ImageAction 添加 manage 方法

/**
     * 图片空间实现
     *
     * @return
     */
    private String currentTime;

    public void setCurrentTime(String currentTime) {
        this.currentTime = currentTime;
    }
    @Action(value = "image_manage", results = { @Result(name = "success", type = "json") })
    public String manage() {
        // 获取根目录的路径
        String rootPath = ServletActionContext.getServletContext().getRealPath("/") + "upload/";
        // 根目录的url
        String rootUrl = ServletActionContext.getRequest().getContextPath() + "/upload/";
        // 遍历目录取的文件信息
        List<Map<String, Object>> fileList = new ArrayList<Map<String, Object>>();
        // 当前上传目录
        File currentPathFile = new File(rootPath);
        // 图片扩展名
        String[] fileTypes = new String[] { "gif", "jpg", "jpeg", "png", "bmp" };
        if (currentPathFile.listFiles() != null) {
            for (File file : currentPathFile.listFiles()) {
                Map<String, Object> hash = new HashMap<>();
                String fileName = file.getName();
                if (file.isDirectory()) {
                    hash.put("is_dir", true);
                    hash.put("has_file", (file.listFiles() != null));
                    hash.put("filesize", 0L);
                    hash.put("is_photo", false);
                    hash.put("filetype", "");
                } else if (file.isFile()) {
                    String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
                    hash.put("is_dir", false);
                    hash.put("has_file", false);
                    hash.put("filesize", file.length());
                    hash.put("is_photo", Arrays.<String> asList(fileTypes).contains(fileExt));
                    hash.put("filetype", fileExt);
                }
                hash.put("filename", fileName);
                hash.put("datetime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(file.lastModified()));
                fileList.add(hash);
            }
        }
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("moveup_dir_path", "");
        result.put("current_dir_path", rootPath);
        result.put("current_url", rootUrl);
        result.put("total_count", fileList.size());
        result.put("file_list", fileList);
        ActionContext.getContext().getValueStack().push(result);
        return SUCCESS;
    }
时间: 2024-10-13 01:21:04

Kindeditor编辑器的相关文章

(编辑器)Jquery-EasyUI集合Kindeditor编辑器

1.在html里面添加 list.html list.html (function ($, K) { if (!K) throw "KindEditor未定义!"; function create(target) { var opts = $.data(target, 'kindeditor').options; var editor = K.create(target, opts); $.data(target, 'kindeditor').options.editor = edit

KindEditor编辑器的使用

1.下载KindEditor编辑器  以KindEditor 4.1.10为例. 2.将下载解压完的KindEditor文件夹放在__ROOT__中. 3.在thinkphp中的Index/index.html中添加以下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

kindeditor编辑器代码过滤解决方法.

很多朋友在使用Kindeditor编辑器的时候都会遇到这样一个问题,如:给A标签加上title属性过后,浏览的时候,却神奇般地发现title属性没有了.再次切换html源代码的时候,返现编辑器将title属性给删掉了.追究其根本原因主要是kindeditor设置了标签和属性的默认过滤机制.KindEditor默认状态下会过滤编辑器里的html代码,主要是为了生成干净的代码,就会出现我们想不到的结果,现在焦国强为大家讲解:如何避免自己手动添加的代码被不必要的过滤. 首先我们知道3.4版本以上版本默

Kindeditor编辑器上传附件,自动获取文件名显示。

大部分在线编辑器在上传附件之后都是会以路径的形式显示出来很不友好.类似这样..怎么样显示成这样用户上传的原始文件名呢.就是这样.是不是看着很友好. kindeditor编辑器上传文件是已插件的形式调用的,包括其他类似的功能(批量上传图片,百度地图)都是在plugins目录下.打开insertfile目录下的insertfile.js文件.在文件上传之后的回调函数里面找到urlBox.val(url);在下面添加一行titleBox.val(data.title);这里会把后台上传文件之后返回的j

详细介绍如何使用kindEditor编辑器

今天群里的朋友问我能不能写个kindEditor编辑器的使用教程,说是弄了半天没有搞定.由于PHP啦后台正好用了这个编辑器,我有写经验,正好教他的同时写出来分享给大家. kindEditor编辑器是一个由JS写成的在线编辑器,很多网站或CMS等都有用它,口碑不错,目前最新版本是4.1.10. 其实它的用法非常简单,我是在下载了它的安装包后看了一些demo然后就把它放到PHP啦的后台上去了.好了教程正式开始 一.下载 下载最新版本的kindEditor(官方网站kindeditor.net),下载

DWZ与KindEditor编辑器的整合

原文:DWZ与KindEditor编辑器的整合 DWZ自带的编辑器是xheditor,可能很多人用不习惯.就像我,习惯用kindeditor了.现在就来说说如何整合dwz和kindeditor. 一.打开DWZ的中的dwz.ui.js,进行修改. 首先找到 if ($.fn.xheditor) { $("textarea.editor", $p).each(function(){ var $this = $(this); var op = {html5Upload:false, ski

Kindeditor 编辑器POST提交的时候会出现符号被转换

Kindeditor编辑器输入符号单引号,双引号,斜杠 都会被转义 解决办法 $date['content']=$this->textString($_POST['content']); public function textString($string){ $string = str_replace("\'","'",$string); $string = str_replace('\"','"',$string); return $s

如何自定义kindeditor编辑器的工具栏items即去除不必要的工具栏或者保留部分工具栏

kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏.针对不同的用户,不同的项目,不同的环境,可能就需要保留部分工具栏.那么我们应该如何自定义自己想要的工具栏呢?工具栏如何编辑呢?我们分几种情况来加以阐述: 第一种:修改原始文件kindeditor.js对工具栏进行统一调整 kindeditor编辑器包内有一个kindeditor.js或者kindeditor-min.js文件,这个文件主要是包含了编辑器的整个基本配置以及一些基本的

yourphp添加KindEditor编辑器

<tr> <td align="right">故障描述</td> <script charset="utf-8" src="./Public/Kindeditor/kindeditor-min.js"></script> <script charset="utf-8" src="./Public/Kindeditor/lang/zh_CN.js&quo

KindEditor编辑器在ASP.NET中的使用

最近做的项目中都有用到富文本编辑器,一直在寻找最后用的富文本编辑器,之前用过CKEditor,也用过UEditor,这次打算用 一下KindEditor. KindEditor简介: KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器.KindEditor使用JavaScript编写,可以无缝的于Java..NET.PHP.ASP等程序接合. KindEditor非常适合