CKEDITOR欄位要如何截入預設的範本文字

ckeditor asp.net mvc javascript

leo226 2020-04-29 17:20:14 ‧ 2911 瀏覽

分享至

請問各位先進，我要實作一個線上發信的功能，信件內容套用CKEDITOR的欄位使用（如下圖），想要實作讓使用者可以載入預設的信件範本文字。

<script type="text/javascript" language="javascript">
    var eitor = CKEDITOR.editor.replace(
        'ContentText',
        { skin: 'kama', width: '750px' }
    );
    $('#import').on('click', function () {
        $(".cke_show_borders > p").append("testTemplete");
    });
</script>

<div class="editor-label">
    信件內容：
</div>
<div class="editor-field">
    @Html.TextArea("ContentText", new { id = "ContentText", @name = "ContentText", @class = "form-control" })
</div>
<input id="import" type="button" value="載入範本" class="btn btn-info" />

打開HTML關於CKEDITOR欄位的原始碼如下圖:

載入範本的部份想要用javascript動態載入，以上實作簡單文字載入測試，不過測試都不成功，上來請教各位先進有沒有相關的使用經驗，可以將文字載入到CKEDITOR欄位裡呢？謝謝

淺水員 iT邦大師 6 級 ‧ 2020-04-29 17:36:55 檢舉

一般會先去找該套件的 API，因為它可能內部會做一些處理。
直接用 DOM 修改有時候會有一些問題。
至於存取方式已經有人回答了。
附個連結：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html#interacting-with-the-editor

leo226 iT邦新手 4 級 ‧ 2020-04-30 14:19:03 檢舉

感謝指點～與參考建議～

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2020-04-29 17:29:04

這是ckeditor的相關內容調整語法

讀取內容
var ct= CKEDITOR.instances.desc.getData();

寫入內容
CKEDITOR.instances.desc.setData( "Insert value" ) ;
這裡寫入的內容會注入到原始碼，所有帶有HTML的tags可以生效

取得焦點
CKEDITOR.instances.desc.focus();

插入內容
CKEDITOR.instances.desc.insertHtml( "insert value" ) ;

你可以用如上的語法處理。