关于使用vue-html5-editor,富文本插件，icon图标不显示的一个记录

最新推荐文章于 2023-05-14 02:34:31 发布
最新推荐文章于 2023-05-14 02:34:31 发布
阅读量3k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HamsterKnight/article/details/83963714
版权

最近项目中用到了vue-html5-eidtor富文本插件，但是功能是实现了，但是icon图标无法正常显示

 

首先，已经确定正常引入和全局注册了vue-html-editor插件

 

 

 

 

富文本框能正常显示，但是功能的icon图标无法显示，

然后通过查找，发现是font-awesome控制着插件icon图标的显示，然后安装font-awesome

icon图标还是不能正常显示

认为是font-awesome中的css引入的字体文件路径不对，将路径改成绝对路径还是行不通

后来发现，是在全局中就没有引入font-awesome.css，导致图标不能正确显示，

在main.js中全局引入font--awesome.css后，就能正常使用了

// 引入字体图标样式

import '../node_modules/font-awesome/css/font-awesome.css'

 

附上项目目录 

 

HamsterKnight
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
10-15
主要介绍了解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue-html5-editor富文本编辑器插件 v1.1.1.zip
最新发布
03-27
总之，Vue-html5-editor是Vue.js生态中的一个强大且灵活的富文本编辑器组件，适用于各种需要用户输入复杂文本的场景。通过理解并熟练运用它的配置和API，开发者可以构建出满足特定需求的文本编辑界面，提升用户体验...
【vue】 vue2 中使用 Tinymce 富文本编辑器
热门推荐
amoureux555的博客
04-12 1万+
【vue】 vue2 中使用 Tinymce 富文本编辑器
vue富文本组件（一）vue 2.0 tinymce-vue 添加图标 表情 失败问题总结 图标表情返回 问号
Li_Ning21的博客
04-01 878
承接上一篇 vue富文本组件（一）vue 2.0 tinymce-vue 将多余需要写的部分写在这里； // 引入 import "tinymce/plugins/emoticons"; import "tinymce/plugins/emoticons/js/emojis"; // 插件部分增加 emoticons plugins: { type: [String, Array], default: "preview searchreplace autol
拷贝别人的图片放到富文本编辑器后，图片显示不出来
dfdlife的博客
04-27 575
请求别人服务器上的资源时把自己的referrer信息带过去，被对方服务器拦截返回了
vue-html5-editor在移动端出现的几个问题以及使用方法
qq_41761266的博客
04-11 3168
介绍 Vue-html5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11 安装 npm: npm install vue-html5-editor --save-dev 在main.js里引入并安装为全局组件并添加配置 import Vue from 'vue' import VueHtml5Editor from...
vue中vue-html5-editor富文本编译器以及模板编译器不可用错误的处理
m0_49016709的博客
12-10 1403
Vue-html5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11. 在安装好脚手架的依赖后，要执行 npm install vue-html5-editor -S 来安装这个富文本插件，由于这个富文本插件的图标是依赖font-awesome.css的，所以要npm install font-awesome --save安装这个css然后在main.js中引入这个css ，在main引入初始化这个函数： import initRichText from
一个vue的html5富文本编辑器插件vue-html5-editor-master.zip
03-11
在这个场景中，我们讨论的是一个专为Vue.js设计的HTML5富文本编辑器插件——vue-html5-editor。 Vue-html5-editor是一个基于Vue.js的富文本编辑器，它提供了一个简洁、易用且功能丰富的文本编辑环境。这个插件充分...
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
vue-html5-editor：用于vue的html5所见即所得编辑器
02-06
简介Vue-html5-editor是一个Vue的富文本编辑器插件，简洁灵活可扩展，适用于vue2.0以上版本，支持IE11。 Vue-html5-editor是一个html5所见即所得编辑器，用于vue，轻松，灵活，与Vue.js 2.0+兼容，支持IE11。安装...
详解vue中使用vue-quill-editor富文本小结（图片上传）
12-11
quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段...
VUE问题1：报错Error: Can‘t resolve ‘vue-editor-bridge‘解决方案
Hawking的博客
03-02 4536
写着写着代码，run了几次之后突然报错。 Error: Can't resolve 'vue-editor-bridge' 并且浏览器还出现该窗口 终端报错如下： 这个时候跟着提示去 run 下面哪行代码也是会报错的。 去找了源代码发现在 <script> 那多出来了一行 import func from 'vue-editor-bridge'; 删掉这行代码就可以了，原理不明白。尚且还不知道 vue-editor-bridge 有什么用。 ...
UNIAPP富文本编辑器editor组件图标不显示的问题解决
m0_52375547的博客
10-24 3961
【代码】UNIAPP editor富文本编辑组件使用过程中出现图标不显示的问题解决方法
vue-editor富文本编辑器，自定义toolbar修改工具栏
祗想安静地的博客
07-27 7956
vue-editor富文本编辑器，自定义toolbar修改工具栏
vue常用插件
beifanggongy的专栏
03-20 6303
element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素- 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端单页应用vue-blu - 帮助你轻松创建web应用。
vue中引用tinymce图标不显示解决方法
一片天空
07-29 4421
vue中引用tinymce图标不显示解决方法 通过官网查到一篇博客，按照上面步骤可以实现tinymce富文本编辑器的封装和使用。https://www.cnblogs.com/zhongchao666/p/11142537.html在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面（vue） 在node_modules里面找到tinymce,将skins目录复制到static/tinymce里面（nuxt） 由于公司需要使用nuxt.js，再次使.
vue使用中icon图标失效问题（已解决）
weixin_50433115的博客
12-17 2884
这是因为从ElementPlus@1.20起icon包改名了，站在要用import {图标名字} from '@element-plus/icons-vue'
Vue 2.0中使用Vue-html5-editor 编辑器的一些问题解决
越陌度阡
08-24 6399
近期由于需要对公司运营系统进行优化和升级，而原有后台系统所使用的vue-quill-editor编辑器对粘贴进来的内容的行内样式全部进行了过滤，虽然这样可以防止XSS攻击，但是却完全无法满足业务需要，为此对编辑器进行了更换，采用Vue-html5-editor 这个编辑器。 这是一个基于Vue 2.0系列的编辑器（官方地址），还不错，但却存在一些问题，以下记录这些问题，并提供解决办法。 1. 复制网络图片时无法粘贴成功。 主要原因是图片链接存在跨域问题。运营人员复制的内容都是基于微信环境的，微信对所有
vue输入图片路径显示不出来（基础问题）
快乐学习
05-14 2245
在vue项目里面插入图片的路径，插入路径方式不正确，导致图片一直不能显示。复制文件中的相对路径，然后去掉上一级目录，用。这是由于相对路径的前面要加上。，这个可以代替第一层包。
vue中在弹框里面使用vue-quill-editor，实现富文本编辑功能
05-23
可以先安装 `vue-quill-editor`： ```bash npm install vue-quill-editor --save ``` 然后在需要使用富文本编辑器的组件中引入： ```javascript import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' export default { components: { VueQuillEditor }, data() { return { content: '' } } } ``` 这里引入了三个样式文件，分别是 `quill.core.css`、`quill.snow.css` 和 `quill.bubble.css`，它们分别对应了三种不同的编辑器主题，可以根据需求选择使用。 接着在模板中使用组件： ```html <template> <div> <vue-quill-editor v-model="content"></vue-quill-editor> </div> </template> ``` 这样就完成了一个简单的富文本编辑器的使用。注意，这里使用了 `v-model` 将编辑器的内容与 `content` 变量进行了双向绑定，所以在提交表单时可以直接使用 `content` 变量获取编辑器中的内容。 当然，还可以根据自己的需求设置更多的参数，例如： ```html <vue-quill-editor v-model="content" :options="{ placeholder: '请输入内容', modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'script': 'sub' }, { 'script': 'super' }], [{ 'indent': '-1' }, { 'indent': '+1' }], [{ 'direction': 'rtl' }], [{ 'size': ['small', false, 'large', 'huge'] }], [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], [{ 'font': [] }], [{ 'align': [] }], ['clean'], ['link', 'image', 'video'] ] } }" ></vue-quill-editor> ``` 这里设置了编辑器的 `placeholder` 和 `modules.toolbar` 参数，让编辑器拥有更多的功能。具体的参数设置可以参考 `vue-quill-editor` 的官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值