3

我试图在我的网页中嵌入一个 CodeMirror 来编辑几个代码片段，一次一个。

为此，我：

  • node-defs-atom拥有一个包含代码片段图的Reagent atom 。
  • 有另一个原子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-atomwithreset!对 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 回答