个人网站建设日记——富文本编辑器

  对于个人博客网站来说，富文本编辑器的选择应该是个不大不小的问题，若是没有用着顺手、看着顺眼的编辑器，写起东西来也是没有感觉的。

    提前标出，最后使用的是wangEditor，轻量、简洁。

  一开始对富文本编辑器一无所知，只是在从前听说过百度的那一款ueditor，去http://ueditor.baidu.com/website/看了之后发现，竟然从16年之后就没有更新过，github上面也没有什么版本的迭代，这不是赤裸裸的告诉咱们这玩意儿最好别用么。。。。

   我对一个好的开源产品的衡量标准一定是它的迭代速度，什么成熟不成熟从来都是不考虑的，所以放弃，又去瞅了瞅ckeditor。

    对于ckeditor的Inline editor的外观我是特别中意，如下：

   

    然后就使用了一下API，编辑器的导入是挺简单的，但是到图片就不好使了，为了上传、删除图片，竟然还要搞一个ckeditor同款的ckFinder，这不开世界人民的玩笑吗。。。如下：

            

    搞个个人网站，要的就是网站的快速开发、文章的快捷编辑，这东西怎么看都太笨重了些，然后就想，直接将图片转成字符存入数据库吧。其他的editor应该也是可以这样做的，我没有太关注，因为这时候我发现了wangEditor。

       

    首先必须支持国产，其次这个界面靓到我了，完全符合本人审美，于是js标签一引入，直接上手用，用起来也特别方便，只要在页面里面放入：

<script type="text/javascript" src="/static/js/wangEditor.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
var $text1 = $('#text1')
editor.customConfig.onchange = function (html) {
// 监控变化，同步更新到 textarea
$text1.val(html)
}
// 或者 var editor = new E( document.getElementById('editor') )
editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
editor.create()
// 初始化 textarea 的值
$text1.val(editor.txt.html())
</script>

    额，这段代码好像不太好看，以后弄一个csdn那样的代码显示插件。

    over，第一天的唠嗑。