SpringBoot集成ckeditor超詳解

SpringBoot集成ckeditor所遇見的問題以及ckeditor工具欄的配置

下載ckeditor.zip

下載後將ckeditor.zip解壓後的ckeditor文件夾放置項目的static下

引入ckeditor.js

<script th:src="@{/ckeditor/ckeditor.js}"></script>

頁面

<textarea id="myEdit" name="myEdit" rows="10" cols="10" ></textarea>

script

<script>
	CKEDITOR.replace( 'myEdit');
</script>

1.報錯處理

CKEDITOR is not defined

1.1.這個問題可能是不兼容。因爲ckeditor 的版本太高，不兼容低版本的瀏覽器內核

<script>
    CKEDITOR.env.isCompatible = true;
</script>

1.2.可能ckeditor被攔截了。在攔截器中配置，對ckeditor文件夾不進行攔截。

2.報錯處理

Uncaught SyntaxError: Unexpected token ‘<’

Uncaught TypeError: Cannot set property ‘dir’ of undefined

可能因爲路徑的問題導致ckeditor文件夾下的js沒有正常引入

手動引入的ckeditor.js確實是ckeditor文件夾下的

這三個文件是ckeditor引入的，而且這三個文件是在ckeditor文件夾下，所以更改引入的路徑。

<script>
   	//需要手動修改ckeditor目錄
   	window.CKEDITOR_BASEPATH = 'ckeditor/';
</script>
<script th:src="@{/ckeditor/ckeditor.js}"></script>

---

需要將修改的ckeditor目錄放置在引入ckeditor.js代碼的上面。

---

ckeditor工具欄設置

因爲用戶只需要上下角標功能，我這設置的就顯示這倆。

<script>
	//CKEDITOR.replace( 'myEdit');
	CKEDITOR.replace( 'myEdit',{
		toolbar :[
			['Subscript','Superscript']
			/*//加粗     斜體，     下劃線      穿過線      下標字        上標字
			['Bold','Italic','Underline','Strike','Subscript','Superscript'],
			//數字列表          實體列表            減小縮進    增大縮進
			['NumberedList','BulletedList','-','Outdent','Indent'],
			//左對齊             居中對齊          右對齊          兩端對齊
			['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
			//超鏈接 取消超鏈接 錨點
			['Link','Unlink','Anchor'],
			//圖片    flash    表格       水平線            表情       特殊字符        分頁符
			['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
			'/',
			//樣式       格式      字體    字體大小
			['Styles','Format','Font','FontSize'],
			//文本顏色     背景顏色
			['TextColor','BGColor'],
			//全屏           顯示區塊
			['Maximize', 'ShowBlocks','-']
			*/
			],
			height: '320px', width: '552px'
		});
</script>

測試文件

鏈接:https://pan.baidu.com/s/17VRPW9p8Tk787Hb5BGnhpw
密碼:1heu