Django教程:[31]整合summernote编辑器
summernote是一款适合bootstrap2.x和3.x的富文本编辑器,我现在在做的网站是由django作为后台框架,bootstrap3.0作为前台框架的,所以用summernote是非常合适的,我们来看看我是怎么在页面中整合summernote的吧。
我们先要引入js和css,下面是我们所需要用到的js和css,不过我通常不这么引用。我会使用bootstrap提供的免费CDN
![Django教程:[31]整合summernote编辑器](https://exp-picture.cdn.bcebos.com/a48bc2e8904800fc47f94bbdd42043715edb93a1.jpg)
使用CDN的方法:所有这些链接都可以在bootstrap官网找到,这里就不再列举了。
![Django教程:[31]整合summernote编辑器](https://exp-picture.cdn.bcebos.com/8b3643dd884ce54a6329345ca3066b0193ddf7a1.jpg)
![Django教程:[31]整合summernote编辑器](https://exp-picture.cdn.bcebos.com/f11f54237971fe1df7d6cbaaea20a7cd0d6ee0a1.jpg)
![Django教程:[31]整合summernote编辑器](https://exp-picture.cdn.bcebos.com/cd93a566515985406d24d751b5a23a42a17ac4a1.jpg)
接着我们只要在textarea中指定id为summernote即可使其变为一个富文本编辑器。
![Django教程:[31]整合summernote编辑器](https://exp-picture.cdn.bcebos.com/e076d77622bc7dc55569f8ec5e460596b91429a6.jpg)
当然,我们也可以使用div标签,也是需要注明id为summernote即可。
![Django教程:[31]整合summernote编辑器](https://exp-picture.cdn.bcebos.com/51f9aa3ea8db574a563c402fa7f7dfb2dd1917a6.jpg)
最后,我们只要使用如下的命令启动summernote即可。
![Django教程:[31]整合summernote编辑器](https://exp-picture.cdn.bcebos.com/054056fe1e425d6bc5df9a9a11883913e9e500a6.jpg)
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:155
阅读量:59
阅读量:43
阅读量:85
阅读量:162