iT邦幫忙

0

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

請問各位先進,我要實作一個線上發信的功能,信件內容套用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 }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0

這是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" ) ;

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

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

謝謝指點,使用setData可以正常套用~

1
dragonH
iT邦超人 5 級 ‧ 2020-04-29 17:34:13

可以用 setData

codepen

參考

看更多先前的回應...收起先前的回應...
leo226 iT邦新手 4 級 ‧ 2020-04-30 14:21:23 檢舉

可以用喔,謝謝~不知道it邦這問答系統填寫是不是也是用CKEDITOR製作的~哈哈~還是還有其它好用的套件我不知道的~

我是沒在用ckeditor了。
主要是它太肥大了。

不過它的確支援很多功能沒錯。

我是換另外一套 tinymce 。
簡單的編輯器。要什麼功能再用plus掛入就好。

it邦我記得是不一樣的。

dragonH iT邦超人 5 級 ‧ 2020-04-30 14:50:42 檢舉

it邦是用 SimpleMDE

larrykkk iT邦新手 5 級 ‧ 2020-05-04 14:01:09 檢舉

我以為 it 邦是用 https://pandao.github.io/editor.md/ ?

larrykkk iT邦新手 5 級 ‧ 2020-05-04 14:01:41 檢舉
dragonH iT邦超人 5 級 ‧ 2020-05-04 14:16:32 檢舉

larrykkk

應該是 SimpleMDE

img

所以我才有辦法寫這個

我要發表回答

立即登入回答