[更新]自定义绑定高级应用之summernote替代richTextarea

qldsrx

开源强大的富文本编辑器summernote在示例中的第三方组件里可以看到，虽然功能不是很多，但布局比官方提供的richTextarea强大的多，里面的表格布局功能可以自定义豆腐块布局。但是官方那个，图片插入后无法自适应屏幕宽度（按比例），而且缺少表格布局排版，最主要的是BUG多，在有滚动条的页面中各种漂浮穿越，强大的我不想反馈问题了。

可惜那个summernote只有示例，没有做成可绑定组件，使用非常不方便，于是我花了一天时间研究了mvvm绑定原理，并基于现有平台的绑定类库的自定义绑定功能，巧妙的实现了第三方组件的绑定功能，替代自定义组件开发的繁琐过程，对于能力有限却需要集成某些外部控件的人来说，是值得参考的。有兴趣的人，可以模仿着实现那个第三方进度条组件的自定义绑定。


代码见附件，用法非常简单，先将这个js文件放到/third/summernote/js下面，在需要用到的页面js里，“var Model = function()” 上方，添加

1. require("$UI/third/summernote/js/mysummernote");

复制代码

其实就是常规js引用，之后在需要用到summernote的地方，添加一个textarea标签（其实任何标签都支持），为这个html标签添加自定义属性，属性名为bind-summernote，属性值为可观察对象，如：$model.baasData1.ref('xxx')，注意，这里一定要ref，如果用val，那在编辑器内的任何改动都无法反馈到对象内，因为你绑定了只读的对象。


要看懂本示例，建议打开官方对于自定义绑定的介绍http://docs.wex5.com/data-bind-custombinding/，不过官方给的介绍太过简单，而且作为例子的代码无任何实用价值，所以单独去看会很难体会这个自定义绑定的妙处。我这里就将其发挥到了妙处上了。



附件更新，第二版本是提供了图片上传到文件系统中的，后台服务处理另开帖说明，不用官方的那些，自己写了个更强大的文件处理服务类，见：http://bbs.wex5.com/forum.php?mod=viewthread&tid=97101

ysk007

强啊，很灵活，已收藏

郭德成

我也收藏了

郭德成

测试了，相当的好，谢谢了

tiger0425

谢谢共享收藏

郭德成

图文存进数据库时报错呢？另外要将这条展现出来 ，怎么弄呢？

郭德成

试过如果不上传图片，能存进数据库，上传了图片，存进数据库，要怎么改呢？

郭德成

看 了一下，图片好像是要以base64格式存进数据库，能不能将图片上传到服务器，数据库只存进一个url?

qldsrx

检查你的图片有多大，数据库里那个字段允许多长的字符串，如果太长存不下自然要报错，如果不希望直接将图片存入数据库，可以用外部url方式插入图片。你也可以自己扩展那个插件，去官网看教程，那个插件内的功能请到插件官网去看。

郭德成

我改成长文本格式可以了，改组件我还没那能力，将就用吧