3

Web ページに CodeMirror を埋め込んで、複数のコード スニペットを 1 つずつ編集しようとしています。

これを行うには：

  • node-defs-atomコード スニペットのマップを含む1 つの Reagent アトムを用意します。
  • node-history-atom見ているスニペットのキーを含む別の原子を持っています
  • CodeMirror の値をキーのコード マップの値に設定します。

機能しないものは次のとおりです。

(defn editor [node-defs-atom node-history-atom]
  (reagent/create-class
    {:reagent-render (fn [] (do [:textarea
                     { :value (@node-defs-atom (last @node-history-atom))
                       :auto-complete "off"}]))
     :component-did-mount (editor-did-mount  node-defs-atom node-history-atom)
     }))

(defn editor-did-mount [node-defs-atom node-history-atom]
  (fn [this]
    (let [codemirror (.fromTextArea  js/CodeMirror
                                     (reagent/dom-node this)
                                     #js {:mode "clojure"
                                          :lineNumbers true})]

                            ...... )))

で変更node-history-atomしreset!ても、CodeMirror 内のテキストには何も影響しません。何がうまくいかないのか本当にわかりません。

参照先をどこに置くべきか誰かが教えてくれたら、(@node-defs-atom (last @node-history-atom))とても感謝しています。

前もって感謝します！

4

1 に答える 1

3

CodeMirror エディターを処理する別の方法を試すことができます

  • 空のノードに CM インスタンスを作成する

    (def cm (atom nil))

(reset! cm (js/CodeMirror.
             (.createElement js/document "div")
             (clj->js {...})))

  • 次に、ビューは試薬クラスになりwrapper-id、親の id になります

    (reagent/create-class
  {:reagent-render         (fn [] @cm [:div {:id wrapper-id}])
   :component-did-update   update-comp
   :component-did-mount    update-comp})

  • CM を dom ノードに追加する関数を作成する

    (defn update-comp [this]
  (when @cm
    (when-let [node (or (js/document.getElementById wrapper-id)
                        (reagent/dom-node this))]
      (.appendChild node (.getWrapperElement @cm))))
于 2016-07-08T10:32:48.383 に答える