1. ckeditor5(Basic)の導入手順と使い方
前提
今回はckeditor5の導入手順を説明します。
ckeditor5には「Builds」と「Framework」の2種類があるみたいです。
この2つの違いは「Builds」はスピーディに導入できる&最低限の機能のに対して「Framework」は機能が充実しているという感じらしいです。(雑)
今回は「Builds」を導入してみようと思います。(「Framework」は機会があれば)
↓「Builds」の機能
エディタのダウンロード
公式サイトにアクセスします。
「Builds」にも「Classic」、「Balloon」、「Inline」と3つの種類がある。
おそらく見栄えの問題。
今回は「Classic」を選択。
ダウンロード画面はこちら。
今回は「Zip package」形式で導入します~。
理由は、「Command line」だとNode.js前提になるからNG。
「CDN」だとバグ改修とか勝手にやってくれて便利だろうけど外部依存になるのちょっと怖いからNG。
「Zip package」のダウンロードボタンを押すとメール購読者になるようせがまれるが登録しないでもダウンロード開始される。
実装
まず解凍したフォルダ内にあるjsファイルを以下のように読み込む(同じ階層にある前提)
<script src="ckeditor5-build-classic/ckeditor.js"></script> |
次にエディタを表示させたい箇所に以下のコードを突っ込む。
<textarea id="editor"> |
すると以下のようにエディタが組み込まれていることを確認。
データの取得&設定
データをセットしたい場合はsetData関数を使用する。
editor.setData( '<p>Some text.</p>' ); |
逆に取り出したい場合はgetData関数を使用する。
const data = editor.getData(); |
おわり!
ではまた ^^ノシ
人気ページ
最近更新/作成されたページ
- dasdsa (2022-11-13 07:57:24)
- Sydney top independent escorts (2022-11-13 07:56:58)
- 'include' is not defined (2022-06-09 22:05:10)
- 【django】ログイン 認証機能 (2022-06-06 14:30:24)
- [Dockerエラー] WSL 2 installation is incomplete. (2022-06-02 15:34:14)
- 【Laravelエラー】does not comply with psr-4 autoloading standard. Skipping. (2021-11-28 18:13:59)
- 複数のデータベースに接続する方法 (2021-11-16 12:58:24)
- SQLSTATE[22007]: Invalid datetime format: 1366 Incorrect string value: ~ (2021-11-07 07:19:55)
- 【Laravelエラー】Invalid request (Unsupported SSL request) (2021-11-01 04:19:34)
- 【Laravelエラー】Database hosts array is empty. (2021-10-04 00:01:48)
最近コメントのあったページ
- 【PHPフレームワーク】Laravelの使い方 (2023-02-06 06:06:49)
- 【Spring】@Serviceアノテーションとは (2023-02-06 06:06:02)
- サーバーとプロジェクトの紐づけ (2023-02-06 06:05:45)
- 【Spring Boot (JPA編)】DB接続設定からエンティティおよびリポジトリの作成、値の取得まで (2023-02-06 05:49:31)
- 【Spring Boot (JPA編)】DB接続設定からエンティティおよびリポジトリの作成、値の取得まで (2023-02-06 05:17:06)
- 【Spring Boot (JPA編)】DB接続設定からエンティティおよびリポジトリの作成、値の取得まで (2023-02-06 04:26:43)
- 抽象クラスの概念と必要性 (2023-02-06 04:25:34)
- 【Spring Boot (JPA編)】DB接続設定からエンティティおよびリポジトリの作成、値の取得まで (2023-02-06 03:36:30)
- 【Spring Boot (JPA編)】DB接続設定からエンティティおよびリポジトリの作成、値の取得まで (2023-02-06 03:35:30)
- プロキシ (2023-02-06 03:18:30)
最近の質問
- 質問です (2020-02-20 12:19:36)
- フリーランスの単価って高いですか? (2020-02-12 19:56:16)
- 情報系のaoを受けるつもりなんですが何かおすすめのソフトはありますか? (2020-02-12 19:54:22)
- test3 (2020-02-08 23:50:54)
- セレクトボックスのCSSのcontentで三角の部分が押せない (2019-07-03 13:06:10)
- GCPのwp-config.phpでpermission denied (2019-06-05 20:04:08)
- Spring FrameworkのEntityのカラム名の大文字小文字、アンスコについて (2019-02-01 07:13:49)
- PHP(Laravel)からPythonのプログラムを呼び出したいのですがどうすればよいでしょうか。 (2018-12-06 06:26:57)
- djangoを本番環境にデプロイしたいのですがどのレンタルサーバー or VPSサーバーがよいですか (2018-12-01 12:04:18)
- Django administrationのUsernameとPasswordについて (2018-11-30 11:55:20)
- Google Adsenseでアダルトコンテンツと誤認されてしまいました。 (2018-09-09 17:15:36)
- Google MapsをUnityで使用する方法&料金 (2018-08-28 02:37:26)
- Amazon PA-APIのSort=salesrankが効かない (2018-07-21 08:54:25)
- 楽観ロックと悲観ロックの違い (2018-01-11 05:05:33)
- レンタルサーバーって沢山ありますけどどこがいいでしょうか?AWSってどうなんですか? (2018-01-09 10:03:20)
- ディープラーニングのライブラリってどれがオススメですか? (2018-01-06 05:15:40)
- Webスクレイピングってどこまでが違法なんでしょうか? (2018-01-06 05:09:08)
- 人工知能(AI)、機械学習、ディープラーニングの違い (2018-01-06 02:40:44)
コメントを削除してもよろしいでしょうか?
No.1129 |
guest
| 2023-01-22 00:41:48
coursework writing uk [url="https://brainycoursework.com"]coursework questions[/url] coursework writing serviceNo.1128 |
guest
| 2022-12-25 06:26:25
https://hydroxychloroquinex.com/ hydroxychloroquine 200 mgNo.1127 |
guest
| 2022-12-15 23:16:34
<a href="http://www.candipharm.com/# ">candipharm</a>No.1126 |
guest
| 2022-12-11 09:53:33
<a href="http://candipharm.com/ ">www.candipharm.com/</a>No.1125 |
guest
| 2022-11-28 04:30:45
write my essays <a href=https://buytopessays.com>best online essay writers</a> cheap essay servicesNo.1124 |
guest
| 2022-11-25 09:10:03
best writing services <a href=https://buyacademicessay.com>professional essay writers for hire</a> cheap essay writersNo.1123 |
guest
| 2022-11-24 02:11:52
help writing a descriptive essay <a href=https://bestsessays.org>essay service review</a> essay writing helperNo.1122 |
guest
| 2022-11-22 16:49:07
usa essay writing services <a href=https://bestessaysden.com>pay for essay cheap</a> essay writing services torontoNo.1121 |
guest
| 2022-11-21 09:08:30
essay services reviews <a href=https://bestessayreviews.net>essay editor service</a> buy essay papersNo.1120 |
guest
| 2022-11-20 02:11:28
online help with essay writing <a href=https://besteasyessays.org>helping writing essay</a> custom written essaysNo.1119 |
guest
| 2022-11-16 00:11:45
best websites for essays <a href=https://au-bestessays.org>best essays</a> write my essay for cheapNo.1118 |
guest
| 2022-11-15 05:18:28
Pills information. Short-Term Effects. <a href="https://propecia4nowall.top">propecia without a prescription</a> in Canada Best trends of medicament. Get here.No.1117 |
guest
| 2022-08-15 19:21:57
У меня для Вас сразу 5 новостей, они помогут Вам в продвижении. Обратите внимание на новый инструмент, который: 1. Поможет в создании контент плана 2. Находит Email адреса Вашей целевой аудитории 3. Собирает контакты целевой аудитории на социальные сети для дальнейшей рекламы 4. Проследит за Вашими конкурентами, что бы Вы были в курсе, что они делают и как продвигаются. 5. Поможет в анализе рынка конкретно в Вашей нише. Подробнее на videostat.onlineNo.1061 |
guest
| 2021-12-21 07:05:37
Amoxicillin Dosage AmountsNo.1060 |
guest
| 2021-12-20 14:30:14
Amoxicillin Side Effects In CatsNo.1058 |
guest
| 2021-12-19 20:28:32
Zithromax 500mg OnlineNo.1046 |
guest
| 2021-12-11 09:37:47
effects of cialis common sideNo.1042 |
guest
| 2021-12-09 13:26:34
Medicament Generique Du ViagraNo.1038 |
guest
| 2021-12-07 14:14:10
AvanfilNo.1037 |
guest
| 2021-12-07 07:04:38
Commander Viagra PharmacieNo.1034 |
guest
| 2021-12-05 11:09:41
Cephalexin Rimadyl MixNo.1022 |
guest
| 2021-11-16 03:31:56
verapamil and cialisNo.1021 |
guest
| 2021-11-11 19:16:51
Is Keflex A Generic DrugNo.1018 |
guest
| 2021-11-10 22:49:34
On Line Worldwide Progesterone DiscountNo.1010 |
guest
| 2021-11-05 03:33:03
Antibiotics For Herpes AmoxicillinNo.1009 |
guest
| 2021-11-03 10:19:42
Cialis Vendita Onlin 5mg GenericoNo.1007 |
guest
| 2021-11-01 13:24:45
Posologia Propecia DiaNo.1005 |
guest
| 2021-10-31 22:27:03
Achat Cialis Meilleur PrixNo.1004 |
guest
| 2021-10-31 14:37:30
Buy Now Flagyl Cheap OnlineNo.1000 |
guest
| 2021-10-30 14:58:35
Trazodone CanadaNo.987 |
guest
| 2021-10-04 06:36:18
Vente BaclofeneNo.985 |
guest
| 2021-10-03 00:18:13
Mtabs ScamNo.980 |
guest
| 2021-09-21 09:34:55
Levitra ItalianoNo.977 |
guest
| 2021-09-18 11:39:49
cialis without a perscriptionNo.975 |
guest
| 2021-09-16 20:24:56
Dogs AmoxicillinNo.967 |
guest
| 2021-09-06 22:15:53
Fda Approved Canadian Online PharmaciesNo.964 |
guest
| 2021-08-29 19:46:06
Donde Comprar Cialis FarmaciaNo.962 |
guest
| 2021-08-29 14:44:49
generic cialis sweetNo.957 |
guest
| 2021-08-20 08:02:50
смотреть фильмы онлайн бесплатноNo.771 |
guest
| 2021-08-11 02:48:41
Фильм Дом Гуччи смотреть онлайнNo.769 |
guest
| 2021-08-08 08:23:28
Дом Гуччи 2021 смотреть онлайн