IE6 対応の wysiwyg エディタ
CKEditor と TinyMCE が２大エディタ
CKEditor3
- CKEditor は FCKeditor の後継。
- 3系 : IE6対応
- https://docs-old.ckeditor.com/ckeditor_api/symbols/CKEDITOR.config.html
git clone https://github.com/dehy/ckeditor3
cd ckeditor3/
php -S 0.0.0.0:8000
<script type="text/javascript" src="ckeditor.js"></script>
<textarea cols="80" id="editor1" name="editor1" rows="10">
<div id="editor2">aaa</div>
</textarea>
<script>
// 非表示にしたいボタンを列挙
CKEDITOR.config.removePlugins = 'newpage,flash,save,templates';
// Enterキーで<br /> (デフォルトは<p></p>)
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
// Editor表示
CKEDITOR.replace('editor1', {
height: 500
});
</script>
// editor1 の値を取得する方法 (公式)
var src = CKEDITOR.instances.editor1.getData();
// iframe の中身を取得する方法
var iframe = document.getElementById('cke_editor1').getElementsByTagName('iframe')[0];
var src = iframe.contentWindow.document.body.innerHTML;
ckeditor4 (IE9以降対応)
注意点
- CKEditor3 では問題なかったが、CKEditor4では入力できるタグの制限がある。
全てのタグを許可するには
CKEDITOR.config.allowedContent = true;
- 日本語化 UTF-8 を SJIS化
sjis化
nkf -s --overwrite `find | grep ja.js`
TinyMCE v3
ソースコードエディターがポップアップ表示するのがちょっと気に入った。
# version 3.4.8+dfsg0-2 が入った。
apt install -y tinymce
cp -a /usr/share/tinymce/www/ ~/Documents/
cd www
# 一部修正
sed -e 's@/tinymce/tiny_mce.js@tiny_mce.js@' example.html > index.html
python3 -m http.server
サンプル
<script language="javascript" type="text/javascript" src="tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
// HTMLプレビューボタンも表示
theme : "advanced",
apply_source_formatting : false,
theme_advanced_buttons3_add : "fullpage"
});
</script>
<body>
<h1>TinyMCE Debian Test</h1>
<form method="post">
<textarea name="content" cols="50" rows="15">sample</textarea>
</form>
HTMLが自動で整形されるのを防ぐ
tinyMCE.init({
...
apply_source_formatting : false
});
Author And Source
この問題について(IE6 対応の wysiwyg エディタ), 我々は、より多くの情報をここで見つけました https://qiita.com/tukiyo3/items/b98bc23f09ebcbc229d1著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .