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

最新推荐文章于 2024-07-29 15:54:42 发布

讷讷666

最新推荐文章于 2024-07-29 15:54:42 发布

阅读量7.5k

点赞数 3

分类专栏： WangEditor 文章标签：富文本编辑器

本文链接：https://blog.csdn.net/qq_36159851/article/details/79680536

版权

本文介绍了如何使用WangEditor创建富文本编辑器，包括下载编辑器、解压并放置文件、在HTML页面中构建编辑器。通过编辑器的.txt.html()方法获取包括样式和base64图片内容的文本。图片以base64编码存储，直接存入数据库，展示时再转换回图片。但需注意大图可能导致的数据库压力。

摘要由CSDN通过智能技术生成

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

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

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

   <!--文本显示区域，名字id是editor-->
        <div id="editor">

        </div>
        <!--引入wangEditor中的js文件-->
        <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