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

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

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

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

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

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

   

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

            

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

       

扫描二维码关注公众号,回复: 3898088 查看本文章

    首先必须支持国产,其次这个界面靓到我了,完全符合本人审美,于是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,第一天的唠嗑。

猜你喜欢

转载自blog.csdn.net/qq_35946969/article/details/80325253
今日推荐