在实际的项目中,我们需要在项目中集成富文本编辑器,而kindeditor作为一款优良的编辑器,在项目中或多或少都会用到!

实际效果图
 
 

使用方法:

1.首先下载Kindeditor编辑器,我这里使用的是4.1.10版本。下载地址:http://kindeditor.net/down.php

2.在所需页面上引入Kindeditor相关js文件(注意引入路径):

<!--引入引入kindeditor编辑器相关文件-->
<link rel="stylesheet" href="Kindeditor4.1.10/themes/default/default.css" />
<script charset="utf-8" src="Kindeditor4.1.10/kindeditor.js"></script>
<script charset="utf-8" src="Kindeditor4.1.10/lang/zh_CN.js"></script>

3.在所需页面上需要一个<textarea></textarea>,(注意ID号唯一)如下所示:

<textarea id="content" name="content"  style="width:700px; height:300px;"></textarea>

4.在页面创建Kindeditor(参数自己可以根据实际项目选配):

<script type="text/javascript">
 $(function(){
    var editor;
    window.editor = KindEditor.create('#content',{
              resizeType:1,      
              urlType:'domain', // 带有域名的绝对路径
 });
 });
</script>

不能使用以下方式,使用以下方式会导致在谷歌、火狐等浏览器下无法正常显示编辑器。因为KindEditor.ready无法正常执行。

<script>
 var editor;
 KindEditor.ready(function(K){
    window.editor = K.create('#content',{

resizeType:1, 
         urlType:'domain', // 带有域名的绝对路径
    });
});
</script>

EasyUI集成Kindeditor使用的更多相关文章

  1. SSM框架搭建(Spring+SpringMVC+MyBatis)与easyui集成并实现增删改查实现

    一.用myEclipse初始化Web项目 新建一个web project: 二.创建包 controller        //控制类 service //服务接口 service.impl //服务 ...

  2. asp.net core 如何集成kindeditor并实现图片上传功能

     准备工作 1.visual studio 2015 update3开发环境 2.net core 1.0.1 及以上版本  目录 新建asp.net core web项目 下载kindeditor ...

  3. Easyui 基于kindeditor的扩展

    源码 /** * Author : ____′↘夏悸 * Easyui KindEditor的简单扩展. * 有了这个之后,你就可以像使用Easyui组件的方式使用KindEditor了 * 前提是你 ...

  4. Spring boot+Thymeleaf+easyui集成:js创建组件页面报错

    开发工具:Ideal 使用场景:Demo 前提:       环境:Spring boot +Thymeleaf+easyui 引入thymeleaf模板引擎 <html lang=" ...

  5. EasyUI在window中使用kindeditor 4.1.10在IE9中不能回显、获得焦点编辑的问题

    描述 :kindeditor4.1.10版本是当前最新的版本,在浏览器兼容性和功能方面都是值得一赞的,在开发中能方便快捷的满足一些开发需求. 问题 :  问题总是有的.  在使用过程中,遇到EasyU ...

  6. Spring+SpringMVC+MyBatis+easyUI整合进阶篇(十五)阶段总结

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 一 每个阶段在结尾时都会有一个阶段总结,在<SSM整合基础篇& ...

  7. Spring+SpringMVC+MyBatis整合(easyUI、AdminLte3)

    实战篇(付费教程) 花了几天的时间,做了一个网站小 Demo,最终效果也与此网站类似.以下是这次实战项目的 Demo 演示. 登录页: 富文本编辑页: 图片上传: 退出登录: SSM 搭建精美实用的管 ...

  8. 关于JqueryEasyUI集合Kindeditor

    写在前面 上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...

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

    1.在html里面添加 list.html list.html (function ($, K) { if (!K) throw "KindEditor未定义!"; functio ...

随机推荐

  1. Leetcode_24_Swap Nodes in Pairs

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/43302355 Given a linked list, s ...

  2. 使用SVM对多类多维数据进行分类

    最近,本人要做个小东西,使用SVM对8类三维数据进行分类,搜索网上,发现大伙讨论的都是二维数据的二分类问题,遂决定自己研究一番.本人首先参考了opencv的tutorial,这也是二维数据的二分类问题 ...

  3. Erlang Rebar 使用指南之四:依赖管理

    Erlang Rebar 使用指南之四:依赖管理 全文目录: https://github.com/rebar/rebar/wiki 本章链接: https://github.com/rebar/re ...

  4. linux设置系统时间

    设置系统时间 -         date命令:显示系统的时间,可以在直接输入"date"命令来查看系统的时间 -           date+%y/%m/%d -        ...

  5. 中国象棋游戏Chess(1) - 棋盘绘制以及棋子的绘制

    本项目都使用QT来实现绘图,没有任何第三方的资源. 工程详情:Github 首先将棋盘设计为一个类Board // Board.h // Board类实现了棋盘的绘制以及显示 // #ifndef B ...

  6. ReentrantReadWriteLock读写锁的使用1

    本文可作为传智播客<张孝祥-Java多线程与并发库高级应用>的学习笔记. 一个简单的例子 两个线程,一个不断打印a,一个不断打印b public class LockTest { publ ...

  7. 苹果新的编程语言 Swift 语言进阶(十四)--扩展

    扩展是为一个已经存在的类.结构.枚举类型添加新功能的一种方式,包括为不能存取源代码的那些已经存在的类型添加功能. 扩展类似于Objective-C语言中的类别,与类别不同的是Swift语言的扩展没有名 ...

  8. Java Socket:Java-NIO-Selector

    Selector 的出现,大大改善了多个 Java Socket的效率.在没有NIO的时候,轮询多个socket是通过read阻塞来完成,即使是非阻塞模式,我们在轮询socket是否就绪的时候依然需要 ...

  9. Java多线程 阻塞队列和并发集合

    转载:大关的博客 Java多线程 阻塞队列和并发集合 本章主要探讨在多线程程序中与集合相关的内容.在多线程程序中,如果使用普通集合往往会造成数据错误,甚至造成程序崩溃.Java为多线程专门提供了特有的 ...

  10. CSS 弹性容器

    该文章为英文原文译文及一些自己的拙见墙裂推荐读原文浏览原文请戳这里 : CSS-STRICKS 弹性布局 (Flexbox Layout) 什么是弹性布局 Flexbox Layout 模块旨在提供一 ...