master

分支 (1)

管理

管理

master

light-year-admin-using-v5-for-example
/
lyear_js_ckeditor_5.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>富文本编辑器ckeditor 5 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>
.ck.ck-content:not(.ck-comment__input *) {
    height: 300px;
    overflow-y: auto;
}
</style>
</head>

<body>
<div class="container-fluid">

  <div class="row">

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">富文本编辑器ckeditor 5</div>
  	    </header>
  		<div class="card-body">

          <p>该示例是ckeditor 5，使用的是Classic editor版本。因为很多功能是以插件形式存在的，这里的版本如果存在你想要却没有的功能，大家可以去官网定制：<a href="https://ckeditor.com/ckeditor-5/online-builder/" target="_blank">https://ckeditor.com/ckeditor-5/online-builder/</a></p>
          <div class="callout callout-info mb-3">注意：这里编辑器的高度，是用css来控制的，默认不设置的话高度是auto的，这里演示用，设置为300px。</div>
          <div id="editor"></div>

  	    </div>
  	  </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/ckeditor5/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor5/translations/zh-cn.js"></script>
<script>
// 重点代码 适配器
class UploadAdapter {
    constructor(loader) {
        this.loader = loader;
    }
     upload() {
        return new Promise((resolve, reject) => {
            const data = new FormData();
	    	let file = [];
	    	//this.loader.file 这是一个Promise格式的本地文件流，一定要通过.then 进行获取，之前在各大博客查了很多文章都拿不到这个值，最后经过两个多小时的探索终于找到了是Promise问题。
	    	this.loader.file.then(res=>{
	    		file = res; //文件流
	    		data.append('file', file); //传递给后端的参数，参数名按照后端需求进行填写
	    		data.append('type','ckeditor');
	    		$.ajax({
	    		    url: 'data/upload.php', //后端的上传接口
	    		    type: 'POST',
	    		    data: data,
	    		    dataType: 'json',
	    		    processData: false,
	    		    contentType: false,
	    		    success: function (data) {
                        // 成功返回格式{"uploaded":1,"fileName":"图片名称","url":"图片访问路径"}
                        // 失败返回格式{"uploaded":0,"message":"失败原因"}
	    		        if (data) {
	    		            resolve({
	    		                default: '/data/' + data.url // 自己定义好自己的路径，这里演示用
	    		            });
	    		        } else {
	    		            reject(data.msg);
	    		        }

	    		    }
	    		});
	    	})
        });
    }
    abort() {
    }
}
ClassicEditor
	.create( document.querySelector( '#editor' ), {
		// toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        placeholder: '欢迎使用光年后台管理模板!',
        language: 'zh-cn'
	} )
	.then( editor => {
        // 加载了适配器
		editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
		    return new UploadAdapter(loader);
		};
		window.editor = editor;
	} )
	.catch( err => {
		console.error( err.stack );
	} );
</script>
</body>
</html>