精华内容
下载资源
问答
  • 富文本编辑器kindeditor

    2018-09-07 17:00:14
    富文本编辑器介绍 富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器KindEditor http://kindeditor.net/ UEditor http://ueditor.baidu.com/website/ ...

    富文本编辑器介绍
    富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器:
    KindEditor http://kindeditor.net/
    UEditor http://ueditor.baidu.com/website/
    CKEditor http://ckeditor.com/
    初始化kindeditor编辑器

    <script type="text/javascript">
        var editor;
        KindEditor.ready(function(K) {
            editor = K.create('textarea[name="content"]', {
                allowFileManager : true
            });
        });
    </script>

    allowFileManager 【是否允许浏览服务器已上传文件】 默认值是:false
    提取kindeditor编辑器的内容
    在goodsController.js中的add()方法中添加

    $scope.entity.goodsDesc.introduction=editor.html();

    清空kindeditor编辑器的内容
    修改goodsController.js的add方法

    function(response){
            if(response.success){
                alert("保存成功");
                $scope.entity={};
                editor.html('');//清空富文本编辑器
            }else{
                alert(response.message);
            }
    }   
    展开全文
  • 介绍一个html编辑器,富文本编辑器KindEditor,比较好用。 官网详细教程:http://kindeditor.net/about.php 效果图: 首先,下载kindeditor包。放到项目的JS插件包中。 在...

    介绍一个html编辑器,富文本编辑器,KindEditor,比较好用。

    官网详细教程:http://kindeditor.net/about.php


    效果图:





    首先,下载kindeditor包。放到项目的JS插件包中。



    在html页面定义一个textarea,设定长度,宽度。

    <textarea id="notice" name="notice" style="width:870px;height:500px;"></textarea>

    引入css,js文件

        <link rel="stylesheet" href="#springUrl('')/plugins/kindeditor/themes/default/default.css" />
        <link rel="stylesheet" href="#springUrl('')/plugins/kindeditor/plugins/code/prettify.css" />
    
        <script charset="utf-8" src="#springUrl('')/plugins/kindeditor/kindeditor.js"></script>
        <script charset="utf-8" src="#springUrl('')/plugins/kindeditor/lang/zh_CN.js"></script>
        <script charset="utf-8" src="#springUrl('')/plugins/kindeditor/plugins/code/prettify.js"></script>
    


    在JS中初始化html编辑器

    var editor;
    
    $(function() {
    
    	KindEditor.ready(function (KE) {
    		
    		editor = KE.create('#notice');
    	});
    })
    
    


    这样就好哒!


    //获取html编辑器内容

    editor.html()

    //设置html编辑器内容

    editor.html("hello world");




    展开全文
  • [导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下富文本编辑器上传图片一、导入kindeditor的js二、将kindeditor与一个文本域textarea进行关联,即用textarea初始化一个...

    [导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下

    富文本编辑器上传图片

    一、导入kindeditor的js

    二、将kindeditor与一个文本域textarea进行关联,即用textarea初始化一个kindeditor对象itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");

    //初始化类目选择和图片上传器

    TAOTAO.init({fun:function(node){

    TAOTAO.changeItemParam(node, "itemAddForm");

    }});

    三、设置要上传的参数var TT = TAOTAO = {

    // 编辑器参数

    kingEditorParams : {

    //指定上传文件参数名称

    filePostName : "uploadFile",

    //指定上传文件请求的url。

    uploadJson : '/pic/upload',

    //上传类型,分别为image、flash、media、file

    dir : "image"

    },

    init : function(data){

    // 初始化图片上传组件

    this.initPicUpload(data);

    // 初始化选择类目组件

    this.initItemCat(data);

    },

    // 初始化图片上传组件

    initPicUpload : function(data){

    $(".picFileUpload").each(function(i,e){

    var _ele = $(e);

    _ele.siblings("div.pics").remove();

    _ele.after('

    // 回显图片

    if(data && data.pics){

    var imgs = data.pics.split(",");

    for(var i in imgs){

    if($.trim(imgs[i]).length > 0){

                _ele.siblings(".pics").find("ul").append("

    ");

    }

    }

    }

    //给“上传图片按钮”绑定click事件

    $(e).click(function(){

    var form = $(this).parentsUntil("form").parent("form");

    //打开图片上传窗口

    KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){

    var editor = this;

    editor.plugin.multiImageDialog({

    clickFn : function(urlList) {

    var imgArray = [];

    KindEditor.each(urlList, function(i, data) {

    imgArray.push(data.url);

                    form.find(".pics ul").append("

    ");

    });

    form.find("[name=image]").val(imgArray.join(","));

    editor.hideDialog();

    }

    });

    });

    });

    });

    服务端代码public Map uploadPicture(MultipartFile uploadFile) {

    Map resultMap=new HashMap<>();

    try {

    //生成一个新的文件名

    //去原始文件名

    String oldName=uploadFile.getOriginalFilename();

    //生成新的文件名

    //UUID.randomUUID();

    String newName=IDUtils.genImageName();

    newName=newName+oldName.substring(oldName.lastIndexOf("."));

    String imagePath=new DateTime().toString("/yyyy/MM/dd");

    //上传图片

    boolean result=FtpUtil.uploadFile(FTP_ADDRESS,FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASE_PATH,

    imagePath, newName, uploadFile.getInputStream());

    System.out.println("result="+result);

    if(!result){

    resultMap.put("error", 1);

    resultMap.put("message", "文件上传失败");

    System.out.println("hh");

    return resultMap;

    }

    resultMap.put("error", 0);

    resultMap.put("url", IMAGE_BASE_PATH + imagePath + "/" + newName);

    return resultMap;

    } catch (IOException e) {

    resultMap.put("error", 1);

    resultMap.put("message", "文件上传异常");

    return resultMap;

    }

    }

    注意:服务端返回的json串的格式{error: 0|1,message|url} 其中error为整型不为字符串,如果写成字符串图片能够正常上传至服务器,但是不能在浏览器中回显。

    展开全文
  • [导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下富文本编辑器上传图片一、导入kindeditor的js二、将kindeditor与一个文本域textarea进行关联,即用textarea初始化一个...

    [导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下

    富文本编辑器上传图片

    一、导入kindeditor的js

    二、将kindeditor与一个文本域textarea进行关联,即用textarea初始化一个kindeditor对象itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");

    //初始化类目选择和图片上传器

    TAOTAO.init({fun:function(node){

    TAOTAO.changeItemParam(node, "itemAddForm");

    }});

    三、设置要上传的参数var TT = TAOTAO = {

    // 编辑器参数

    kingEditorParams : {

    //指定上传文件参数名称

    filePostName : "uploadFile",

    //指定上传文件请求的url。

    uploadJson : '/pic/upload',

    //上传类型,分别为image、flash、media、file

    dir : "image"

    },

    init : function(data){

    // 初始化图片上传组件

    this.initPicUpload(data);

    // 初始化选择类目组件

    this.initItemCat(data);

    },

    // 初始化图片上传组件

    initPicUpload : function(data){

    $(".picFileUpload").each(function(i,e){

    var _ele = $(e);

    _ele.siblings("div.pics").remove();

    _ele.after('

    // 回显图片

    if(data && data.pics){

    var imgs = data.pics.split(",");

    for(var i in imgs){

    if($.trim(imgs[i]).length > 0){

                _ele.siblings(".pics").find("ul").append("

    ");

    }

    }

    }

    //给“上传图片按钮”绑定click事件

    $(e).click(function(){

    var form = $(this).parentsUntil("form").parent("form");

    //打开图片上传窗口

    KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){

    var editor = this;

    editor.plugin.multiImageDialog({

    clickFn : function(urlList) {

    var imgArray = [];

    KindEditor.each(urlList, function(i, data) {

    imgArray.push(data.url);

                    form.find(".pics ul").append("

    ");

    });

    form.find("[name=image]").val(imgArray.join(","));

    editor.hideDialog();

    }

    });

    });

    });

    });

    服务端代码public Map uploadPicture(MultipartFile uploadFile) {

    Map resultMap=new HashMap<>();

    try {

    //生成一个新的文件名

    //去原始文件名

    String oldName=uploadFile.getOriginalFilename();

    //生成新的文件名

    //UUID.randomUUID();

    String newName=IDUtils.genImageName();

    newName=newName+oldName.substring(oldName.lastIndexOf("."));

    String imagePath=new DateTime().toString("/yyyy/MM/dd");

    //上传图片

    boolean result=FtpUtil.uploadFile(FTP_ADDRESS,FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASE_PATH,

    imagePath, newName, uploadFile.getInputStream());

    System.out.println("result="+result);

    if(!result){

    resultMap.put("error", 1);

    resultMap.put("message", "文件上传失败");

    System.out.println("hh");

    return resultMap;

    }

    resultMap.put("error", 0);

    resultMap.put("url", IMAGE_BASE_PATH + imagePath + "/" + newName);

    return resultMap;

    } catch (IOException e) {

    resultMap.put("error", 1);

    resultMap.put("message", "文件上传异常");

    return resultMap;

    }

    }

    注意:服务端返回的json串的格式{error: 0|1,message|url} 其中error为整型不为字符串,如果写成字符串图片能够正常上传至服务器,但是不能在浏览器中回显。

    展开全文
  • 文章描述、新闻详情和产品介绍等,都需要大量的文字描述信息或图片、视频、文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器。 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如图: 一。...
  • 富文本编辑器介绍 富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器 KindEditor http://kindeditor.net/ UEditor http://ueditor.baidu.com/website/ ...
  • 第一版:存放位置: ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下;如图所示。 ...script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min...
  • AngularJS(八) kindeditor 富文本编辑器

    千次阅读 2018-05-25 17:16:00
    富文本编辑器介绍 富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常 用的富文本编辑器KindEditor http://kindeditor.net/ UEditor ...
  • 富文本编辑器介绍

    2020-11-21 19:44:25
    富文本编辑器介绍富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器KindEditor http://kindeditor.net/ UEditor http://ueditor.baidu.com/website/ ...
  • 上一篇简单写了一下wangeditor富文本的用法,现在简单介绍一下kindeditor富文本编辑器的用法,可以通过kindEditor文档地址查看kindEditor的文档进行开发。 接下来介绍一下我的用法: 首先需引入kindEditor的js <...
  • 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏览器兼容性问题,至于本文,我将为大家介绍一下KindEditor富文本编辑器与淘淘商城相结合的使用方法。 我们在发表一篇博客或者微博的时候,...
  • 正常HTML情况写输入长文本需要textarea 标签 。但textarea 标签局限性很大,切只能输入单一的文本...KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEd...
  • KindEditor插件提供了富文本编辑器在页面上的使用,我们在进行Django开发时可以通过相关配置使用KindEditor插件,以下KindEditor在Django中的使用: 二、KindEditor相关的配置步骤 第一步:先下载KindEditor,...
  • 现在比较常用的富文本编辑挺多的,如ueditor、fckeditor、kingeditor等,本文主要介绍一下KindEditor的配置与使用。 先去官网http://www.kindsoft.net/下载此编辑器的最新版本,比如现在的4.1.7版本,下载回来后,...
  • 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏览器兼容性问题,至于本文,我将为大家介绍一下KindEditor富文本编辑器与淘淘商城相结合的使用方法。  我们在发表一篇博客或者微博的时候...
  • 文本编辑器kindeditor

    2019-10-08 03:58:14
    文本编辑器介绍  KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入...
  • 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏览器兼容性问题,至于本文,我将为大家介绍一下KindEditor富文本编辑器与淘淘商城相结合的使用方法。我们在发表一篇博客或者微博的时候,...
  • 这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!之前使用的富文本编辑器是uEditor,...
  • 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏览器兼容性问题,至于本文,我将为大家介绍一下KindEditor富文本编辑器与淘淘商城相结合的使用方法。 我们在发表一篇博客或者微博的时候,...
  • springboot + extjs6 +kindeditor富文本编辑器整合+ 上传图片解决前后端分离跨域问题步骤 最近在项目中遇到使用富文本编辑器的情况,尝试使用ueditor、wangeditor都以上传图片跨域失败告终,只有kindeditor成功。 ...
  • 富文本编辑器

    2020-02-14 09:52:10
    常用的富文本编辑器下载(百度网盘)使用KindEditor完成商品录入使用介绍 富文本编辑器介绍 富文本编辑器,Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本编辑器 KindEd...
  • 一般用到富文本编辑器的地方:留言板,论坛的发帖页以及回复页等。 所用软件VS2012 KindEditor下载地址(本文实例中所用版本4.1.10): http://download.csdn.net/detail/donggege214/8454299 官网(版本可能...
  • 几种知名开源富文本编辑器记录和对比(仅供参考)1、UEditor 百度的。优点:插件多,基本满足各种需求,类似贴吧中的回复界面。缺点:不再维护,文档极少,使用并不普遍,图片只能上传到本地服务器,如果需要上传到...
  • 本文推荐两款简单的富文本编辑器KindEditor,NicEdit】用于获得所见即所得的编辑效果,本文仅供学习分享使用,如有不足之处,还请指正。概述这两款编辑器都是采用JavaScript编写,不需要引用dll,可以与主流后端...
  • 实现商品介绍的录入,要求使用富文本编辑器。 1.2 富文本编辑器介绍 富文本编辑器,Rich Text Editor,简称RTE,它提供类似于Microsoft Word 的编辑功能,容易被不会编写HTML的用户并设置各种文本格式的用户所...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 136
精华内容 54
关键字:

富文本编辑器kindeditor介绍