ckeditor(ckeditor5中文)
如何设置ckeditor的窗口大小
设置ckeditor的窗口大小的方法：
1、HTML页面引用CkEditor的这个配置文件，即引用JS文件。
2、在HTML页面里面放置两个Hidden类型的Input，一个用于设置高度。
怎么为ckeditor添加图像
为ckeditor添加图像的方法
1. 到官网下载ckeditor
2. 复制到java web项目目录下
3. 配置config文件，打开图片上传功能
CKEDITOR.editorConfig = function (config) {
// 换行方式
config.enterMode = CKEDITOR.ENTER_BR;
// 当输入：shift+Enter是插入的标签
config.shiftEnterMode = CKEDITOR.ENTER_BR;//
//图片处理
config.pasteFromWordRemoveStyles = true;
config.filebrowserImageUploadUrl = "ckUploadImage.action?type=image";
// 去掉ckeditor“保存”按钮
config.removePlugins = 'save';
};
4. java后台处理代码
// 上传图片
@Action(value = "/ckUploadImage", results = { @Result(name = "success", location = "/upload.jsp") })
public String uploadImages() throws Exception {
HttpServletRequest request = ServletActionContext.getRequest();
FileOutputStream fos;
String webRoot = request.getSession().getServletContext().getRealPath(
"");
// 获取图片后缀名
String partRightType = uploadFileName.substring(uploadFileName
.lastIndexOf("."));
String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
// 判断图片的格式
if (!ImageFile.checkImageType(partRightType)) {
String path = "";
String alt_msg = "Sorry! Image format selection is incorrect, please choose GIF, jpeg, PNG format JPG, picture!";
pringWriterToPage("script type='text/javascript'window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');/script");
} else {
try {
uploadFileName = DateUtils.getDateNoStyle() + "-"
+ UUID.randomUUID() + partRightType;
String savePath = webRoot + Constants.UPLOAD_IMAGES_PATH;
File uploadFilePath = new File(savePath);
if (uploadFilePath.exists() == false) {
uploadFilePath.mkdirs();
System.out.println("路径不存在,但是已经成功创建了" + savePath);
} else {
System.out.println("路径存在了" + savePath);
}
fos = new FileOutputStream(new File(savePath + uploadFileName));
FileInputStream fis = new FileInputStream(getUpload());
byte[] buffer = new byte[1024];
int len = 0;
while ((len = fis.read(buffer)) 0) {
fos.write(buffer, 0, len);
}
fos.close();
fis.close();
} catch (FileNotFoundException foe) {
System.out.println("上传文件为0字节");
}
// String path = "http://" + request.getServerName() + ":"
// + request.getServerPort() + request.getContextPath()
// + Constants.UPLOAD_IMAGES_PATH + uploadFileName;
String path = request.getContextPath()
+ Constants.UPLOAD_IMAGES_PATH + uploadFileName;
String alt_msg = "";
pringWriterToPage("script type='text/javascript'window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');/script");
}
return null;
}
* 其实重点的代码就是这点
pringWriterToPage("script type='text/javascript'window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');/script");
CKEditor5的入门使用(react)
没有前言，开始讲解。
使用环境： 基于react的antd-pro框架，这部分受antd的影响较小（仅部分表标签）。 CKEditor5 的document 12.1.0版本.
cnpm install @ckeditor/ckeditor5-build-decoupled-document
可根据需求安装对应的主题插件:
index.js
以上按照官方文档也能写个差不多，主要是图片上传部分
uploadType.js
uploadType写完之后，按照"初始化"部分引入即可。
ckeditor怎么添加行距
由于dedecms将ckeditor做了集成，和一般的只针对于ckeditor对config.js修改不同，以后是我在dedecms 5.7版本上添加行间距按钮的方法：
1、下载ckeditor的行距插件包 ；
2.解压到ckeditor/plugins目录下；
3、由于dedecms 5.7自己集成了一个dedepage插件，用来添加ckeditor自定义插件，在/include/ckeditor/plugins/dedepage文件夹下，打开plugin.js文件在最后面添加： requires : [ 'lineheight' ]，添加完之后的代码如下：
// Register a plugin named "dedepage".
(function()
{
CKEDITOR.plugins.add( 'dedepage',
{
init : function( editor )
{
// Register the command.
editor.addCommand( 'dedepage',{
exec : function( editor )
{
// Create the element that represents a print break.
// alert('dedepageCmd!');
editor.insertHtml("