富文本编辑器在vue中的使用--wangEditor

最新推荐文章于 2024-10-21 17:54:27 发布

zhuoyunluo77

最新推荐文章于 2024-10-21 17:54:27 发布

阅读量482

点赞数

分类专栏： vue2 elementui 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/w__qwwq/article/details/126789413

版权

本文档介绍如何在Vue项目中使用wangEditor，包括展示编辑器效果图，安装步骤，以及详细封装组件的过程。

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

一、效果图如下：

在这里插入图片描述

二、先安装wangEditor

yarn add wangeditor

三、封装组件

在组件文件夹下新建wangEditor文件夹—>index.vue
文本编辑器的设置代码如下：

<template>
  <div>
    <div id="editor-box" style="width: 100%">
        <div v-html="content"></div>
    </div>
    <el-button type="primary" @click="submit">提交</el-button>
    <div class

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhuoyunluo77

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3 - 详细引入 wangeditor 富文本编辑器及使用教程，安装引入全过程及说明（示例源码开箱即用，快速植入wangeditor 富文本编辑器到vue3项目）

高级前端工程师

07-26

5299

vue3 wangeditor5，vue3富文本编辑器wangeditor使用教程，vue3+ts使用富文本编辑器wangeditor，Vue3如何安装使用wangEditor富文本编辑器，vue3项目使用富文本编辑器-wangeditor，vue3 wangEditor富文本编辑器自定义上传图片，Vue3中使用富文本编辑器之wangEditor，Vue3集成wangEditor富文本插件，wangeditor5在vue3中的全使用过程，vue3+vite3+typescript使用wangEditor编辑

基于vue的html编辑器,基于vue富文本编辑器的慢慢人生路

weixin_32146783的博客

06-15

1477

最近需要用到富文本编辑器插件,项目是用VUE框架搭建的所以这里就专门介绍几款有关vue的富文本插件:项目中趟过了很多坑,特记下供大家借鉴,希望大家不要重滔我的复撤本文章只介绍插件具体使用方式可自行百度由于编辑器编辑的内容需要在小程序能完美显示,并且能和小程序富文本编辑器完全打通1.百度的ueditor (网上都这么说)(没有缘分,果断放弃)优势：开源，插件多，基本满足各种需求，由百度we...

参与评论您还未登录，请先登录后发表或查看评论

在vue中获取wangeditor的html和text的操作

01-21

目的：vue 中获取 wangeditor 的 html 和 text。补充知识：vue-cli webpack 引入 wangeditor(轻量级富文本框) 1：使用npm下载： //（注意 wangeditor 全部是小写字母） npm install wangeditor 2: 直接在项目模板中引用 import E from ‘wangeditor’ 3：HTML <div id=”editorElem” xss=removed></div> <button v-on:click=”getContent”>查看内容</button> 4：js代码

Vue2中使用富文本编辑器WangEditor

surgicalMask的博客

07-22

4056

Vue2中使用富文本编辑器WangEditor，安装，配置和展示。

vue中富文本编辑器WangEditor的详解以及本地上传图片/视频

最新发布

Slh036333的博客

10-21

449

WangEditor富文本编辑器视频、图片本地上传教程

html 百度文本编辑器插件,富文本编辑器——百度UEditor插件Vue组件化

weixin_33699970的博客

06-16

304

1、百度UEditor插件的安装过程请查看我的另篇博文：http://blog..net/lzc4869/article/details/784381212、组件(1)组件页面ueditor.vueexport default {name: 'UE',data() {return {editor: null}},props: {content: {type: String,default:''},...

html 整合vue,Vue项目中整合富文本编辑器

weixin_42364301的博客

06-24

828

写在前面：我是扬帆向海，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。这博客是对自己学习的一点点总结及记录，如果您对 Java、算法感兴趣，可以关注我的动态，我们一起学习。用知识改变命运，让我们的家人过上更好的生活。由于项目中要使用富文本编辑器，我在这把一些步骤做一记录，供大家参考。文章目录一、在vue中引入tinymce二、配置HTML...

Vuehtml5editor是一个Vue的富文本编辑器插件

08-07

Vue-html5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11.

vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件

04-02

vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器，轻量，简洁，易用，开源免费。兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。不支持移动端。 wangEditor当前是v4...

wangeditor-antd:基于ant-design风格重构的wangeditor富文本编辑器

05-01

基于ant-design风格重构的wangeditor富文本编辑器,主要趋于样式重构，javascript部分未修改。更新日志计划跟新适配Vue3 风格统一为 ant-design-vue 2.0风格修改部分说明重构图标重构下拉样式重构input输入框 ...

vue结合element-ui和quill富文本编辑器实现上传视频和封面

12-03

在现代Web开发中，富文本编辑器已经成为必不可少的工具，用于创建和编辑具有多样格式的内容。Vue.js，作为一款流行的前端框架，与组件库Element-UI的结合为开发者提供了便捷的UI解决方案。而Quill，作为强大的富文本...

html富文本编辑器插件_vue中使用vuequilleditor富文本编辑器

weixin_39783426的博客

12-01

1213

点击上方“小姚同学技术栈”快速关注我哟！vue-quill-editor是一个基于quill、适用于vue的富文本编辑器开源项目，支持服务端渲染和单页应用。目前项目热度还算可以，如果不考虑使用markdown，vue-quill-editor是一个比较好的选择。本篇文章将介绍在vue项目中如何使用vue-quill-editor富文本编辑器并实现图片的自定义上传、图片的resize以及e...

wangeditor html编辑,Vue整合wangEditor富文本编辑器

weixin_42531579的博客

06-19

775

最近在做项目时，客户有个发布新闻动态的功能，具体页面内容让客户自己编写，所以要选择富文本编辑器，这样用户体验好一点。网上有很多的富文本编辑器，因为项目的功能并不是很复杂，所以选择了wangEditor，界面简洁，使用起来也挺方便的；image.png实现思路1.安装wangEditor2.封装成组件3.父组件中直接调用一、wangEditor安装这里使用npm命令安装；npm install w...

基于vue3、Element Plus和TypeScript构建的HTML5富文本编辑器

emei8的专栏

04-21

2643

vue-vuecmf-editor是一款基于vue3、Element Plus和TypeScript构建的HTML5富文本编辑器。

vue中富文本编辑框

weixin_34367257的博客

03-07

1154

1.npm install vue-quill-editor --save 2.npm install quill --save 3.封装成子组件 <template> <quill-editor v-model="currentValue" ref="myQuillEditor" :options="editorOption" class="n-editor"&...

vue中取得的数据如何用html,在vue中如何获取wangeditor的html和text

weixin_39873456的博客

06-04

899

在vue中如何获取wangeditor的html和text发布时间：2020-10-26 15:08:36来源：亿速云阅读：156作者：Leah这期内容当中小编将会给大家带来有关在vue中如何获取wangeditor的html和text，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。目的：vue 中获取 wangeditor 的 html 和 text。补充知识：...

vue html 在线编辑,Vue+Element使用富文本编辑器的示例代码

weixin_30366107的博客

05-30

614

富文本编辑器在任何项目中都会用到，在Element中我们推荐vue-quill-editor组件，现在我就把它提供给大家，希望对大家有用。具体截图如下：安装编辑器组件具体方法：npm install vue-quill-editor --save编写组件首先我们在components文件夹里创建ue.vue组件，效果图如下：组件export default {name: 'UE',data () ...

wangEditor系列之内容处理

老__L的博客

05-11

5769

内容处理

vue中使用wangeditor富文本编辑器

前端小白成长记

02-14

1078

vue中使用wangeditor富文本编辑器