Vue项目中整合富文本编辑器，前端开发攻略

最新推荐文章于 2024-06-26 13:45:05 发布
最新推荐文章于 2024-06-26 13:45:05 发布
阅读量786 收藏 16
点赞数 12
分类专栏： 程序员 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84097436/article/details/137381302
版权

文章目录

      • 一、在vue中引入tinymce

  • 二、配置HTML变量

  • 三、引入js脚本

  • 四、引入组件

富文本编辑器

在这里插入图片描述

一、在vue中引入tinymce

npm install @tinymce/tinymce-vue -S

可是一直无法下载成功，我就直接找了资源

可以直接点这儿下载

将下载好的 tinymce 脚本库放到你的项目的static目录下面

在这里插入图片描述

二、配置HTML变量

在 你的项目/build/webpack.dev.conf.js 中添加如下配置：

templateParameters: {

BASE_URL: config

最低0.47元/天 解锁文章
2401_84097436
关注
  • 12
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+Webpack完美整合富文本编辑器TinyMce的方法
12-02
选择一个合适的富文本编辑器对于一个前端项目至关重要，这次我基于Vue来开发我项目中的前端部分，经过权衡选择了tinymce。其在UI，功能都很适合，tinymce官方文档：点击打开链接； 引入tinymce 我选用的版本4.7.4 npm install tinymce -S 将tinymce创建为Vue的组件，便于日后复用，创建组件editor.vue <textarea :id="id" :value="value"></textarea> [removed] // Import TinyMCE import tinymce
vue富文本编辑器：集成常用的编辑器提供学习
03-03
vue富文本编辑器：集成了网上集中富文本编辑器
在Vue中使用wangeditor创建富文本编辑器的完整指南
interest_ing_的博客
03-16 4613
本教程详细介绍了如何在Vue项目中集成和使用`wangeditor`，一个功能强大的富文本编辑器。从安装`wangeditor`的npm包开始，到配置编辑器实例和响应式数据，再到在Vue模板中添加编辑器容器，每一步都配有清晰的代码示例和说明。此外，教程还涵盖了如何配置编辑器选项、获取编辑内容以及在组件销毁时清理资源的重要步骤。无论是新手还是有经验的开发者，本指南都将帮助您快速掌握在Vue中使用`wangeditor`构建富文本编辑器的技能。
【Vue】集成富文本编辑器
最新发布
aystl_gss的博客
06-26 616
这文章使用的是wangeditor插件，怎么配置使用富文本以及加入图片视频等
在Vue项目中集成富文本编辑器
紫月i的博客
03-28 1014
先用vue可视化图形界面创建一个vue项目 安装依赖： npm install mavon-editor --save 在main.js当中输入代码： import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' // use Vue.use(mavonEditor) 新建一个Test.vue： <template> <div id="main"> <mavon-edi
vue集成百度富文本编辑器
weixin_30642305的博客
07-11 523
1.前期工作，访问百度富文本官网下载相应的百度富文本文件，根据后端用的技术下载相应的版本，建议下载最新版UTF-8版（有图有真相，看图） https://ueditor.baidu.com/website/download.html 2.将下载好的文件解压，存放在项目位置下： 　　>1.如果是在vue脚手架中集成百度富文本框，则将解压后选取部分文件新建文件夹U...
【其他】vue项目集成富文本编辑器
每天进步一点点, 靠近小目标一点点~
10-13 792
vue集成富文本编辑功能，并且支持编辑后即时查看移动端效果和html代码，支持html代码一键复制。 编辑器选型 : wangEditor
vue项目：集成富文本编辑器 - 百度ueditor（vue-ueditor-wrap）
snowball的博客
12-29 1万+
6.2.2.3、body上属性contentEditable显示为true，，设置为false即可禁止编辑。6.2.2.4、在ready方法调用（递归）方法，同时处理ueditor编辑器id后最不为0的情况。7.1、解决section标签没有style、class的问题，否则加了样式也不能生效。4.1、在开发的业务文件引入vue-ueditor-wrap、配置文件。vue项目：ueditor（vue-ueditor-wrap）3.3、vue项目 安装插件vue-ueditor-wrap。
Vue.js结合Ueditor富文本编辑器的实例代码
01-21
前一段时间公司Vue.js项目需要使用UEditor富文本编辑器，在百度上搜索一圈没有发现详细的说明，决定自己尝试，忙活了一天终于搞定了。 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化，我们可以通过模块化...
一款基于vue3+typescript+element plus的HTML5富文本编辑器.zip
02-13
标题中的“一款基于vue3+typescript+element plus的HTML5富文本编辑器”揭示了这个项目的核心技术栈，包括Vue.js的最新版本Vue 3、TypeScript以及Element Plus UI库。Vue 3是当前非常流行的前端框架，它提供了组件化...
springboot集成富文本编辑器
06-20
在Spring Boot项目中集成富文本编辑器，首先需要选择一个合适的富文本编辑器组件。在这个例子中，可能使用的是"ueditor"，这是一款功能强大的JavaScript富文本编辑器，广泛应用于网页内容编辑。ueditor提供了丰富的...
vue项目集成CKEditor4富文本编辑器
EverythingAtOnce的博客
12-12 1518
CKEditor4（CKEditor官方网址—可以点击直接过去），官网有ckeditor4和ckeditor5两个大的产品可以使用，我用的是CKEditor4，CKEditor 是新一代的FCKeditor，是一个重新开发的版本。CKEditor 是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。
Vue2富文本实现
llexo的博客
10-25 249
1：使用wangeditor5 2:安装 yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save 3：使用 模板： <template> <div style="border: 1px solid #
9款 Vue 富文本编辑器
学习 记录 总结 分享
05-10 1万+
Trumbowyg 是一个轻量，可定制的 jQuery 所见即所得（WYSIWYG）的编辑器插件，可生成语义化代码，带有功能强大的 API。编辑器和生成的代码进行了优化以支持 HTML5。兼容大部分浏览器，如 IE8+、Chrome、Opera 和 Firefox。基于bootstrap,比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。
vue进阶——整合富文本编辑器wangEditor
秋书一叶的博客
06-03 1万+
wangEditor是一款基于JavaScript的富文本编辑器插件，用于在网页中实现所见即所得的编辑功能。它提供了丰富的编辑功能，包括文字样式设置、插入图片、插入表格、代码高亮等。wangEditor易于集成和使用，支持自定义配置和扩展。
vue中使用wangeditor富文本编辑器
云霸屏CSDN官方博客
11-19 6107
需要知道富文本编辑器是所见即所得的文本编辑器，简单来说就是文本上面写的行内样式，那我们该怎样保存这些行内样式呢，在这里我是写成了组件的形式。return中写上如下代码，需要注意的时上传图片后，后端必须返回url图片的链接，否则编辑器中不会显示图片。研究一番发现弱国想要怎加或者修改编辑器的功能首先要获取这个功能的key。到这里其实基本功能已经实现了，那我们怎么保存，编辑器中的内容呢。这个时候编辑器的功能已经实现了 如下图。这个时候就可以看到每个功能的key了。就可以实现你想要的功能了，如下图。
vue集成vue-ueditor-wrap富文本编辑器
qq_55162766的博客
12-05 1221
最近项目需要使用到富文本编辑器，因为项目关系需要使用到vue-ueditor-wrap富文本编辑器。经过了几小时的研究终于成功集成了
使用vue的富文本编辑器操作
qq_49195366的博客
10-20 5975
编辑富文本内容的时候，原生的富文本，会直接将图片以base64编码的方式存储在页面上。当点击保存时，会直接将base64的数据直接存储到数据库，数据库的字段直接存储不了，内容太大！所以需要将富文本编辑框集成FastDfs，将图片上传到FastDfs。只存储图片的FastDfs访问路径即可。图片上传到服务器保存。
【超详细】vue项目：Tinymce富文本使用教程以及踩坑总结+业务需要功能扩展
热门推荐
weixin_55846296的博客
12-01 1万+
在Vue项目的开发过程中，经常需要使用富文本编辑器来处理用户的输入内容。 是一个功能强大且易于使用的富文本编辑器，它支持大多数常见的文本编辑功能，并且可以通过插件进行扩展。本文将详细介绍如何在Vue项目中使用Tinymce富文本编辑器
antdesignvue项目中的富文本编辑器
07-28
在Ant Design Vue项目中，Ant Design Vue并没有提供内置的富文本编辑器组件。但你可以使用第三方组件来实现富文本编辑器的功能。其中一个常用的富文本编辑器组件是braft-editor。你可以通过npm或yarn将braft-editor添加到你的项目中。 首先，你需要在项目中安装braft-editor。你可以使用以下命令来安装： ``` npm install braft-editor --save ``` 或者 ``` yarn add braft-editor ``` 安装完成后，你可以在你的项目中创建一个自定义的编辑器组件，用于封装braft-editor组件。你可以在`components/Editor`文件夹下创建一个`index.jsx`文件，并在该文件中引入braft-editor组件和样式。以下是一个示例的封装组件代码： ```javascript import React from 'react'; import BraftEditor from 'braft-editor'; import 'braft-editor/dist/index.css'; export default class EditorDemo extends React.Component { state = { editorState: BraftEditor.createEditorState(this.props.content ?? null) }; handleEditorChange = (editorState) => { this.setState({ editorState }); if (!editorState.isEmpty()) { const content = editorState.toHTML(); this.props.setDetails(content); } else { this.props.setDetails(''); } }; render() { const { editorState } = this.state; return ( <div className="my-component"> <BraftEditor value={editorState} onChange={this.handleEditorChange} /> </div> ); } } ``` 在上述代码中，我们创建了一个名为`EditorDemo`的组件，它包含了一个`BraftEditor`组件。通过`value`属性和`onChange`事件，我们可以将编辑器的状态与父组件进行交互，并将编辑器输入的内容传递回父组件。 你可以根据自己的需求对该封装组件进行进一步的定制和样式调整。然后，在你的Ant Design Vue项目中使用这个自定义的编辑器组件来实现富文本编辑器的功能。 #### 引用[.reference_title] - *1* *2* *3* [Ant Design of React 自定义富文本编辑器](https://blog.csdn.net/qq_43106047/article/details/124775604)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值