Skip to content

kindeditor富文本编辑器demo #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zouzz wants to merge 1 commit into
base: master
Choose a base branch
from
Open

kindeditor富文本编辑器demo #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
125 changes: 125 additions & 0 deletions php/kindeditor_demo/css/article.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
/*** 清楚间距 ***/
*{
margin: 0;
padding: 0;
}
/*** 设置字体--更新字体--字体抗锯齿 ***/
body{
font-family: 'Avenir Next';
color: #000;
background: rgba(225,225,225,0.3);
-webkit-font-smoothing:antialiased;/**字体抗锯齿**/
}

/*** 链接重新设置 ***/
a{
color:#FFF;
text-decoration: none;
display: inline-block;
height: inherit;
}
a:hover{color:#f15a22;}
/****背景图片自适应*****/
/*.main-code
{
background: #444 url(../../../static/img/back.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}*/

.left-nav
{
background: #444 url(../images/back.jpg);
/*background-attachment: fixed;*/
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 20%;
height: 100%;
position:fixed;
top:0px;
left:0px;
}
.left-nav .left-summary
{
color: #FFFFFF;
font-size: 18px;
margin-left: 15px;
margin-top: 60%;
}
.left-nav .left-summary h5
{
padding: 20px 0px;
}
.code-list{
background: #FFFFFF;
float: right;
width: 80%;
color: #000;
}
.whow-search
{
color: #fff;
border-color: #49be38;background: #4FC7BD;border-radius: 5px;width: 40px;text-align:center;margin:3px 3px;padding: 2px 3px;
position:fixed;
top:0px;
right:5px;

}
.whow-search:hover{border-color: #418A84;background: #418A84;}
.code-search
{

color: #fff;
border-color: #49be38;
border-bottom: 4px solid;
background:#E7F0F0;border-radius: 3px;width: 80%;height:50px;text-align:center;
position:fixed;
top:0px;
right:0px;
}
.code-search>span{
display:inline-block;
height: 40px;
line-height: 40px;
margin: 0 auto;
text-align: center;
padding: 0 5px;
}
.input-style{
padding: 5px 15px;
font-size: 16px;
width: 160px;
border-radius: 10px;
background: #fff;
color: #535d92;
height: 20px;
line-height: 20px;
border: none;
outline:none;
}
.code-search .to-search{
padding-left: 5px;
}
.code-search .hide-search{
color: #fff;
height: 20px;
line-height: 20px;
padding: 0;
border-color: #49be38;background: #4FC7BD;border-radius: 5px;width: 40px;text-align:center;margin:3px 3px;padding: 0 3px;
position:fixed;
top:0px;
right:5px;
}
.code-search .hide-search:hover{border-color: #418A84;background: #418A84;}
.code-list-warper{width: 90%;padding-left: 5px;margin-top: 60px;}
.code-list-detail{border-top:1px solid #CCC;padding: 8px 0;clear: both;}
.list-left{width: 60%;float: left;margin: 5px 10px;}
.list-left span{padding-left: 40px;letter-spacing: 1px;font-size: 18px;}
.list-left h5{padding:3px;}
.list-left b{font-size: 16px;color: #ccc;margin: 0px 5px;}
.list-right{width: 30%;float: right;}
.list-right>a{float: right;margin-right: 20px;}
.list-right img{width: 150px;height: 80px;margin: 5px auto;}
7 changes: 7 additions & 0 deletions php/kindeditor_demo/demo_action.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<?php
//var_dump($_POST);
echo "这里是接收数据页面";
echo "<hr />";
echo "文章标题是:--------".$_POST['article_title'];
echo "<br />";
echo "文章内容是是:-----".$_POST['article_content'];
171 changes: 171 additions & 0 deletions php/kindeditor_demo/demo_add_article.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="./kindeditor/themes/default/default.css" />
<script charset="utf-8" src="./kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="./kindeditor/lang/zh-CN.js"></script>
<link rel="stylesheet" href="./kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="./kindeditor/plugins/code/prettify.js"></script>
<link rel="stylesheet" href="./css/article.css" />
<style type="text/css">
body{
background: #E7F0F0;
}
.right-main{
margin-top:15px;
float: right;
width: 79%;
clear: both;
}
.right-main div{
margin: 5px 0;
}
.right-main .title-style input{
margin:3px;
padding: 5px 15px;
font-size: 15px;
width: 240px;
border-radius: 5px;
background: #fff;
color: #535d92;
height: 25px;
line-height: 25px;
border: none;
outline:none;
}

.do-action
{
display: block;
float: right;
margin-right: 60px;
width: 100px;
height: 25px;
line-height: 25px;
text-align: center;
border-color: #4FC7BD;
background: #4FC7BD;
border-radius: 10px;
padding: 5px 10px;
color: #fff;
}
.do-action:hover
{
border-color: #4FC7BD;
background: #4FC7BD;
cursor:pointer;
}
</style>
<script type="text/javascript">
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();
}
});
})
});
});
});
var editor = K.create('textarea[name="article_content]', {
themeType : 'qq',
items : [
'bold','italic','underline','fontname','fontsize','forecolor','hilitecolor','image','plug-align','plug-order','plug-indent','link','baidumap',
],
cssPath : './/kindeditor/plugins/code/prettify.css',
uploadJson : './/kindeditor/php/upload_json.php',
fileManagerJson : './/kindeditor/php/file_manager_json.php',
allowFileManager : true

});
//提交事件
K('.do-action').click(function(e)
{
var diaryTitle = $('input[name=article_title]').val();
if (!diaryTitle){alert('标题不能为空');return false;}
var diaryContent= editor.html();
if (!diaryContent){alert('内容不能为空');return false;}
editor.sync();
K('form[name=post_info]')[0].submit();
});
});
</script>
<title>kindeditor在qq风格上做了修改</title>
</head>
<body>
<div class='main-code'>
<div class="left-nav">
<div class="left-summary">
<h3>Kindeditor</h3>
<hr />
<p><a href="http://kindeditor.net/docs/usage.html" target="_blank" >用法解释</a></p>
<p><a href="http://kindeditor.net" target="_blank" >官网</a></p>
</div>
</div>
<div class="right-main">

<div>
<span class='do-action'>发布文章</span>
</div>
<div>
<span>注：这个demo 实在qq风格的基础上做了改造</span>
<br>
<span>113行可以对图标进行添加或删除，比如不需要百度地图删掉　'baidumap',　 即可</span>
</div>
<form name="post_info" method="post" action="demo_action.php">
<div class="title-style"><b>TITLE:</b><br/><input type="text" name="article_title" value=""></div>
<div>
<b>CONTENT:</b><br />
<textarea name="article_content" id= 'content_info' style="width:90%;height:500px;visibility:hidden;">
</textarea>
</form>
</div>
<div >

</div>

</div>
</div>
</body>
</html>
Binary file added php/kindeditor_demo/images/back.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions php/kindeditor_demo/js/jquery-1.7.2.min.js
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 15 additions & 0 deletions php/kindeditor_demo/kindeditor/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
*~
~*
*.diff
*.patch
*.bak
.DS_Store
Thumbs.db
.project
.*proj
.svn/
*.swp
dist/
node_modules/
_build/
attached/*
Loading