自定义 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/ 进行设置。