一款好用的文本编辑器KindEditor+PHP
2024-06-10 16:33:02
1，一款好用的文本编辑器KindEditor
下载页面: http://www.kindsoft.net/down.php<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>KindEditor一套开源的HTML可视化编辑器</title><!-- 引入kindeditor编辑器的js --><script charset="utf-8" src="./editor/kindeditor.js"></script> <!-- 引入kindeditor编辑器的中文字符集 --><script charset="utf-8" src="./editor/lang/zh-CN.js"></script> <!-- code@kindeditor-4.1.11-zh-CN --><!-- 引入kindeditor编辑器的css --><link rel="stylesheet" type="text/css" href="./editor/themes/default/default.css> <link rel=" stylesheet" type="text/css" href="./editor/themes/simple/simple.css">
</head>
<body>
<form action="" method="" enctype="multipart/form-data"><p>下面是KindEditor的编辑区域：</p><!-- 在需要显示编辑器的位置添加textarea输入框；id唯一 --><textarea id="editor_id" name="content"style="width:700px;height:300px;"> <strong>HTML内容</strong> </textarea></form>
</body><script>// 一，修改HTML页面// 1-1，宽度和高度可用inline样式设置KindEditor.ready(function (K) {window.editor = K.create('#editor_id');});//1-2 通过K.create函数的第二个参数，可以对编辑器进行配置var options = {cssPath: '/css/index.css', filterMode: true};var editor = K.create('textarea[name="content"]', options);
</script><script type="text/javascript">//二，获取HTML数据// 取得HTML内容html = editor.html();// 同步数据后可以直接取得textarea的value。// KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。// 找到form后onsubmit事件里添加sync函数editor.sync();html = document.getElementById('editor_id').value;// 原生APIhtml = K('#editor_id').val();//KindEditor Node APIhtml = $('#editor_id').val();// jQuery// 设置HTML内容editor.html('HTML内容');
</script><script>/* KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式，保留所有标签。找到form后onsubmit事件里添加sync函数*/// 关闭过滤模式，保留所有标签KindEditor.options.filterMode = false;KindEditor.ready(function (K)){K.create('#editor_id');} </script>
<script type="text/javascript">/* ========== KindEditor中的items 中的参数介绍： ========== */source : 'HTML代码',undo : '后退(Ctrl+Z)',redo : '前进(Ctrl+Y)',cut : '剪切(Ctrl+X)',copy : '复制(Ctrl+C)',paste : '粘贴(Ctrl+V)',plainpaste : '粘贴为无格式文本',wordpaste : '从Word粘贴',selectall : '全选',justifyleft : '左对齐',justifycenter : '居中',justifyright : '右对齐',justifyfull : '两端对齐',insertorderedlist : '编号',insertunorderedlist : '项目符号',indent : '增加缩进',outdent : '减少缩进',subscript : '下标',superscript : '上标',title : '标题',fontname : '字体',fontsize : '文字大小',textcolor : '文字颜色',bgcolor : '文字背景',bold : '粗体(Ctrl+B)',italic : '斜体(Ctrl+I)',underline : '下划线(Ctrl+U)',strikethrough : '删除线',removeformat : '删除格式',image : '图片',flash : '插入Flash',media : '插入多媒体',table : '插入表格',hr : '插入横线',emoticons : '插入表情',link : '超级链接',unlink : '取消超级链接',fullscreen : '全屏显示',about : '关于',print : '打印',fileManager : '浏览服务器',advtable : '表格',yes : '确定',no : '取消',close : '关闭',editImage : '图片属性',deleteImage : '删除图片',editLink : '超级链接属性',deleteLink : '取消超级链接',tableprop : '表格属性',tableinsert : '插入表格',tabledelete : '删除表格',tablecolinsertleft : '左侧插入列',tablecolinsertright : '右侧插入列',tablerowinsertabove : '上方插入行',tablerowinsertbelow : '下方插入行',tablecoldelete : '删除列',tablerowdelete : '删除行',noColor : '无颜色',invalidImg : "请输入有效的URL地址。\n只允许jpg,gif,bmp,png格式。",invalidMedia : "请输入有效的URL地址。\n只允许swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb格式。",invalidWidth : "宽度必须为数字。",invalidHeight : "高度必须为数字。",invalidBorder : "边框必须为数字。",invalidUrl : "请输入有效的URL地址。",invalidRows : '行数为必选项，只允许输入大于0的数字。',invalidCols : '列数为必选项，只允许输入大于0的数字。',invalidPadding : '边距必须为数字。',invalidSpacing : '间距必须为数字。',invalidBorder : '边框必须为数字。',pleaseInput : "请输入内容。",invalidJson : '服务器发生故障。',cutError : '您的浏览器安全设置不允许使用剪切操作，请使用快捷键(Ctrl+X)来完成。',copyError : '您的浏览器安全设置不允许使用复制操作，请使用快捷键(Ctrl+C)来完成。',pasteError : '您的浏览器安全设置不允许使用粘贴操作，请使用快捷键(Ctrl+V)来完成。'
</script>
<script>/****************************** 正式完整实例 ****************************************/KindEditor.ready(function (K) {var editor1 = K.create('#editor_id', {uploadJson: './editor/php/upload_json.php',fileManagerJson: './editor/php/file_manager_json.php',themeType: 'simple',allowFileManager: true,filterMode: false,items: ['source', '|', 'undo', 'redo', '|', 'preview', 'template', 'cut', 'copy', 'paste', 'plainpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about'],afterCreate: function () {var self = this;document.getElementById('editor_id').onclick = function () {self.sync();//将textarea的内容放到主页面上，而不是编辑器上var content = document.getElementById('editor_id').value;$.ajax({data: $('#myform').serialize(),});
</script>
</html>
一款好用的文本编辑器KindEditor+PHP相关推荐
- 富文本编辑器 Kindeditor 的使用和 常见错误
富文本编辑器 Kindeditor 的使用和 常见错误 错误一 问题描述:批量图片上传弹窗中 没有添加图片按钮 原因以及解决:按钮资源(.swf)被拦截 错误二 问题描述:图片上传失败 原因分析:批量 ...
- 推荐几款很棒的文本编辑器
对于从事网络编辑工作的人员来说,一款功能强大的文本编辑器是必不可少的,一般自带的记事本,功能相对比较简单,对于一些特殊的功能,例如:编辑文本.十六进制.ASCII码等就需要更加专业的文本编辑器.那么如 ...
- [原] 开源HTML文本编辑器--KindEditor
====================================================== 注:本文源代码点此下载 ================================= ...
- easyUI整合富文本编辑器KindEditor详细教程
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- kindeditor java ssm_easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- Kate 一款功能丰富的文本编辑器（可能是目前最好的开源跨平台轻量编辑器 之一）
参考:kate 跨平台KDE文本编辑器使用方法 汇集 https://blog.csdn.net/ken2232/article/details/130167973 有网络消息说:这款编辑器停止了更新 ...
- 11. Django 引入富文本编辑器KindEditor
打开微信扫一扫,关注微信公众号[数据与算法联盟] 转载请注明出处:http://blog.csdn.net/gamer_gyt 博主微博:http://weibo.com/234654758 Gith ...
- 10款著名的代码(文本)编辑器
下面是笔者总结的 10 个最好的免费代码文本编辑器: 1. NOTEPAD++ NOTEPAD++是一款免费又优秀的文本编辑器,支持在 MS Windows 环境下运行的多种编程语言.NOTEPAD+ ...
- 富文本编辑器KindEditor在前端JS的应用
1.引入KindEditor资源包 2.页面引入Js,Css文件 3.html代码: <tr><td class="left">讲师信息</td> ...
最新文章
- 按键驱动的恩恩怨怨之概述
- 安装了低版本Jdk后eclipse无法打开的终极解决方法
- randn--创建正态分布随机矩阵
- Android 开发者的 RxJava 详解(一)
- axure原型案例_AXURE原型设计：移动端搜索原型案例
- Redis学习之路（二）之Redis入门基础
- python画图设置彩色线条_Python数据处理从零开始----第四章（可视化）（19）一文解决线图line chart...
- Axure软件的使用
- matlab 图像分割_数字图像处理第三版中_冈萨雷斯【MATLAB】（推书活动第十七期）...
- BAT脚本清理注册表信息
- Wordpress 网站设计入门 把Wordpress放在一个独立子目录下
- GlobalMapper导出S57水深数据
- Doevents函数详解
- red5安装 (for flash server) 与fms 功能类同。
- java和vue视频点播弹幕系统
- 美国纽约大学计算机排名,纽约大学计算机科学与信息系统世界排名2019年最新排名第20（QS世界排名）...
- 用python写情书_资深Python程序员用图片隐写术写情书，全公司只有她能看懂，绝了...
- pytest【运行单个测试用例】
- ECMAScript重点复习（一）
- 人工智能 一种现代方法 第14章 概论推理