说明
- CKeditor版本 ckeditor_4.7.3_standard
- Tomcat版本 apache-tomcat-8.0.44
下载CKeditor和CKeditor文档
- https://ckeditor.com/ckeditor-4/download/
- https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_installation
- https://ckeditor.com/cke4/addons/plugins/all 插件下载
图片上传
下载好了!那么开始吧!
CKeditor默认把上传图片功能隐藏了,感觉好贱哦~
那么,他和我们躲猫猫,我们就把他找出来吧!
引用CKeditor
以下代码是官方给出 一切以官方为标准
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
引用正确后打开网页会看到CKeditor出来了!
为了上传图片,更改网页为jsp 这样我的Tomcat才可以发挥作用呀
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 引用ckeditor JS文件 -->
<script src="ckeditor/ckeditor.js"></script>
<title>CKEditor</title>
</head>
<body>
<center>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="100">
文字在这!
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration. 官方代码有部分改动,比如这个宽高设置
CKEDITOR.replace( 'editor1',{ height: