Blazor整併CKEditor5(一)
近期又開始超忙碌了
要忙鐵人
還要協助研究技術>~<|||
好吧廢話不多說來準備整合富文本編輯器(CKEditor)到 Blazor 中吧
在很久前曾研究並於專案中使用過
那時結合NodeJs後端搭配ckeditor4
這次採用新版本ver5做整併
https://ckeditor.com/ckeditor-5/online-builder/
這裡多加兩項plugins (CKEditor 可讓我自行組合所需的插件)
這裡我就選以下這些
若有勾選到涉及雲端服務付費的會在最後一步驟匯出前有提醒
https://ckeditor.com/pricing/
預設自動幫我們挑選了這個有premium的
那就先取消選取
等他下載匯出一版js
預設解壓出來會有sample code直接可以運行跑效果
將ckeditor.js添加至專案當中的 wwwroot
再到_Host.cshtml
去引入此js
詳情可參考
Blazor第6天_Blazor_在Blazor中去呼叫存取javascript
預設build過的js會壓縮
這邊若要排版好看觀察有哪些function
可以先線上js排版好後觀察有哪些function可以使用
https://beautifier.io/
由於太長就省略
將新增好的另一個editor.js存放在相同目錄
editor.js程式碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | editors = {};
function CreateEditor(editorId, defaultValue, height, dotNetReference) {
ClassicEditor
.create(document.getElementById(editorId), {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo'
]
},
language: 'en',
licenseKey: '',
})
.then(editor => {
editors[editorId] = editor;
editor.setData(defaultValue);
editor.editing.view.change(writer => {
writer.setStyle('height', height, editor.editing.view.document.getRoot());
});
editor.model.document.on('change:data', () => {
let data = editor.getData();
dotNetReference.invokeMethodAsync('OnEditorChanged', data);
});
})
.catch(error => {
console.error(error);
});
}
function DestroyEditor(editorId) {
editors[editorId].destroy().then(() => delete editors[editorId])
.catch(error => console.log(error));
}
|
這兩隻js都必須放在
<script src="_framework/blazor.server.js"></script>
之上!!!!
新增一個FCKEditor Blazor Component
在Blazor中除了一個.razor程式一寫到底
若想要類似拆分出code-behind
可以新增一個
CKEditorComponent.razor
1 2 3 4 5 | <div style="width:@EditorWidth"> <div id="@EditorId"></div> </div> |
跟一個
CKEditorComponent.razor.cs -->(用partial class修飾)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace PDM.Pages.Component { public partial class CKEditorComponent : IDisposable { [Inject] public IJSRuntime JSRuntime { get; set; } [Parameter] public string EditorValue { get; set; } [Parameter] public EventCallback<string> EditorValueChanged { get; set; } [Parameter] public string EditorHeight { get; set; } [Parameter] public string EditorWidth { get; set; } string _editorId; public string EditorId { get { if (string.IsNullOrEmpty(_editorId)) _editorId = $"ckeditor_{Guid.NewGuid().ToString().ToLower().Replace("-", "")}"; return _editorId; } set => _editorId = value; } //Execute javascript function which will create CKEditor5 protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) await JSRuntime.InvokeVoidAsync("CreateEditor", EditorId, EditorValue, EditorHeight, DotNetObjectReference.Create(this)); await base.OnAfterRenderAsync(firstRender); } //Will be called from javascript by CKEditor5 when it’s content is changed [JSInvokable] public async Task OnEditorChanged(string data) { await EditorValueChanged.InvokeAsync(data); } public void Dispose() { JSRuntime.InvokeVoidAsync("DestroyEditor", EditorId); } } } |
新增一個測試用的原件頁面
FCKEditorTest.razor
1 2 3 4 5 6 7 8 9 10 11 | @page "/fck" <h3>FCKEditorTest</h3> <br /> <CKEditorComponent EditorHeight="200px" EditorWidth="600px" @bind-EditorValue="@editorValue"></CKEditorComponent> <i>@editorValue</i> @code { string editorValue { get; set; } = "在忙也要陪你喝杯咖啡 test test 123 #$%&*!"; } |
以上就可以完成一個有即時連動更新的富文本編輯器整合
留言
張貼留言