KindEditor编辑器使用
来源：互联网 发布：日语扫描翻译软件 编辑：程序博客网 时间：2024/06/05 14:43
转载：http://www.cnblogs.com/gimin/p/4572849.html
KindEditor使用
1）kindeditor默认模式调用
<link rel="stylesheet" href="./KindEditor/themes/default/default.css" /><script charset="utf-8" src="./KindEditor/kindeditor-min.js"></script><script charset="utf-8" src="./KindEditor/lang/zh_CN.js"></script><script> var editor,editor1; KindEditor.ready(function(K) { editor = K.create('textarea[name="content"]', { allowFileManager : true }); editor1 = K.create('textarea[name="content1"]', { allowFileManager : true }); //取得HTML K('input[name=getHtml]').click(function(e) { alert(editor1.html()); }); //取得文本(包含img,embed) K('input[name=getText]').click(function(e) { alert(editor.text()); }); //清空内容 K('input[name=clear]').click(function(e) { editor.html(''); }); });</script><body><form method="post" action="sub.php" id="myform"> <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea> <textarea name="content1" style="width:800px;height:400px;visibility:hidden;"></textarea> <input type="submit" value="提交"/></form></body>
效果如图：
2）简单模式
<link rel="stylesheet" href="./KindEditor/themes/default/default.css" /><script charset="utf-8" src="./KindEditor/kindeditor-min.js"></script><script charset="utf-8" src="./KindEditor/lang/zh_CN.js"></script><script> var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="content"]', { resizeType : 1, allowPreviewEmoticons : false, allowImageUpload : false, items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link'] }); });</script><body><form method="post" action="sub.php" id="myform"> <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea> <input type="submit" value="提交"/></form>
效果如图：
3）QQ风格
<!--<link rel="stylesheet" href="./KindEditor/themes/default/default.css" />--><script charset="utf-8" src="./KindEditor/kindeditor-min.js"></script><script charset="utf-8" src="./KindEditor/lang/zh_CN.js"></script><script> KindEditor.ready(function(K) { K.each({ 'plug-align' : { name : '对齐方式', method : { 'justifyleft' : '左对齐', 'justifycenter' : '居中对齐', 'justifyright' : '右对齐' } }, 'plug-order' : { name : '编号', method : { 'insertorderedlist' : '数字编号', 'insertunorderedlist' : '项目编号' } }, 'plug-indent' : { name : '缩进', method : { 'indent' : '向右缩进', 'outdent' : '向左缩进' } } },function( pluginName, pluginData ){ var lang = {}; lang[pluginName] = pluginData.name; KindEditor.lang( lang ); KindEditor.plugin( pluginName, function(K) { var self = this; self.clickToolbar( pluginName, function() { var menu = self.createMenu({ name : pluginName, width : pluginData.width || 100 }); K.each( pluginData.method, function( i, v ){ menu.addItem({ title : v, checked : false, iconClass : pluginName+'-'+i, click : function() { self.exec(i).hideMenu(); } }); }) }); }); }); K.create('#contentqq', { themeType : 'qq', items : [ 'bold','italic','underline','fontname','fontsize','forecolor','hilitecolor','plug-align','plug-order','plug-indent','link' ] }); });</script><body><form method="post" action="sub.php" id="myform"> <textarea id="contentqq" name="content" style="width:800px;height:400px;visibility:hidden;"></textarea> <input type="submit" value="提交"/></form></body>
效果如图：
4）使用其它类库
a）使用jQuery
<link rel="stylesheet" href="./KindEditor/themes/default/default.css" /><script charset="utf-8" src="./KindEditor/kindeditor-min.js"></script><script charset="utf-8" src="./KindEditor/lang/zh_CN.js"></script><script charset="utf-8" src="./jquery.js"></script><script> $(function() { var editor = KindEditor.create('textarea[name="content"]'); });</script><body><form method="post" action="sub.php" id="myform"> <textarea name="content" style="width:800px;height:200px;"></textarea> <input type="submit" value="提交"/></form>
b）在jQuery UI Dialog里打开编辑器
<!doctype html><html><head> <meta charset="utf-8" /> <title>With jQuery UI</title> <style> textarea { display: block; } #J_editorDialog { display: none; } </style> <link rel="stylesheet" href="./KindEditor/jquery-ui/css/smoothness/jquery-ui-1.9.2.custom.css" /> <link rel="stylesheet" href="./KindEditor/themes/default/default.css" /> <script charset="utf-8" src="./KindEditor/jquery-ui/js/jquery-ui-1.9.2.custom.js"></script> <script charset="utf-8" src="./KindEditor/kindeditor-all-min.js"></script> <script charset="utf-8" src="./KindEditor/lang/zh_CN.js"></script> <script charset="utf-8" src="jquery.js"></script> <script> var editor; //定义全局editor，防止变量未定义 $(function() { $('#J_openDialog').click(function() { $('#J_editorDialog').dialog({ title : '提交相关资料', width : 750, open : function(event, ui) { // 打开Dialog后创建编辑器 editor=KindEditor.create('textarea[name="content"]', { resizeType : 1 }); }, beforeClose : function(event, ui) { // 关闭Dialog前移除编辑器 KindEditor.remove('textarea[name="content"]'); } }); }); //用button的submit()方法提交，虽然有提交动作到处理程序，但无法获取textarea中输入的值 $('#sub').click(function(){ if(editor.html()==""){ alert("内容不能为空！"); return false; } }); }); </script></head><body><h3>在jQuery UI Dialog里打开编辑器</h3><div id="J_editorDialog"> <form action="sub.php" method="post" id="myform"> <textarea name="content" style="width:100%;height:200px;">文本原来内容</textarea> <input type="submit" id="sub" value="确定" /> </form></div><button type="button" id="J_openDialog">打开Dialog</button></body></html>
效果如图：
5）单独调用组件
a）文件上传按钮
<html><head> <meta charset="utf-8" /> <title>Upload Button Examples</title> <link rel="stylesheet" href="./KindEditor/themes/default/default.css" /> <script src="./KindEditor/kindeditor-all-min.js"></script> <script> KindEditor.ready(function(K) { var uploadbutton = K.uploadbutton({ button : K('#uploadButton')[0], fieldName : 'imgFile', url : './KindEditor/php/upload_json.php?dir=file', afterUpload : function(data) { if (data.error === 0) { var url = K.formatUrl(data.url, 'absolute'); K('#url').val(url); } else { alert(data.message); } }, afterError : function(str) { alert('自定义错误信息: ' + str); } }); uploadbutton.fileBox.change(function(e) { uploadbutton.submit(); }); }); </script></head><body><div class="upload"> <form action="sub.php" method="post"> <input class="ke-input-text" name="filename" type="text" id="url" value="" readonly="readonly" /> <input type="button" id="uploadButton" value="Upload" /> <input type="submit" value="提交"/> </form></div></body></html>
b）文件上传弹出框（显示文件说明和文件空间查看）
<html><head> <meta charset="utf-8" /> <title>fileDialog Examples</title> <link rel="stylesheet" href="./KindEditor/themes/default/default.css" /> <script src="./KindEditor/kindeditor.js"></script> <script src="./KindEditor/lang/zh_CN.js"></script> <script src="./jquery.js"></script> <script> KindEditor.ready(function(K) { var editor = K.editor({ allowFileManager : true }); K('#insertfile').click(function() { editor.loadPlugin('insertfile', function() { editor.plugin.fileDialog({ fileUrl : K('#url').val(), clickFn : function(url, title) { K('#url').val(url); //上传文件的路径 K('#filerealname').val(title); //指定上传文件的说明信息 editor.hideDialog(); } }); }); }); }); $(function(){ $('#sub').click(function(){ $('#myform').submit(); }); }); </script></head><body><form action="sub.php" method="post" id="myform"> <input type="text" id="url" name="filename" value="" /> <input type="hidden" id="filerealname" name="filerealname" value="" /> <input type="button" id="insertfile" value="选择文件" /><br/> <input type="button" id="sub" value="上传"/></form></body></html>
效果如图：
c）弹出对话框
<html><head> <meta charset="utf-8" /> <title>Dialog Examples</title> <link rel="stylesheet" href="./KindEditor/themes/default/default.css" /> <script src="./KindEditor/kindeditor.js"></script> <script src="./jquery.js"></script> <script> KindEditor.ready(function(K) { K('#create1').click(function() { var dialog = K.dialog({ width : 500, title : '测试窗口', body : '<div style="margin:10px;"><strong>内容内容内容内容内容内容内容内容</strong></div>', closeBtn : { name : '关闭', click : function(e) { dialog.remove(); } }, yesBtn : { name : '确定', click : function(e) { alert(this.value); } }, noBtn : { name : '取消', click : function(e) { dialog.remove(); } } }); }); }); </script></head><body><input type="button" id="create1" value="打开弹出框" /></body></html>
效果如图：
d）上传图片弹出框
<!doctype html><html><head> <meta charset="utf-8" /> <title>ImageDialog Examples</title> <link rel="stylesheet" href="./KindEditor/themes/default/default.css" /> <script src="./KindEditor/kindeditor.js"></script> <script src="./KindEditor/lang/zh_CN.js"></script> <script> KindEditor.ready(function(K) { var editor = K.editor({ allowFileManager : true }); //（网络图片 + 本地上传） K('#image1').click(function() { editor.loadPlugin('image', function() { editor.plugin.imageDialog({ imageUrl : K('#url1').val(), clickFn : function(url, title, width, height, border, align) { K('#url1').val(url); editor.hideDialog(); } }); }); }); //（网络图片） K('#image2').click(function() { editor.loadPlugin('image', function() { editor.plugin.imageDialog({ showLocal : false, imageUrl : K('#url2').val(), clickFn : function(url, title, width, height, border, align) { K('#url2').val(url); editor.hideDialog(); } }); }); }); //（本地上传） K('#image3').click(function() { editor.loadPlugin('image', function() { editor.plugin.imageDialog({ showRemote : false, imageUrl : K('#url3').val(), clickFn : function(url, title, width, height, border, align) { K('#url3').val(url); K('#filename_').val(title); //获取文件原名 editor.hideDialog(); } }); }); }); }); </script></head><body><form action="sub.php" method="post"><p> <input type="text" id="url1" value="" /> <input type="button" id="image1" value="选择图片" />（网络图片 + 本地上传）</p><p> <input type="text" id="url2" value="" /> <input type="button" id="image2" value="选择图片" />（网络图片）</p><p> <input type="text" id="url3" name="url" value="" /> <input type="text" id="filename_" name="filename_"/> <input type="button" id="image3" value="选择图片" />（本地上传）</p> <input type="submit" value="提交"/></form></body></html>
e）批量上传图片
<!doctype html><html><head> <meta charset="utf-8" /> <title>MultiImageDialog Examples</title> <link rel="stylesheet" href="./KindEditor/themes/default/default.css" /> <script src="./KindEditor/kindeditor.js"></script> <script src="./KindEditor/lang/zh_CN.js"></script> <script> KindEditor.ready(function(K) { var editor = K.editor({ allowFileManager : true }); K('#J_selectImage').click(function() { editor.loadPlugin('multiimage', function() { editor.plugin.multiImageDialog({ clickFn : function(urlList) { var div = K('#J_imageView'); div.html(''); K.each(urlList, function(i, data) {// div.append('<img src="' + data.url + '">'); div.append('<span>图片路径:</span>'); div.append('<input value= "' + data.url + '"'+'name="images['+ i +'][url]'+'"'+'>'); div.append('<span> alt属性:</span>'); div.append('<input value= "' + data.origin_name + '"'+'name="images['+ i +'][alt]'+'"'+'>'); div.append('<br/>'); }); editor.hideDialog(); } }); }); }); }); </script></head><body><input type="button" id="J_selectImage" value="批量上传" /><form action="sub.php" method="post"> <div id="J_imageView"></div> <br/> <input type="submit" value="确定上传"/></form></body></html>
效果如图：
阅读全文
0 0
- kindEditor编辑器的使用
- KindEditor编辑器的使用
- kindeditor文本编辑器使用
- 使用kindeditor文本编辑器
- kindEditor编辑器的使用
- KindEditor编辑器使用
- KindEditor编辑器的使用
- KindEditor 编辑器使用
- thinkphp使用编辑器kindeditor
- KindEditor编辑器的使用
- KindEditor编辑器使用
- KindEditor在线文本编辑器使用
- kindeditor 文本框编辑器 简单使用
- KindEditor 编辑器之简易使用
- html编辑器kindeditor的使用
- 网页编辑器kindeditor的使用
- 前端编辑器-kindeditor的使用
- struts2下kindeditor编辑器使用
- tensorflow(5)-辅助函数
- 认识 HTML 4.0
- VS2015 MATLAB混合编程之COM组件
- 共享内存
- 文章标题
- KindEditor编辑器使用
- CSdn测试
- PyTorch笔记5-save和load神经网络
- 作业帮-将json数组里面的每一个对象的value取出生成与之对应的二维数组
- 串口 SWD Jtag
- 约瑟夫环（约瑟夫问题） 采用循环单链表实现
- [ARC066F]Contest with Drinks Hard
- JavaWeb开发模式一：JSP+JavaBean
- python3.5调用face++
