前后不分离项目中vue页面使用普通js插件(富文本编辑器)的坑

最新推荐文章于 2022-07-19 14:44:30 发布
最新推荐文章于 2022-07-19 14:44:30 发布
阅读量523 收藏
点赞数
分类专栏： 坑 文章标签： 坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/askwill/article/details/100074010
版权

在项目中，遇到了一个页面开发的问题，使用ueditor富文本编辑器遇到了无法使用功能的问题（样式已导入，但功能不能使用），后面经排查后，发现是vue.js与插件js加载顺序的问题，遇到此类问题时，注意要让插件的js先运行，可以在vue的mounted方法内先初始化插件，同时也要注意在使用编辑器对象时，需要定义一个全局的对象

askvinco17
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuehtml5editor是一个Vue的富文本编辑器插件
08-07
Vue-html5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11.
本地代码运行代码没问题，但服务器上浏览器卡死---Modal 对话框问题
为什么我的眼里常含泪水？
08-12 1280
本地启动代码没问题，但服务器上浏览器卡死—Modal 对话框问题 如下图是正确使用 modal（代码位置正确），模态框modal的父级直接就是div 如下图是错误使用 modal（代码位置错误），模态框modal的父级不是div，嵌套多个组件导致错误。 不知道为什么，我本地运行起来没有任何问题，构建好放服务器上运行，直接浏览器卡死，所以还是记录一下下，加深印象。...
springboot+vue+element实现前后不分离的应用开发
热门推荐
xichengxml的博客
09-22 2万+
springboot和vue是当前比较流行的前后端技术，也是部分大厂的主流架构。二者实现结合有三种方式： 前后不分离，通过引入的方式使用vue，也就是本文实现的方式 前后半分离，前后端项目写在一个项目里，分别搭建工程，可以参考：https://github.com/xichengxml/springboot-vue-template，前端项目也通过tomcat部署管理，后端工程师使用起来比较得心...
推荐一款适用于vue的h5富文本编辑器
淅淅沥沥的博客
01-28 1万+
var zxEditor = new ZxEditor("#editorContainer", { // 编辑器固定 fixed: false, // 20秒自动保存一次编辑内容 autoSave: 0, disableBackspaceDelete: false, showToolbar: false }); that.zxEditor = zxEditor;
vue 富文本编辑器 Editor 使用
zongzi494的博客
07-19 4205
富文本编辑器
vue2.0 实现富文本编辑器功能
10-16
在Vue2.0框架中实现富文本编辑器功能，开发者通常会选择现有的富文本编辑器库进行集成。本文将重点讨论如何使用TinyMCE这一流行的编辑器，并解释其在Vue项目中的应用步骤和优势。 TinyMCE是一个强大的JavaScript富...
基于vue2开发的富文本编辑器AS-Editor
最新发布
05-27
**Vue2富文本编辑器AS-Editor详解** AS-Editor是一款专为Vue2框架设计的高级富文本编辑器，旨在提升前端开发效率，提供可视化拖拽编辑功能，使得开发者能够快速构建并生成UI界面。这款编辑器的核心特性是将页面布局...
基于vue3的电子病历编辑器源码.zip
11-30
- **富文本编辑**：编辑器可能使用Quill、TinyMCE等富文本编辑库，提供格式化文本、图片插入、表格操作等功能。 - **数据结构化**：电子病历需要对医疗信息进行结构化存储，可能涉及到JSON或其他数据格式。 - **...
tiptap一个Vuejs的无渲染和可扩展的富文本编辑器
08-10
tiptap是一个基于Vue.js框架的富文本编辑器库，它的设计目标是提供一个无渲染（headless）且高度可扩展的解决方案。在Web应用中，富文本编辑器是一个不可或缺的组件，它允许用户创建、编辑和格式化文本内容。tiptap...
SpringBoot2.0+Vue3.0前后端分离wiki文件管理系统源码.zip
05-23
SpringBoot2.0可以借助如Git或MongoDB的GridFS来实现版本控制，而Vue3.0则可以使用Quill、CKEditor等富文本编辑器，让用户轻松编辑Markdown格式的文档。 在实际项目中，还需要考虑安全性，例如使用Spring Security...
vue-html5-editor：用于vue的html5所见即所得编辑器
02-06
简介 Vue-html5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11。 Vue-html5-editor是一个html5所见即所得编辑器，用于vue，轻松，灵活，与Vue.js 2.0+兼容，支持IE11。 安装安装 Npm npm install vue-html5-editor --save-dev ♡并安装作为一部分组件 导入并安装为全局组件 import Vue from 'vue' import VueHtml5Editor from 'vue-html5-editor' Vue . use ( VueHtml5Edito
vue.js+UEditor集成 前后端分离
chubolei9992的博客
07-07 928
后端DEMO：https://github.com/coderliguoqing/UeditorSpringboot 前端DEMO：https://github.com/coderliguoqing/ueditor-web 预览地址：https://coderliguoqing.githu...
前后端不分离项目
tianhuiman的博客
06-14 1万+
后端操作数据渲染网页 express 是nodejs核心框架。 express的功能介绍？ 。express_generator自动构建开发工具 。express有一个本地端口localhost:3000静态网页 。联合前端网页的源代码，通过ejs模块可以实现前后端联合项目 。ejs可以识别HTML标签，还能解析js，运行在express上。 express的主要功能？ 可以创建web服务器（l...
SpringBoot + 前后端不分离 + 项目部署
nature_ph的博客
02-09 3681
1.pom文件修改 1）jar包 <groupId>cn.bit</groupId> <artifactId>water</artifactId> <version>0.0.1-SNAPSHOT</version> 2）webapp包含进去 <resources> <resource> <directory>/Do
三种方法，合力解决vue首屏加载慢,打包后的vendor.js文件过大问题
出雲无心的博客
12-28 7605
有时候我们将vue项目打包后运行后，访问首页时发现：需要等待十几秒甚至几十秒的时间才能看到页面，通过F12发现，vendor.js高达几MB，加载时间很长，这给我们造成了极大的困扰，用户体验太差了吧！ 下面我就来为大家介绍一下，有效的解决方法： 文章目录1. CDN方式引入各种包第一步：在**index.html**文件中用CDN方式引入所需的包，如下图所示：第二步:**把通过CDN方式引入的...
html 组件化 编辑器,vue.js组件化使用百度富文本编辑器（一）
weixin_36471865的博客
06-19 157
注意：本文采用的编辑器为：idea1.下载百度富文本编辑器，地址：https://ueditor.baidu.com/website/download.html#ueditor2.加入到static文件夹下，如图：3.在main.js中引入js。注意：一定要修改ueditor.config.js中的路径window.UEDITOR_HOME_URL = "./static/ueditor/"4.编...
Vue中使用富文本编辑器tinymce及遇到的问题
weixin_39172079的博客
12-18 7665
vue中使用tinymce项目中使用tinymcetinymce富文本编辑器说明及效果示例安装tinymce代码实现页面引入tinymce及需要使用的组件![在这里插入图片描述](https://img-blog.csdnimg.cn/2019121817311378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow...
好用的vue图文编辑vue2-editor
包子源的博客
12-27 1万+
请参考： https://github.com/davidroyer/vue2-editor 基本用法： 首先，使用npm安装 npm install --save vue2-editor 具体代码： import { VueEditor } from 'vue2-editor' export default { compone
前后端分离项目中使用富文本编辑器UEditor
liusaint1992的专栏
01-31 4174
UEditor官网地址 http://fex.baidu.com/ueditor/ 最近使用富文本编辑器Braft Editor、wangEditor多少都有一些问题。于是使用了比较老牌的富文本编辑器UEditor。虽然也有一些问题，但是好在踩过坑的人多，一般的问题都可以解决。这里总结一下。 1. UEditor实现onChange事件。 UEditor自身提供了contentChange事...
vue项目中怎么使用富文本编辑器
07-27
在Vue项目中使用富文本编辑器，你可以使用一些流行的富文本编辑器库，比如Quill、Vue2Editor或者tinymce-vue等。下面我以Quill为例，给出一个使用富文本编辑器的简单示例： 1. 首先，安装Quill和VueQuillEditor依赖： ```bash npm install quill vue-quill-editor ``` 2. 在Vue组件中引入Quill和VueQuillEditor： ```javascript import Vue from 'vue' import { QuillEditor } from 'vue-quill-editor' // 引入Quill的CSS样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' export default { components: { QuillEditor }, // ... } ``` 3. 在模板中使用Quill编辑器： ```html <template> <div> <quill-editor v-model="content"></quill-editor> </div> </template> ``` 4. 在Vue实例中定义`content`数据属性： ```javascript export default { data() { return { content: '' } }, // ... } ``` 现在你就可以在Vue项目中使用Quill富文本编辑器了。用户输入的内容将会双向绑定到`content`属性中，你可以在提交表单或保存数据时使用这个属性的值。当然，你也可以根据Quill提供的API来对编辑器进行更多的定制和配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值