自定义 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

创建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

默认ExAdmin后台所有的string和textarea都是用input，可以在web/admin/your_model.ex中进行修改：

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即可。

最终，我们的后台编辑页面变成了：

后台编辑页面

如果需要自定义 Simditor，可以参考 http://simditor.tower.im/ 进行设置。