wangeditor富文本编辑器的使用(超详细)

wangeditor富文本编辑器的使用(超详细)wangeditor是一款轻便的富文本编辑器,本文主要帮助大家快速学习使用wangeditor编辑器。

大家好,又见面了,我是你们的朋友全栈君。

一、基本介绍

官方文档:http://www.wangeditor.com/

1、wangeditor富文本编辑器的特点

  • 基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用
  • WangEditor富文本编辑器配置方便、使用简单、且开源免费
  • 各项基本配置基本齐全,适合功能需求简单的项目构建
  • 兼容性是支持IE10+的浏览器【】
  • 默认正文p、字体样式以span标签的行内样式添加
    在这里插入图片描述

2、功能介绍

下图是基本也是全部的功能点(从左到右)

  • 包括:【标题设置、字体加粗、斜体、下划线、删除、文字颜色、背景颜色、链接、列表(有序、无序)、表情、图片(网络图片、本地上传)、表格、视频、代码块、返回上一步、返回下一步(但其实ctrl+z快捷键也可以)】

在这里插入图片描述

二、创建编辑器

1、引入编辑器(多种引入方式)

  • 包管理工具例如node下载
    • npm install wangeditor
    • bower install wangEditor
  • 下载源文件js引入( https://github.com/wangfupeng1988/wangEditor/releases)
    • <script src="/static/assets/plugins/wangEditor/wangEditor.min.js"></script>
  • 在线cdn引入(https://www.bootcdn.cn/wangEditor/)
    • 网站链接选择版本复制引入即可

2、使用编辑器

1、创建容器

<div id="wangeditor">
    <div ref="editorElem"></div>
</div>

2、创建并且实例化组件
1、vue的使用方法

//vue的使用
import E from "wangeditor”;//导入组件
// 相当于js的变量设置
data() { 
   
return { 
   
  editor: null,
}}
//methods里创建调用、或是mounted里面直接生产
this.editor = new E(_this.$refs.editorElem);//获取组件并构造编辑器
this.editor.create(); // 创建富文本实例

2、js使用方式

//js的使用
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()

3、react使用方式

// 创建组件
<div id="wangeditor" ref={ 
   editor}></div>
// 组件声明
const editor = useRef();
useEffect(()=>{ 
   
//获取组件并构造编辑器
	const Edit = new E(editor.current); 
	Edit.create();
}[])

3、基础配置

  • 配置菜单

//这是默认的菜单配置就是全部的功能、不需要的话将其去掉即可

this.editor.customConfig.menus = [
    'head',  // 标题
    'bold',  // 粗体
    'fontSize',  // 字号
    'fontName',  // 字体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'foreColor',  // 文字颜色
    'backColor',  // 背景颜色
    'link',  // 插入链接
    'list',  // 列表
    'justify',  // 对齐方式
    'quote',  // 引用
    'emoticon',  // 表情
    'image',  // 插入图片
    'table',  // 表格
    'video',  // 插入视频
    'code',  // 插入代码
    'undo',  // 撤销
    'redo'  // 重复
    ]
  • 自定义设置
// 自定义颜色
this.editor.customConfig.colors = [
"#000000",
"#333333",
];
// 自定义字体
this.editor.customConfig.fontNames = [
"PingFangSC",
];
//配置多种语言--就是将编辑器原本文字配置成你需要的文字、
//***链接文字一定要在链接的上面
this.editor.customConfig.lang = { 
   
'设置标题': 'title',
'正文': 'p',
'链接文字': 'link text',
'链接': 'link',
'上传图片': 'upload image',
'上传': 'upload',
'创建': 'init'
// 还可自定添加更多
}

4、常用功能设置

//设置编辑器内容
this.editor.txt.html(“yanyanyan”);
// 编辑器的事件,每次改变会获取其html内容(html内容是带标签的)
this.editor.customConfig.onchange = html => { 
   
_this.formValidate.content = html;
};
// 设置编辑器层级
this.editor.customConfig.zIndex = 10;
// 去除复制过来文本的默认样式
this.editor.customConfig.pasteFilterStyle = false;
//用户点击富文本区域会触发onfocus函数执行
this.editor.customConfig.onfocus = function () { 
   
        console.log("onfocus")
    }
// 将图片大小限制为 3M
this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
// 限制一次最多上传 5 张图片
this.editor.customConfig.uploadImgMaxLength = 5
//上传图片的错误提示默认使用alert弹出,也可以自定义用户体验更好的提示方式
editor.customConfig.customAlert = function (info) { 
   
    // info 是需要提示的内容
    alert('自定义提示:' + info)
}

5、关于本地上传图片

编辑器自带图片上传的上传的网站链接图片
本地上传图片需要自己设置

// 上传图片到服务器,对应的是controller层的@RequestMapping("/upload")
this.editor.customConfig.uploadImgServer = "/api/file/upload”;//接口名称
//自定义name,接收的时候图片文件的那么用这个,对应的是参数中的MultipartFile upimg名称,这个名称即上传到浏览器的参数名称
this.editor.customConfig.uploadFileName = "file_key”;//这个需要和后台商量上传图片的名称
// 上传图片的结果反馈
this.editor.customConfig.uploadImgHooks = { 
   
before: function(xhr, editor, files) { 
   
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return { 
   
// prevent: true,
// msg: '放弃上传'
// }
// console.log("before:",xhr)
},
success: function(xhr, editor, result) { 
   
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
// console.log("success:",result)
},
fail: function(xhr, editor, result) { 
   
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
error: function(xhr, editor) { 
   
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function(insertImg, result, editor) { 
   
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,参数editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url = result.result.remote_path;
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
};
// }

6、其他

常用 API
属性
* 获取编辑器的唯一标识 editor.id
* 获取编辑区域 DOM 节点 editor.$textElem[0]
* 获取菜单栏 DOM 节点 editor.$toolbarElem[0]
* 获取编辑器配置信息 editor.config
* 获取编辑区域 DOM 节点 ID editor.textElemId
* 获取菜单栏 DOM 节点 ID editor.toolbarElemId
* 获取菜单栏中“图片”菜单的 DOM 节点 ID editor.imgMenuId
方法
选取操作
* 获取选中的文字 editor.selection.getSelectionText()
* 获取选取所在的 DOM 节点 editor.selection.getSelectionContainerElem()[0]
    * 开始节点 editor.selection.getSelectionStartElem()[0]
    * 结束节点 editor.selection.getSelectionEndElem()[0]
* 折叠选取 editor.selection.collapseRange()
* 更多可参见源码中定义的方法
编辑内容操作
* 插入 HTML editor.cmd.do('insertHTML', '<p>...</p>')
* 可通过editor.cmd.do(name, value)来执行document.execCommand(name, false, value)的操作

三、问题解决

1、标题样式、字体样式不生效 等样式问题

  • 原因:设置的全局样式导致样式失效
  • 解决:重新对编辑器的样式进行设置优先级高于全局即可

2、编辑器实例化不成功报错

  • 解决:使用定时器变成异步操作即可

3、图片上传,复制的内容没有自动添加到服务器

  • 需要自动识别添加图片并上传或者是和由后台自动获取保存

其他:

  • wangEditor5 新版已经正式发布了 ,大概看了下官方文档(最上方有链接),新手超级友好,也更加适应框架特性,还有相应的react和vue组件
  • react组件 @wangeditor/editor-for-react、vue组件 @wangeditor/editor-for-vue
  • 新编辑器加了两种mode,default 默认模式 – 集成了 wangEditor 所有功能,simple 简洁模式 – 仅有部分常见功能,简洁易用;这是官方示例demo,wangeditor5 的问题官方合集,感兴趣可以看看~
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137644.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • QT布局:QVBoxLayout/QHBoxLayout[通俗易懂]

    QT布局:QVBoxLayout/QHBoxLayout[通俗易懂]关系图垂直布局:QVBoxLayout 先来一两代码:QWidget*widget=newQWidget();QVBoxLayout*vBoxLayout=newQVBoxLayout();QLabel*label=newQLabel(“hello”);QPushButton*pushButton=newQPushButton(“hi”);vBoxLayout->addWidget(label);vBoxLayout->addWid…

  • 两个求和符号相乘_excel输入次方符号

    两个求和符号相乘_excel输入次方符号在机器学习中,经常会遇到有含有两个求和符号的公式,如,∑i=1M∑j=1N\sum^M_{i=1}\sum^N_{j=1}∑i=1M​∑j=1N​,一开始,我总是不能够理解这是一种怎样的运算,后来看到下面的解释觉得自己顿悟:有两个∑\sum∑的时候就有两个变量,是一个不变的情况下另一个从头到尾改变,然后之前那个再变一下,第二个再从头到尾变,一直到第一个变量变到最后,把这个过程中的项加起来!…

    2022年10月12日
  • python 链接mongo数据库说明

    python 链接mongo数据库说明python 链接mongo数据库说明

  • 数仓建设 | ODS、DWD、DWM等理论实战(好文收藏)

    数仓建设 | ODS、DWD、DWM等理论实战(好文收藏)本文目录:一、数据流向二、应用示例三、何为数仓DW四、为何要分层五、数据分层六、数据集市七、问题总结导读数仓在建设过程中,对数据的组织管理上,不仅要根据业务进行纵向的主题域划分,还需要横向的数仓分层规范。本文作者围绕企业数仓分层展开分析,希望对你有帮助。因文章太长,本文不是完结版,文末可获取完整PDF版从事数仓相关工作的人员都知道数仓模型设计的首要工作之一就是进行模型分层,可见模型分层在模型设计过程中的重要性,确实优秀的分层设计是一个数仓项目能否建设成功的核心要素,让数

  • 界面无小事(五):自定义TextView

    界面无小事(五):自定义TextView

  • 基于CodeMirror 10分钟打造一个记事本应用(真的能使用,非demo)[通俗易懂]

    基于CodeMirror 10分钟打造一个记事本应用(真的能使用,非demo)[通俗易懂]直接看最终效果在浏览器里面可以随时调出记事本,而且内容自动保存不怕丢失再来看怎么做的原理其实很简单主要使用了codeMirror来做编辑器数据保存在本地存储,编辑器内容变化时会自动存储,再次打开时会从本地存储里面读取并恢复在标签页直接打开、从工具栏打开记事本,需要安装chrome插件https://plugin.csdn.net/最后来看看代码怎么写1.创建扩展应用1.从桌面的`插件扩展`图标进入扩展后台2.点击`添加插件`,填写名称后,选择`本地代码`后确定即可3.在

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号