WangEditor实现富文本编辑和图片上传

小鱼儿 2022-05-29 13:21 886阅读 0赞

1.首先第一步是下载压缩文件，去官网下载http://www.wangeditor.com/

2.解压文件，然后将文件夹放到webapp下面，如图所示：

![70][]

3.编写html页面，在页面中构造编辑器

<div id="editor">
    
            </div>
            
            <script type="text/javascript" src="wangEditor/release/wangEditor.min.js"></script>
           
            <script type="text/javascript">
                var E = window.wangEditor
                var editor = new E('#editor')
                // 或者 var editor = new E( document.getElementById('editor') )
                //这里我们选用base64来上传图片 
                editor.customConfig.uploadImgShowBase64 = true
                editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
                editor.customConfig.uploadImgMaxLength = 5
                editor.create()
            </script>

4.通过富文本对象名字调用.txt.html()来获得文本中的内容

![70 1][]

这个内容，包含你对文字的样式修改，还包含图片内容，图片的内容是通过转为base64码来保存的，可以直接插入数据库中

，显示的时候就从数据库读出来base64码，并将之转换成图片。但是切记图片不要太大，否则转成的base64码将会非常多，会挤爆你的数据库的。

5.如此可以得到良好的富文本编辑器，还能上传图片

![70 2][]

[70]: /images/20220529/5caf6200e2b1463a9254731aa2fb2623.png
[70 1]: /images/20220529/94746e4d74d34323b6ca3ec66ea33870.png
[70 2]: /images/20220529/6e42c4b1c2f445f0a8abe46718682ac2.png