一:富文本的配置总结。
由于最近要实现web项目的上传文本、图片等功能,这时候就需要借助要富文本这个东西了,
然而网上的一些讲解配置的东西看的都不是很清楚,摸索之后还是自己总结了下。
1:首先,去网上下载一个Ueditor或者是kindEditor(推荐使用);
2:将下载好的文档解压,整个导入到你的项目中去,记住你导入的路径;
3:在文件里面找到file_manager_json.jsp文件,修改里面的图片上传地址(推荐使用绝对路径);
4:找到upload_json.jsp文件,修改里面的文件保存地址(绝对路径);
5:打开你实现功能的前台页面(jsp),声明你要用上的js和css,
6:然后在head里面加上这段代码,就可以实现文件的上传了。
var editor;
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id');
});
var options = {
cssPath :"static/editor/themes/qq/qq.css",
filterMode : true,
themeType:"common",
uploadJson :
'<%=request.getContextPath()%>/admin/upload_json.jsp',
fileManagerJson : '<%=request.getContextPath()%>/admin/file_manager_json.jsp',
allowFileManager : true
};
var editor = K.create('textarea[name="content"]', options);
二:pintuer遇到的问题以及总结
在进行web项目开发的时候,一定会遇到前台的问题,而pintuer是一款优秀的响应式的前端开源框架,
会让前端开发变得得心应手。总结一下使用拼图的经验吧,
首先我在网上下载了pintuer的包,解压之后将js和css放入项目中相应的包中,
在jsp文件里面声明你所要用上的css和js,(路径要改成在项目中的绝对路径)
然后在pintuer里面找你所需要的模块,参考里面的代码,根据它里面的代码实现你所想要实现的
功能模块。其实,pintuer没什么好讲的。
三:Echarts
echarts在我的理解中,就是一个适用于图形化工具的创建的一个插件(理解的比较片面哈)
然而echarts使用起来真的狠狠狠强大,
不想提的就是每次都要去网上下载包,下完还要解压,解压完了还要往项目里面导,
导完了也就算了吧,但是你又要配置,哦, 对了 。这个不需要配置了,把文件整个的导入项目后,
你有一个你想在某个页面上实现功能的jsp页面,在这jsp页面里面加上下面这段代码:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
至于下面的代码部分就是你想要实现的什么样的图表了,然后在根据你想要实现的,来修改代码中的
内容。
哦,对了对了,js和css这些东西要是要注意,同上面的那些东西。
ss
由于最近要实现web项目的上传文本、图片等功能,这时候就需要借助要富文本这个东西了,
然而网上的一些讲解配置的东西看的都不是很清楚,摸索之后还是自己总结了下。
1:首先,去网上下载一个Ueditor或者是kindEditor(推荐使用);
2:将下载好的文档解压,整个导入到你的项目中去,记住你导入的路径;
3:在文件里面找到file_manager_json.jsp文件,修改里面的图片上传地址(推荐使用绝对路径);
4:找到upload_json.jsp文件,修改里面的文件保存地址(绝对路径);
5:打开你实现功能的前台页面(jsp),声明你要用上的js和css,
6:然后在head里面加上这段代码,就可以实现文件的上传了。
var editor;
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id');
});
var options = {
cssPath :"static/editor/themes/qq/qq.css",
filterMode : true,
themeType:"common",
uploadJson :
'<%=request.getContextPath()%>/admin/upload_json.jsp',
fileManagerJson : '<%=request.getContextPath()%>/admin/file_manager_json.jsp',
allowFileManager : true
};
var editor = K.create('textarea[name="content"]', options);
二:pintuer遇到的问题以及总结
在进行web项目开发的时候,一定会遇到前台的问题,而pintuer是一款优秀的响应式的前端开源框架,
会让前端开发变得得心应手。总结一下使用拼图的经验吧,
首先我在网上下载了pintuer的包,解压之后将js和css放入项目中相应的包中,
在jsp文件里面声明你所要用上的css和js,(路径要改成在项目中的绝对路径)
然后在pintuer里面找你所需要的模块,参考里面的代码,根据它里面的代码实现你所想要实现的
功能模块。其实,pintuer没什么好讲的。
三:Echarts
echarts在我的理解中,就是一个适用于图形化工具的创建的一个插件(理解的比较片面哈)
然而echarts使用起来真的狠狠狠强大,
不想提的就是每次都要去网上下载包,下完还要解压,解压完了还要往项目里面导,
导完了也就算了吧,但是你又要配置,哦, 对了 。这个不需要配置了,把文件整个的导入项目后,
你有一个你想在某个页面上实现功能的jsp页面,在这jsp页面里面加上下面这段代码:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
至于下面的代码部分就是你想要实现的什么样的图表了,然后在根据你想要实现的,来修改代码中的
内容。
哦,对了对了,js和css这些东西要是要注意,同上面的那些东西。
ss