CKEditorとVisualforce 1

みなさん、こんばんは

レコードタイプをやりたかったんですが、仕事でCKEditorを調べる機会があったので、今回はCKEditorとVisualforceについて書いてみました。

まずはCKEditorをネットで検索してダウンロードします。

そうしたらSalesforceにログインして設定→開発→静的リソースの順に進みます。

新規ボタンから参照で先ほどダウンロードしたzipファイルを指定して保存します。

(名前はCKEditor4511fullにしました。)

そしたらば、設定→開発→Visualforceページを新規で作成します。

(名前はCKEditorPageとかにしました。)

<apex:page controller="CKEditorController">
  <apex:includeScript value="{!URLFOR($Resource.CKEditor4511full, 'ckeditor/ckeditor.js')}"/>
  <apex:form >
      <apex:inputTextarea id="ckinputTextarea1" value="{!inputTextarea}" richText="false" styleClass="ckeditor"/>
  </apex:form>

</apex:page>

設定→開発→Apexクラスを新規で作成してとりあえずこんな感じにします。

public with sharing class CKEditorController {

    public String inputTextarea { get; set; }
}

あとは設定→作成→タブからVisualforceタブを新規で作成します。

(CKEditorEditなんて名前で)

どのアプリケーションに追加するかはお好みで(^-^)

作成したタブをクリックして表示されます。

zipファイルの中のconfig.jsをカスタマイズして色々な設定ができるようです。

詳しくは「CKEDITOR.config - CKEditor 4 Documentation」などで検索すると出てきます。

味噌はapex:inputTextareaを使うことと、richText=falseとすることみたいですね。

今回はStyleClassで表示してますが、inputTextareaのidを直接Replaceする方法もあるようですので、次回以降に書きたいと思います。

寒空が続いていることに合わせて、レアルマドリーの引き分けが続いていて少し心配です。ロナウドとベンゼマのコンディションが上がってくればと思い、私も腹筋をしてから寝ようと思います。

アラマドリー!