当前位置:文档之家› kindeditor控件实现文本编辑器使用详解(含代码)

kindeditor控件实现文本编辑器使用详解(含代码)

kindeditor控件实现文本编辑器使用详解(含代码)
kindeditor控件实现文本编辑器使用详解(含代码)

Kindeditor控件在PHP 中使用方法详解

1、简介:

KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。主要特点:

快速:体积小,加载速度快

开源:开放源代码,高水平,高品质

底层:内置自定义 DOM 类库,精确操作 DOM

扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能

风格:修改编辑器风格非常容易,只需修改一个 CSS 文件

兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

2、首先你需要去kindeditor官网下载目前最新版本的kindeditor文件包,官网:https://www.doczj.com/doc/b18731758.html,/down.php

3、下载后解压打开,会看见如图所示的文件夹

这里面包含有ASP、https://www.doczj.com/doc/b18731758.html,、JSP、php等文件夹,我们这里是在php中应用该控件,所以ASP、https://www.doczj.com/doc/b18731758.html,、JSP这三个文件夹是可以删除的,当然不删也无所谓

4、接下来将所有文件拷贝到你项目的根目录下,如图所示:

记得是拷贝到项目根目录下

5、新建一个test.php页面,在里面对kindeditor控件进行引用和配置

主要包含三部分1)引入css文件,2)定义一个textarea文本框用来显示控件,3)引入JavaScript文件,并且在HTML中嵌入一个js函数来调用控件

具体代码如下,本人自己测试通过:

kindeditor控件使用

效果图:

5、如果你自己向改变控件显示的效果,打开kindeditor文件目录下的themes文件,里面有一个default.css文件,在里面就可以自己编辑css文件,显示自己需要的效果

在相应的位置编辑即可

希望能对你有所帮助

kindeditor使用方法==

kindeditor详细使用说明 1.下载KindEditor 最新版本。打开下载页面 2. 解压zip文件,将所有文件上传到您的网站程序目录下。例如:http://您的域名/editor/ 3.在需要显示编辑器的位置添加TEXTAREA输入框。 id在当前页面必须是唯一的值,还有,在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。宽度和高度可用inline样式设置,也可用编辑器初始化参数设置。 在TEXTAREA里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、https://www.doczj.com/doc/b18731758.html,等)直接显示内容,则必须转换HTML特殊字符(>,<,&,")。具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、https://www.doczj.com/doc/b18731758.html,、PHP、JSP。 4.在该HTML页面添加以下脚本。注:KE.show的原理是先执行KE.init设置一些变量,等DOM 全部创建以后才开始执行KE.create创建编辑器。如果浏览器不触发DOMContentLoaded事件(例如:jQuery的$.ready,点击某个按钮,通过innerHTML 插入HTML等),则不能使用KE.show,需要直接调用KE.init和KE.create。 KE.init({ id : 'editor_id'});$.ready(function() { KE.create('editor_id');});调用KE.show和KE.init时,除id之外还可以设置其它的参数,具体属性请参考编辑器初始化参数。

文本编辑器c++实验报告附源代码

