下载插件
ckeditor4.4.6 标准版standard
官网下载:https://download.cksource.com/ckeditor/ckeditor/ckeditor 4.4.6/ckeditor_4.4.6_standard.zip
引入插件
<script type="text/javascript" src="/js/plugins/ckeditor/ckeditor.js"></script>
使用
<textarea id="details" name="productdetails.details" class="ckeditor" rows="10"></textarea>
上传图片支持
找到ckeditor下的config.js文件,添加如下配置:
//上传图片的路径
config.filebrowserimageuploadurl = '/product/ckedituploadimg';
/product/ckedituploadimg是后台的controller方法
注意:在springboot主配置文件中需要添加静态资源映射路径
多加这行属性spring.resources.static-locations=classpath:/meta-inf/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${file.path},这样应用才能访问到该图片
后台上传图片代码要有ckedit的支持
/**
*
* @param upload ckedit默认找upload变量名
* @param request ckedit上传图片需要用到
* @param response ckedit上传图片需要用到
*/
@requestmapping(value = "/ckedituploadimg")
public void ckedituploadimg(multipartfile upload, httpservletrequest request,httpservletresponse response){
try {
//上传文件并返回文件名
string filename = uploadutil.upload(upload, filepath);
// 结合ckeditor功能
// imagecontextpath为图片在服务器地址,如/upload/123.jpg,非绝对路径
string imagecontextpath = "/upload/"+filename;
response.setcontenttype("text/html;charset=utf-8");
string callback = request.getparameter("ckeditorfuncnum");
printwriter out = response.getwriter();
out.println("<script type=\"text/javascript\">");
out.println("window.parent.ckeditor.tools.callfunction(" + callback + ",'" + imagecontextpath + "',''" + ")");
out.println("</script>");
out.flush();
out.close();
}catch (exception e){
e.printstacktrace();
}
}
ckedit常用操作
获取ckedit的实例对象
一般不直接new出实例,而是通过ckeditor.replace方法 或者 ckeditor.instances属性来获取编辑框实例.
ckeditor.replace('myeditor');
ckeditor.instances.myeditor
获取ckedit编辑器的数据
ckeditor.replace('myeditor').getdata()
初始化ckedit
ckeditor.replace( 'editor1',
{
extraplugins = 'myplugin1,myplugin2',//扩展自己的插件
//下面是ckeditor各种属性配置.
toolbar :
[
['styles', 'format'],
['bold', 'italic', '-', 'numberedlist', 'bulletedlist', '-', 'link', '-', 'about']
]
});
跟修改config.js文件是一样的效果