随着用odoo的人越来越多,奇葩的需求也是越来越多。。。。

这不,有同学就想替换掉website forum里边的summernote控件,花了点时间研究了一下,先说结论:替换是可行的。

先上替换之后的图,这里替换的是kindeditor:

要替换成别的,也是可以的,只不过需要使用odoo的前端开发规则,本模块计划做成一个demo供参考。

替换步骤:

1. 首先将kindeditor的源文件引入到新模块中

2. 将原来的summernote空间隐藏掉,并用kindeditor替代:

$('textarea.load_editor').each(function () {
var $textarea = $(this);
var $form = $textarea.closest('form'); $('.note-editor').hide();
KindEditor.ready(function(K){
window.editor=K.create($textarea,{
themeType:'default',
uploadJson : '/filemanager',
fileManagerJson : '/filemanager',
allowFileManager : true,
})
}); $form.on('click', 'button, .a-submit', function () {
window.editor.sync();
window.editor.html($textarea.val());
});
});

3. 你会发现虽然引用了新的控件,但是样式在提交后都消失不见了。。。。

解决方法:设置content字段的strip_style属性为false

4. 最后我们来解决图片上传的问题:

@http.route('/filemanager',type='http',auth="public",website=True,csrf=False)
def _store_file(self,*args,**kwargs):
img = kwargs['imgFile']
path = os.path.abspath(os.path.realpath(__file__)).split('controller')[0]+'static/files'
#os.path.abspath(join(os.getcwd(),'/web_kindeditor/static/files'))
filepath = path+'/'+img.filename
img.save(filepath)
url = request.env['ir.config_parameter'].get_param('web.base.url')+"/web_kindeditor/static/files/"+img.filename
return json.dumps({'error':0,'url':url})

5. 9.0 以后web url访问会有csrf验证的问题,这就是另外一回事儿了,有空再说。

Over。

模块共享地址依旧见群公告。

Odoo Website 替换 Summernote 为第三方富文本编辑器的更多相关文章

  1. SummerNote 富文本编辑器 - Rails 集成

    使用官方提供的CDN服务 将下面一段加入layout文件中 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css ...

  2. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

  3. Vue富文本编辑器(图片拖拽缩放)

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...

  4. summernote 富文本编辑器限制输入字符长度

    项目中需要一个比较简单的富文本编辑器,于是选中了summernote .虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下. 1:样式和bootstrap冲突,初始化之后显示为: .note-e ...

  5. 超好用的富文本编辑器Summernote的使用

    官网地址 中文文档 源码下载地址 Summernote依赖于jquery和bootstrap3/4   所以用时记得引入这俩依赖 奉上引入方法(官网说的很清楚,api也很详细): <!-- in ...

  6. summernote富文本编辑器

    下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...

  7. summernote富文本编辑器的使用

    最近在开发一个微信公众号的后台,微信公众号编辑的文章一直没有得到很好地适应,大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中,考虑到复制后会排版出现问题,所以给大家推荐一款很不错的W ...

  8. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  9. summernote(富文本编辑器)将附件与图片上传到自己的服务器(vue项目)

    1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...

随机推荐

  1. 15 个 Android 通用流行框架大全

      1. 缓存 名称 描述 DiskLruCache Java实现基于LRU的磁盘缓存 2.图片加载 名称 描述 Android Universal Image Loader 一个强大的加载,缓存,展 ...

  2. spring实例教程

    1.配置好spring mvc发现访问无法匹配,很可能是文件放的位置或者相对目录不对. 2.实例大全:http://www.yiibai.com/spring/spring-collections-l ...

  3. strcmp函数使用总结

    Action() { /********************************* * Author:旺仔 * object:strcmp * date:2015-12-09 * fuc:我输 ...

  4. loadrunner中lr_save_searched_string函数的使用

    控制abc后面的第几个字符: 控制字符长度: 总结: 实际应用: Action() { int i =0,j=0; char *tt_url = lr_eval_string("{tt_ur ...

  5. 廖雪峰js教程笔记6 generator一个坑 看完python在回来填坑

    generator(生成器)是ES6标准引入的新的数据类型.一个generator看上去像一个函数,但可以返回多次. ES6定义generator标准的哥们借鉴了Python的generator的概念 ...

  6. Eclipse如何替换android应用图标

    打开你的项目 我们看到项目里有 res这个文件夹里有以下文件夹. drawable-hdpi     -------高分辨率 drawable-ldpi      -------中分辨率 drawab ...

  7. transform(变形)和transform-origin(变形原点)

    转载请说明出处,原文地址http://blog.sina.com.cn/s/blog_780a942701014xl8.html transform(变形)和transform-origin(变形原点 ...

  8. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  9. react-redux(1)

    基础 Array.prototype.reduce //类似的核心思想 const initState = ''; const actions = ['a', 'b', 'c']; const new ...

  10. iOS10 UI教程层次结构的事件

    iOS10 UI教程层次结构的事件 iOS10 UI教程层次结构的事件,层次结构中存在7个事件,对于这些事件的介绍如表1-3所示.通过这些事件,可以监听视图,当视图在层次结构上发生变化时可以被拦截,也 ...