自定義 ExAdmin JavaScript 和 CSS

ExAdmin中提供了自定義js和css的功能，方便你加入只針對ExAdmin的代碼和樣式。具體可以參考ExAdmin文檔：
https://hexdocs.pm/ex_admin/ExAdmin.html

在config/config.exs添加如下代碼：

config :ex_admin,
head_template: {ExAdminDemo.AdminView, "admin_layout.html"}

你需要新建 admin_view.ex

defmodule ExAdminDemo.AdminView do
  use Paper.Web, :view
end

創(chuàng)建admin_layout.html.eex，這里只放css的<link>和<script>

<link rel="stylesheet" href="<%= static_path(@conn, "/css/simditor.css") %>">
<script src="<%= static_path(@conn, "/js/simditor.min.js") %>"></script>
<script type="text/javascript">
$(document).ready(function(){
  var editor = new Simditor({
    textarea: $('textarea'),
    defaultImage: 'http://temp.im/150x150'
  });
})
</script>

這里我們的Simditor初始化需要在所有HTML元素加載完成后初始化。

ExAdmin 使用 textarea

默認(rèn)ExAdmin后臺(tái)所有的string和textarea都是用input，可以在web/admin/your_model.ex中進(jìn)行修改：

register_resource Paper.Page do
  index do
    selectable_column

    column :id
    column :title
    column :slug
    actions 
  end

  form page do
    inputs do
      input page, :title
      input page, :slug
      input page, :content, type: :text
    end
  end
end

添加type: :text即可。

最終，我們的后臺(tái)編輯頁面變成了：

后臺(tái)編輯頁面

如果需要自定義 Simditor，可以參考 http://simditor.tower.im/ 進(jìn)行設(shè)置。