一款好用的文本编辑器KindEditor+PHP
来源:互联网 发布:阿里云技术支持 编辑:程序博客网 时间:2024/06/08 11:17
1,一款好用的文本编辑器KindEditor
下载页面: http://www.kindsoft.net/down.php
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>KindEditor一套开源的HTML可视化编辑器</title> <!-- 下载页面: http://www.kindsoft.net/down.php --> <!-- 引入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; // 原生API html = K('#editor_id').val(); // KindEditor Node API html = $('#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正式使用的案例 ============================*/ 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>
阅读全文
0 0
- 一款好用的文本编辑器KindEditor+PHP
- sublimetext一款好用的编辑器
- 一款好用的编辑器-markdown
- asp.net 文本编辑器kindeditor的使用
- kindeditor富文本编辑器的使用
- 富文本编辑器 kindeditor的使用
- KindEditor富文本编辑器的使用
- 24.富文本编辑器Kindeditor的使用
- 配置KindEditor文本编辑器
- kindeditor文本编辑器使用
- kindeditor富文本编辑器
- 使用kindeditor文本编辑器
- kindeditor 文本编辑器
- kindeditor文本编辑器
- 好的文本编辑器
- 一款强大易用的Vue-markdown文本编辑器插件
- 强烈推荐好用的文本编辑器Notepad++
- 一款比较好的JS编辑器
- css的一些技巧
- ubuntu apt-get install : unable to locate the package...
- 简单了解JDBC
- 第一次Java作业
- 将文本转成二维码
- 一款好用的文本编辑器KindEditor+PHP
- 5-Kylin Java Restful API
- ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛 A Visiting Peking University
- 初识Hibernate之环境搭建
- 抽象代数学习笔记(12)群上的可逆映射
- 数组中出现次数超过一半的数字
- 字符串匹配的Boyer-Moore算法
- 提高FMAX的时序优化方法
- 用python求一个列表中最大的切片的和