四川大学软件学院 实验报告 课程名称数据结构实验课时8 实验项目文本编辑器实验时间12到14周实验目的了解c++类的封装和KMP算法。 实验环境 Windows平台 VC6.0++ 实验内容(算法、程序、步骤和方法) 部分函数创建思想: 创建过程如下: a、定义LinkList指针变量*temp: LinkList *temp; b、定义文本输入变量ch,记录文本行数变量j,记录每行字符数变量i; c、申请动态存储空间:head->next=(LinkList *)malloc(sizeof(LinkList)); d、首行头指针的前驱指针为空:head->pre=NULL; 首行指针:temp=head->next; 首行指针的前驱指针也为空:temp->pre=NULL; 定义没输入字符时文章长度为0:temp->length=0; 初始化为字符串结束标志,防止出现乱码:for(i=0;i<80;i++) temp->data[i]='\0'; e、利用循环进行文本输入 for(j=0;jdata[i]=ch; //给temp指向的行赋值 ···· temp->length++;//行中字符长度加1 if(ch=='#') {NUM=j; break; //文章结束时,Num来记录整个文章的行数 }}} 在字符输入的过程中,如果在单行输入的字符超过了80个字符, 则需要以下操作: 输入字符数大于80,重新分配空间建立下一行 temp->next=(LinkList *)malloc(sizeof(LinkList)) ;

文本编辑器使用使用说明

文本编辑器使用说明书

目录 1文本编辑器结构 (1) 1.1功能操作按钮栏 (1) 1.2内容栏 (1) 2功能分解 (1) 2.1功能操作按钮栏第一排 (1) 2.1.1全屏编辑 (2) 2.1.2预览 (2) 2.1.3粘贴 (2) 2.1.4粘贴为无格式文本 (2) 2.1.5从MS Word 粘贴 (2) 2.1.6撤销 (3) 2.1.7重做 (3) 2.1.8插入/编辑图像 (3) 2.1.9插入/编辑表格 (4) 2.1.10插入水平线 (4) 2.1.11插入/编辑超链接 (4) 2.1.12取消超链接 (5) 2.1.13查找 (5) 2.1.14替换 (5) 2.1.15全选 (5) 2.1.16清除格式 (5) 2.2功能操作按钮栏第二排 (5) 2.2.1格式 (6) 2.2.2字体 (6) 2.2.3大小 (6) 2.3功能操作按钮栏第三排 (6) 2.3.1空格 (6) 2.3.2加粗 (6) 2.3.3倾斜 (7) 2.3.4下划线 (7) 2.3.5删除线 (7) 2.3.6左对齐 (7) 2.3.7居中对齐 (7) 2.3.8右对齐 (7) 2.3.9两端对齐 (7) 2.3.10插入/删除编号列表 (8) 2.3.11插入/删除项目列表 (8) 2.3.12文本颜色 (8) 2.3.13背景颜色 (8) 2.3.14下标 (8) 2.3.15上标 (8) 2.3.16源代码 (9)

1文本编辑器结构 文本编辑器大体结构可以分为两部分,分别为:功能操作按钮栏和内容栏。 1.1功能操作按钮栏 功能操作按钮栏:用于对内容进行编辑。 1.2内容栏 内容栏:用于显示输入的内容。 2功能分解 在功能操作按钮栏中功能按钮分为三排,下面将分别按照每排的顺序进行逐一介绍。 2.1功能操作按钮栏第一排 功能操作按钮栏第一排中共包含16个功能按钮,如下图所示。 图2-1-1 功能操作按钮栏第一排

几种常用网页文本编辑器总结

文本编辑器应用总结 一.lhgeditor文本编辑器 lhgeditor组件文件结构: 1. lhgeditor.js:组件的核心JS文件 2. lhgeditor.css:组件的样式表文件 3. images:组件所需的图片都在此文件夹中 以上三个文件为组件所必须的三个文件,组件包中其它以“_”开头的文件为示例的演示文件,实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件,记得加载组件前先要加载此文件。 lhgeditor组件使用说明: 1. 在调用组件的页面加载lhgcore.j s和lhgeditor.js两个文件。 2. 在window.onload函数里加入J.editor.add(编辑器的id).init(); 例:

二.nicEdit文本编辑器 //此处的引入文件位置路径为相对于该PHP文件的位置此为demo.php Note ?第一个参数可用其它CSS选择器,匹配多个textarea时只在第一个元素上加载编辑器。 ?通过K.create函数的第二个参数,可以对编辑器进行配置,具体参数请参考编辑器初始化参数。 var options = { cssPath : '/css/index.css', filterMode : true }; var editor = K.create('textarea[name="content"]', options); 4. 获取HTML数据 // 取得HTML内容 html = editor.html(); // 同步数据后可以直接取得textarea的value editor.sync(); html = document.getElementById('editor_id').value; // 原生API html = K('#editor_id').val(); // KindEditor Node API html = $('#editor_id').val(); // jQuery // 设置HTML内容 editor.html('HTML内容'); Note

C++课程设计简易文本编辑器

目录 第一章课程设计目的和要求 (1) 1.1课程设计的目 (1) 1.2基本要求 (1) 第二章课程设计任务内容 (2) 2.1设计背景 (2) 2.2简易文本编辑器设计内容 (2) 第三章详细设计 (3) 3.1总体结构图 (3) 3.2函数分析 (3) 3.3主函数程序流程图 (4) 3.4子函数流程图 (5) 第四章程序编码与调试 (7) 4.1程序编码 (7) 4.2编码调试 (8) 4.3运行结果 (9) 第五章课程设计心得与体会 (11) 附录1 参考文献 (12) 附录2 源程序代码 (13)

第一章课程设计目的和要求 C语言课程设计是一门实践性非常强的课程,不但要注重c语言程序设计基本知识的学习,更要注重程序设计技能的培养,使学生能够允许渐进地把握c语言程序设计的技能。通过课程设计,培养学生阅读和编写程序的能力,培养计算机程序设计的能力和素质,以及思维方法。初步积累编程经验,打下良好的计算机应用基础。 1.1课程设计的目 1.通过本项课程设计,可以培养独立思考、综合运用所学有关相应知识的能力, 能更好的巩固《c语言程序设计》课程学习的内容 2.掌握工程软件设计的基本方法,强化上级动手编程能力,闯过理论与实践相 结合的难关!更加了解了c语言的好处和其可用性。 3.掌握基本的程序设计过程和技巧,掌握基本的分析问题合理性,通过计算机 求解问题的能力,具备初步的高级语言程设计能力。为后续个门计算机课程 的学习和毕业设计打下结实基础。 4.通过c语言课程设计,使学生了解高级程序设计语言的结构。 1.2 基本要求 1.基本要求: ①要求用VC中的MFC控件打开和保存文件。 ②要求在设计的程序中至少能完成六种编辑功能。 ③完成的程序界面要美观,能够完成六种编辑的全过程。 2.创新要求: ①在记事本中增加工具栏,工具栏中应有常使用的工具按钮; ②在记事本中增加状态栏;

kindeditor图片上传后生成带域名绝对路径配置及提交空格无法保存解决方法

kindeditor图片上传后生成带域名绝对路径配置方法 kindeditor默认上传图是不带域名域名绝对路径了,如果我们希望生成之后带上域名就需要进入urlType进行设置了,我们kindeditor中的urlType有几个参数默认这空值”“、”relative”、”absolute”、”domain”了。 关键在于初始化kindeditor时指定以下参数: urlType ”“ 空为不修改URL ”relative”相对路径 ”absolute”绝对路径 ”domain”带域名的绝对路径。 ============================================================================== 关于kindeditor提交空格问题的解决办法 版本4.1.10 问题反馈:后台编辑器段首空格无法正常保存到数据库。 变通办法:早期,通知用户使用全角空格,但后面发现提交后显示正常,再次编辑时未出现空格。 最终解决办法: 修改kindeditor.js 725行 部分我公司调整后的js行数为752行 将本行修改为: var re = /([ \f\n\r\t\v]*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\ s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>([ \f\n\ r\t\v]*)/g; 就是把第一个和最后一个\s 替换成[ \f\n\r\t\v]

修改前请注意备份

相关主题
文本预览
相关文档 最新文档