WangEditor基本使用

效果图

1、使用到的API
创建一个编辑器 https://www.kancloud.cn/wangfupeng/wangeditor3/335769
获取内容 https://www.kancloud.cn/wangfupeng/wangeditor3/335775
使用textarea https://www.kancloud.cn/wangfupeng/wangeditor3/430149
上传图片到服务器 https://www.kancloud.cn/wangfupeng/wangeditor3/335782
2、步骤：
(1)、在富文本写内容，同步数据到textarea框，textarea框隐藏，后台获取textarea的数据
(2)、自定义图片上传路径，把返回的url渲染到富文本框，去除默认的alert()弹出框
3、代码

<html><head><title>WangEditor基本使用</title><style>/*设置编辑框高度*/.w-e-text-container{height: 500px !important;}</style><!-- 引入jquery --><script src="http://code.jquery.com/jquery-1.11.3.js"></script><!-- 引入wangEditor插件 --><script type="text/javascript" src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script></head><body><form id="form" method="post"><div id="contentDiv" style="width: 1000px;"></div><textarea name="content" id="content" style="display:none" ></textarea></form><button id="btn1">获取富文本text内容</button><button id="btn2">获取富文本html内容</button><button id="btn3">获取表单信息</button><button id="btn4">获取文本域内容</button></body><script>var E = window.wangEditor;var editor = new E('#contentDiv')var $text1 = $('#content');editor.customConfig.onchange = function (html) {// 监控变化，同步更新富文本内容到 textarea$text1.val(html);}editor.customConfig.uploadImgServer = '/index/public/upload?type=imgFile';  //自定义上传图片（改成自己写的图片上传方法的路径）editor.customConfig.uploadFileName = 'imgFile';  //自定义文件名 /* 这样的话PHP后台这样获取文件信息//将文件上传的信息取出赋给变量$name = $_FILES['imgFile']['name'];$tmp_name = $_FILES['imgFile']['tmp_name'];$size = $_FILES['imgFile']['size'];$error = $_FILES['imgFile']['error'];*/editor.customConfig.uploadImgHooks = {customInsert: function (insertImg, result, editor) {// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：var url = result.urlinsertImg(url)// result 必须是一个 JSON 格式字符串！！！否则报错}}editor.customConfig.customAlert = function (info) {  //关闭默认提示信息// info 是需要提示的内容//alert('自定义提示：' + info)}// 或者 var editor = new E( document.getElementById('content') )editor.create();$text1.val(editor.txt.html());//获取内容$('#btn1').click(function(){alert(editor.txt.text());   // 读取 text});$('#btn2').click(function(){alert(editor.txt.html());    // 读取 html});$('#btn3').click(function(){var formData = new FormData($( "#form" )[0]);alert(formData);});$('#btn4').click(function(){alert($('#content').val());   // 读取 html});</script>
</html>

注意：设置富文本高度

.w-e-text-container{height: 500px !important;
}

WangEditor基本使用相关推荐

Vue项目中使用wangEditor富文本输入框（推荐）
vue中安装wangEditor cnpm install wangeditor 创建公用组件:在src/vue/components文件夹中创建wangEditor.vue <template ...
wangEditor 上传图片，回调函数 Cannot read properties of undefined
请看我的代码: editor.config.uploadImgHooks = {// 上传图片之前before:function(xhr){console.log(this.state.goodsgu ...
React +antd +wangEditor 富文本编辑器
1. 安装 npm i wangeditor --save 2. 引入: import E from 'wangeditor'; 3. 渲染: <div id="div1"& ...
SpringBoot+WangEditor上传图片
今天本地在调试一个问题,,wangEditor这个富文本编辑器上传图片,其实上传图片到也没有什么困难的地方,关键是在于,后台是SpringBoot来进行接收图片,,不说了直接上代码:这个是前端的代码: ...
wangEditor 上传文件
最近在使用一个wangEditor富文本编辑器,这个富文本编辑器有一个上传文件的功能,搞了两天的时间终于终于可以成功的删除上传图片了, 遇到的问题一共有两个,一个是我使用SpringMVC,一开始上传 ...
阿里云oss云存储图片上传在wangEditor富文本编辑器上的集成
调用方式 html: <textarea name="newsinfo_content" id="editor" style="height:5 ...
php 多图上传编辑器,laravel中使用WangEditor及多图上传
1. 创建项目及安装所需安装包 1.1 创建项目 composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist 1 ...
wangEditor 菜单栏随页面滚动位置改变（吸顶）问题解决
wangEditor 菜单栏随页面滚动位置改变(吸顶)问题解决参考文章: (1)wangEditor 菜单栏随页面滚动位置改变(吸顶)问题解决 (2)https://www.cnblogs.com/ ...
wangEditor编辑器中解析html图文信息问题（三）
以上两篇,我们主要记录了wangEditor编辑器的基础使用方法,以及上传图片部分.如果对前两篇有兴趣的,可以参考链接: http://blog.csdn.net/LJFPHP/article/det ...
wangEditor编辑器在laravel中上传图片（二）
这里接着上篇,上篇是关于wangEditor的简单实用.这篇主要是上传图片. 一.wangEditor上传图片的一些配置博主这里使用的是laravel5.1框架,大家根据自己的框架调整就好. 1.上 ...

WangEditor基本使用

WangEditor基本使用相关推荐

最新文章

热门文章