CKEditorをVisualforceで適用する際のサンプルコードと注意点
2時間くらい嵌って、非常に焦ったのでログ。
CKEditorというJavascriptのプラグインを使って、
Visualforceでリッチテキスト型の項目の編集画面を作成しようとした場合に起きた事象について。
編集ボタンを押して、画面を編集モードに切り替え
↓
CKEditorを適用した項目を表示・入力
↓
保存ボタンを押して保存
という、一般的な流れをVisualforceとApexで作成したものの・・・何故かCKEditorが適用されない。
どうやら、編集ボタンでreRenderして項目を表示している所が原因の模様。
散々悩んで、Google先生に聞いたら海外でそれらしき事例を発見。
英語が読めないけどコードは読める！なんだかそれっぽいJavascriptの呪文があるぞ！
という危ない感じで、藁にもすがる思いでコピペしたら、上手く表示されるようになりました。
っつーことで、上記みたいなフローのサンプルコードを置いておきます。
<apex:includescript value="{!URLFOR($Resource.CKEditor, 'ckeditor/ckeditor.js')}" /> <apex:outputpanel id="panel"> <apex:commandbutton action="{!doSave}" value="保存" rendered="{!editFlg}" reRender="panel"/> <apex:commandbutton value="{!IF(editFlg,'キャンセル' ,'編集')}" immediate="true" reRender="panel" action="{!changeEditFlg}" /> <br/> <apex:outputField value="{!Sample.RichTextDisp__c}" rendered="{!NOT(editFlg)}" /> <apex:inputTextarea value="{!Sample.RichText__c}" styleClass="ckeditor" rendered="{!editFlg}" richtext="false" /> <script type="text/javascript"> CKEDITOR.config.toolbar = [ [ 'Cut','Copy','Paste','PasteText'] ,['Undo','Redo','-','SelectAll','RemoveFormat'] ,['Bold','Italic','Underline','Strike','-','Subscript','Superscript'] ,['NumberedList','BulletedList','-','Outdent','Indent'] ,['JustifyLeft','JustifyCenter','JustifyRight'] ,['Link','Unlink'] ,'/' ,['Format','FontSize'] ,['TextColor','BGColor'] ]; for(name in CKEDITOR.instances){ delete CKEDITOR.instances[name]; } CKEDITOR.replaceAll(); </script> </apex:outputpanel>
呪文って言ってるのは、Javascriptのfor文の所ね。
引用元を見れば、コードの意味も分かるかも。私は調べる気力は無い。
