.personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); border-top-left-radius: 7px; border-top-right-radius: 7px; color: rgba(255, 255, 255, 1); height: 1.8em; line-height: 1.8em; padding: 5px }

1.富文本编辑器介绍

  富文本编辑器,Rich Text Editor,简称RTE,它提供类似于Microsoft Word的编辑功能。常用的富文本编辑器:

  KindEditor   http://kindeditor.net/

  UEditor   http://ueditor.baidu.com/website/

  CKEdirot  http://ckeditor.com/

这里介绍使用KindEditor的使用。

2.下载

  进入官网:http://kindeditor.net/down.php 下载(其官网也有演示的界面)

  下载解压后,进入到目录: kindeditor\kindeditor-4.1.10\examples,双击index.html用浏览器打开,可以看到目录界面。

  

3. 富文本创建步骤

  根据自己业务的需求,选择相应的富文本类型。这里选择 第一个 default.html (默认模式) 说明

在前端界面代码中引入css 和 js

      <link rel="stylesheet" href="../themes/default/default.css" />
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>

创建操作富文本的对象editor

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

使用的时候,要获取富文本中的相关内容按如下方式:

  其中配置说明如下:

  K.create 表示创建编辑器对象

  K.create('textarea[name="content"]', xxx); 中的content 表示放置富文本的textarea的name=“content”相对应, 即:<textarea name="content" style="width:800px;height:400px;visibility:hidden;">KindEditor</textarea>

  allowFileManager:【是否允许浏览服务器已上传文件】

  补充说明:

  editor.html(); //取得HTML

  editor.isEmpty();  //判断是否为空

  editor.text();  //取得文本(包含img,embed)

  editor.selectedHtml();  //取得选中的HTML

  editor.html('<h3>Hello KindEditor</h3>');  //设置HTML

  editor.text('<h3>Hello KindEditor</h3>');  //设置文本

  editor.insertHtml('<strong>插入HTML</strong>');  //插入HML

  editor.appendHtml('<strong>添加HTML</strong>');  //添加HTML

  editor.html('');  //清空

