Question

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

要做到这一点我：

让一个Reagent原子node-defs-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-atom更改reset!并不会对CodeMirror中的文本执行任何操作。我真的不确定会出现什么问题。

如果有人能告诉我应该在何处提及(@node-defs-atom (last @node-history-atom))，我将非常感激。

提前致谢！

Answer 1

您可以尝试其他方式来处理CodeMirror编辑器

在空节点上创建CM实例

(def cm (atom nil))

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

那么你的观点将是一个试剂类，而wrapper-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))))

ClojureScript：如何使用Reagent反应性地更改CodeMirror

1 个答案: