wangeditor富文本编辑器集成配置

wangeditor富文本编辑器集成

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="div1" style="width: 360px;"></div></body>
</html>
<script  type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@4.7.13/dist/wangEditor.min.js"></script>
<script src="../comm/js/comurl.js"></script>
<script type="text/javascript">
var uplaodurl=server_url+"uploadv2?filepath=baoji";const E = window.wangEditor// 或者 const editor = new E(document.getElementById('div1'))const editor = new E("#div1")editor.config.placeholder = '自定义 placeholder 提示文字'// 设置编辑区域高度为 500pxeditor.config.height = 500// 菜单栏提示为上标（默认配置）editor.config.menuTooltipPosition = 'up'//来关闭样式过滤。editor.config.pasteFilterStyle = false // 来忽略粘贴的图片editor.config.pasteIgnoreImg = true// 配置 server 接口地址editor.config.uploadImgServer = uplaodurleditor.config.uploadImgFileName = 'file'// 设置 headers（举例）editor.config.uploadHeaders = {'Accept' : 'text/x-json'};editor.config.uploadImgMaxSize = 1 * 1024 * 1024 // 2Meditor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']editor.config.uploadImgMaxLength = 1editor.config.uploadImgParams = {token: 'xxxxx',x: 100}editor.config.uploadFileName = 'file'editor.config.uploadImgTimeout = 10 * 1000editor.config.uploadImgHooks = {// 上传图片之前before: function(xhr) {console.log(xhr)// 可阻止图片上传return {prevent: false,msg: '需要提示给用户的错误信息'}},// 图片上传并返回了结果，图片插入已成功success: function(xhr) {console.log('success', xhr)},// 图片上传并返回了结果，但图片插入时出错了fail: function(xhr, editor, resData) {console.log('fail', resData)},// 上传图片出错，一般为 http 请求的错误error: function(xhr, editor, resData) {console.log('error', xhr, resData)},// 上传图片超时timeout: function(xhr) {console.log('timeout')},// 图片上传并返回了结果，想要自己把图片插入到编辑器中// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsertcustomInsert: function(insertImgFn, result) {// result 即服务端返回的接口console.log('customInsert', result)// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可insertImgFn(server_url+result.data.url)}}// 自定义检查插入的链接editor.config.linkCheck = function(text, link) {// 以下情况，请三选一// 1. 返回 true ，说明检查通过return true// // 2. 返回一个字符串，说明检查未通过，编辑器会阻止链接插入。会 alert 出错误信息（即返回的字符串）// return '链接有 xxx 错误'// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止链接插入。// 此处，你可以自定义提示错误信息，自由发挥}// 自定义检查插入图片的链接// 参数中的imgSrc、alt、href分别代表图片地址、图片文本说明和跳转链接// 后面两个参数是可选参数editor.config.linkImgCheck = function(imgSrc,alt,href) {// 以下情况，请三选一// 1. 返回 true ，说明检查通过return true// // 2. 返回一个字符串，说明检查未通过，编辑器会阻止图片插入。会 alert 出错误信息（即返回的字符串）// return '图片 src 有 xxx 错误'// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止图片插入。// 此处，你可以自定义提示错误信息，自由发挥}// 自定义检查插入视频的链接editor.config.onlineVideoCheck = function(video) {// 编辑器会根据返回的内容做校验：比如以下几种情况// 1. 返回 true ，说明检查通过return true// 2. 返回一个字符串，说明检查未通过，编辑器会阻止视频插入。会 alert 出错误信息（即返回的字符串）// return '插入的视频 有 xxx 错误'// 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止视频插入。// 此处，你可以自定义提示错误信息，自由发挥}// 配置 server 接口地址editor.config.uploadVideoServer = uplaodurleditor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024 // 1024meditor.config.uploadVideoAccept = ['mp4']editor.config.uploadVideoParams = {token: 'xxxxx',x: 100}editor.config.uploadVideoName = 'file'editor.config.uploadVideoTimeout =  1000 * 60 * 5editor.config.uploadVideoHooks = {// 上传视频之前before: function(xhr) {console.log(xhr)// 可阻止视频上传return {prevent: false,msg: '需要提示给用户的错误信息'}},// 视频上传并返回了结果，视频插入已成功success: function(xhr) {console.log('success', xhr)},// 视频上传并返回了结果，但视频插入时出错了fail: function(xhr, editor, resData) {console.log('fail', resData)},// 上传视频出错，一般为 http 请求的错误error: function(xhr, editor, resData) {console.log('error', xhr, resData)},// 上传视频超时timeout: function(xhr) {console.log('timeout')},// 视频上传并返回了结果，想要自己把视频插入到编辑器中// 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsertcustomInsert: function(insertVideoFn, result) {// result 即服务端返回的接口console.log('customInsert', result)// insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可insertVideoFn(server_url+result.data.url)}}editor.create()
</script>

wangeditor富文本编辑器集成配置相关推荐

php中html富文本编辑器,php + wangEditor 富文本编辑器的配置
小编最近做了一个项目,在用户发表文章的模块上,考虑到用户编写文章时的排版需求.要借助富文本编辑器.搜索发现,现在有很多免费的编辑器插件.例如:百度的Ueditor.Summernote .但是这几个插 ...
wangeditor富文本编辑器集成vod超级播放器
<template lang="html"><div class="editor" > <!-- <SelectFile&g ...
集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
wangeditor富文本编辑器的使用（超详细）
一.基本介绍官方文档:http://www.wangeditor.com/ 1.wangeditor富文本编辑器的特点基于javascript和css开发的 Web富文本编辑器, 轻量.简洁.易用 ...
wangEditor富文本编辑器使用、编辑器内容转json格式
wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app.小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载下载好之后 ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
富文本编辑器 CKeditor 配置使用+上传图片
参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置 ...
wangEditor 富文本编辑器使用
wangEditor 富文本编辑器使用框架: react hooks 链接: 官方文档参考富文本编辑器组件 import '@wangeditor/editor/dist/css/style.cs ...

wangeditor富文本编辑器集成配置

wangeditor富文本编辑器集成配置相关推荐

最新文章

热门文章