4.配置文件中的参数说明

  在创建编辑器对象时,所有可添加的配置如下:

    allowFileManager 【是否允许浏览服务器已上传文件】
    默认值是:false
    ------------------------------------------------------
    allowImageUpload 【是否允许上传本地图片】
    默认值是:true
    ----------------------------------------------
    allowFlashUpload 【是否允许上传Flash】
    默认值是:true
    ----------------------------------------------
    allowMediaUpload 【是否允许上传多媒体文件】
    默认值是:true
    ------------------------------------------------
    pasteType 【设置粘贴类型】
    0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴(默认)
    ---------------------------------------------------
    resizeType 【设置可否改变编辑器大小】
    0:不能改变 1:只能改变高度 2:宽度和高度都可以改变(默认)
    ----------------------------------------------------------
    themeType 【主题风格】
    可设置"default"、"simple",指定simple时需要引入simple.css
    -------------------------------------------------------------
    designMode 【可视化模式或代码模式】
    数据类型:Boolean
    默认值是:true(可视化)
    ------------------------------------------
    afterCreate:function(){} 【编辑器创建后】
    afterCreate:function(){
    //alert('创建完成');
    }
    ------------------------------------------
    fontSizeTable 【制定文字大小】
    数据类型:Array
    默认值:['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
    -----------------------------------------------------------------------
    colorTable 【指定取色器里的颜色值】
    数据类型:Array
    [
    ['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
    ['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
    ['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
    ['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']
    ]
  上面是默认值
  ----------------------------------------------------------------------------------
    【Ctrl+Enter提交】
    afterCreate:function(){
    var self=this;
    KindEditor.ctrl(self.edit.doc, 13, function() {
    self.sync();
    //执行其他事件
    });
    }
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    var editor=KindEditor.create('#nr');
    editor.focus(); 【编辑器获取焦点】 
    var html=editor.html(); 【取得编辑器HTML内容】 
    var text=editor.text(); 【取得编辑器纯文本内容】 
    editor.remove(); 【移除编辑器】 
    editor.html('<strong>编辑器内容</strong>'); 【设置编辑器HTML】 
    editor.text('<strong>编辑器内容</strong>'); 【设置编辑器纯文本内容,直接显示HTML代码】 
    if(editor.isEmpty()){ 【判断编辑器内容是否为空】 
      alert('请输入内容');
      return false;
    }

    editor.insertHtml('<strong>插入内容</strong>'); 【将指定的HTML内容插入到编辑器区域里的光标处】 
    editor.appendHtml('<strong>追加内容</strong>'); 【将指定的HTML内容添加到编辑器区域的最后位置。】 
    editor.fullscreen(); 【编辑器切换全屏模式】 
    editor.readonly(false); //true:只读,false:取消只读  【设置编辑器的只读状态】

  

在线文本的编辑框——kindeditor富文本编辑的使用的更多相关文章

  1. KindEditor富文本编辑框和BeautifulSoup的基本使用

    KindEditor富文本编辑框 1.进入官网 2.下载 官网下载:http://kindeditor.net/down.php 本地下载:http://files.cnblogs.com/files ...

  2. 把DEDE的在线文本编辑器换成Kindeditor不显示问题

    在织梦论坛下载了[Kindeditor编辑器For DedeCMS],按照操作说明安装后,后台文章编辑的区域却显示空白,有人说不兼容V57版本,有人说不兼容gbk版本,我也纠结了很久,在网上找了很多版 ...

  3. 002.MFC_对话框_静态文本_编辑框

    一.建立 名为dialogAndCtl的MFC工程,并添加如图控件 1.将上方static text 控件 Caption属性设置为在文本框中如数文本,可以统计字符 2.edit control控件属 ...

  4. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  5. (转)淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  6. (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  7. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->Web版本“产品管理”事例编辑界面新增KindEditor复文本编辑控件

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器.KindEditor使 ...

  8. 使用Flask-CKEditor集成富文本编辑框

    使用Flask-CKEditor集成富文本编辑框 富文本编辑器即所见即所得编辑器,类似于文本编辑软件.它提供一系列按钮和下拉列表来为文本设置格式,编辑状态的文本样式即最终呈现出来的样式.在Web程序中 ...

  9. kindEditor富文本编辑器

    用法参考:http://kindeditor.net/docs/usage.html  一.使用 . 修改HTML页面 在需要显示编辑器的位置添加textarea输入框. <textarea i ...

随机推荐

  1. 100、nginx_https安全链接配置

    100.1. tcp的三次握手和四次挥手的过程: 1.三次握手(建立连接): 第一次:建立连接时,客户端发送SYN包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认: 第二次:服务器 ...

  2. ps 快速去掉不需要的部分

    1.打开图片---使用套索工具将不需要的圈起来----右键填充--直接点击确定就可以了

  3. SQLite Encryption(加密)新姿势

    什么是SQLite? SQLite是一个C语言实现的小型.快速.自包含.高可靠性.功能全面的SQL数据库引擎. 起因: 刚好项目上有个需求,需要使用VS2019+.Net famework 4.6.1 ...

  4. CentOS-配置jar包自启动(SpringBoot)

    在pom.xml文件<plugin>中添加配置后,再打包(开发人员) <plugin>     <groupId>org.springframework.boot& ...

  5. Elasticsearch-04-master选举

    3.2 master选举机制 3.2.1 选举算法 1)bully算法 核心思想 假定所有的节点都具有一个可以比较的ID,通过比较这个ID来选举master 流程说明 节点向所有比自己ID大的节点发送 ...

  6. 【Spring】Spring中的循环依赖及解决

    什么是循环依赖? 就是A对象依赖了B对象,B对象依赖了A对象. 比如: // A依赖了B class A{ public B b; } // B依赖了A class B{ public A a; } ...

  7. kong插件Prometheus+grafana图形化展示

    目录 1. 准备工作 3. 为kong添加 prometheus插件 4. 打开kong的metrics支持 4. 配置prometheus.yml添加kong提供的数据信息 5. 在 Grafana ...

  8. STM32学习进程

    新建一个自己的工程模板,以我所用的MDK4为例 MDK4软件图标 (1)新建一个自己储存数据的文件夹.以我自己为例(文件夹名字任取自己记住熟悉就行,以下将以我的文件夹文件进行操作讲解) 新建的总体文件 ...

  9. 【Azure 环境】Azure通知中心(Notification Hub)使用百度推送平台解说

    问题描述 在通知中心的页面中显示支持BaiDu,介绍一下支持的是百度(Baidu)的什么吗?Azure的这个功能在国内使用的时候是否可以保证国内安卓手机的信息送达率? 问题解答 通知中心的页面中的Ba ...

  10. PYTHON 当前.PY文件名不能与引入的模块同名

    当前文件名:sqlite3.py 文件引入import sqlite3 运行会出错,因为调用sqlite3的方法首先从当前文件找方法,当然找不到,所以会报错了