天天看點

CKEditor富文本編輯器demo如下:拷貝到txt,然後更改為.html字尾 輕按兩下打開即可(注意上傳傳回格式)

demo如下:拷貝到txt,然後更改為.html字尾 輕按兩下打開即可(注意上傳傳回格式)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CKEditor 的使用</title>
    
</head>

<script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>

    <script>
		var myEditor = null;
		window.onload = function(){
			 ClassicEditor
			.create(document.querySelector("#editor"),{
			        language: 'zh-cn',
					ckfinder: {
						//圖檔上傳位址 傳回格式:{"uploaded":名字,"url":"連結url"}
						uploadUrl: 'CKEditor/Upload'
					}
			}
			)
			.then(editor => {
				myEditor = editor;
			})
			.catch(error => {
				console.error(error);
			});
		}
		
		window.getContent = function(){
			var result = myEditor.getData();
			alert("result:" + result);
		}
    </script>
	
	
<body>
    <textarea id="editor"></textarea>
    <button onclick="getContent()">Get Content</button>
</body>

</html>

           

效果圖

CKEditor富文本編輯器demo如下:拷貝到txt,然後更改為.html字尾 輕按兩下打開即可(注意上傳傳回格式)

繼續閱讀