vue使用百度富文本

这篇具有很好参考价值的文章主要介绍了vue使用百度富文本。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 🔥博客主页: 破浪前进
🔖系列专栏: Vue、React、PHP
❤️感谢大家点赞👍收藏⭐评论✍️


vue使用百度富文本,vue,富文本,vue.js,前端,javascript,百度,UEditor

1、下载UEditor

链接已放到文章中了

2、上传到项目目录中

一般上传到public下,方便到时候打包进去,以免出现线上版本无法使用等问题

3、安装vue-ueditor-wrap最新3.x版本

npm i vue-ueditor-wrap@next

4、在main.js中引入并使用

import VueUeditorWrap from 'vue-ueditor-wrap'
createApp(App).use(VueUeditorWrap).mount('#app')

5、使用

<template>
  <div>
    <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
    <div v-html="msg"></div>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    let msg = ref('<h2><img src="//i2.wp.com/img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>')
    let myConfig = {
      // 编辑器不自动被内容撑高
      autoHeightEnabled: false,
      // 初始容器高度
      initialFrameHeight: 450,
      // 初始容器宽度
      initialFrameWidth: '100%',
      // 上传文件接口
      serverUrl: '/api/upload/file',
      // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况
      UEDITOR_HOME_URL: '/ueditor/'
    }
    return {
      myConfig,
      msg
    }
  }
}
</script>

6、配置代理,否则会报错且无法使用上传图片等功能,下篇博客会说的文章来源地址https://www.toymoban.com/news/detail-713181.html

到了这里,关于vue使用百度富文本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • amis百度前端框架,在js中使用amis写json转页面

    1.在项目中使用百度 amis 的sdk做开发库。 2。加载sdk中的库: 3.创建一个主页面(代码片段里面重要是创建了一个div元素, 这个不重要 ): 代码中主要用了custom组件,在这个组件中可以写js,通过js创建 一个div元素;

    2024年02月13日
    浏览(45)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(65)
  • UEditor富文本编辑器上传图片打不开,提示“后端配置项没有正常加载,上传插件不能正常使用”

    1、安装 npm install vue-ueditor-wrap 2、下载所需资源 这一步在解决报错的时候会用到 👉👉👉👉👉 UEditor资源下载链接 上面的打不开请从下面链接下载项目 ueditor-download: vue项目中集成ueditor的UE资源 3、下载完成后将文件夹放到public文件夹下 4、 配置ueditor.config.js,并且在main.j

    2024年02月13日
    浏览(73)
  • layui 整合UEditor 百度编辑器

    layui 整合UEditor 百度编辑器 第一步:下载百度编辑器并配置好路径 百度编辑器下载地址:http://fex.baidu.com/ueditor/ 第二步:引入百度编辑器 代码如下: 第三步:提交表单部分 注意: 提交表单前一定要替换content的内容为编辑器内容,data.field.content = ue.getContent(); 否则,提交的

    2024年02月13日
    浏览(52)
  • vue2 使用pdf.js 实现pdf预览,并可复制文本

            需求:pdf预览,并且可以选中pdf的内容进行复制。                 在ruoyi的vue前端项目中用到,参考了网上不少文章,因为大部分没给具体的pdf.js版本,导致运行过程中报各种api 错误,经过尝试以下版本可用,故记录一下:         安装依赖:         vue 页面

    2024年01月19日
    浏览(58)
  • 百度ueditor如何能实现直接粘贴把图片上传到服务器中

    1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java。前端为Jsp(前端都一样,后台如果语言不通得自己做 Base64编码解码) 因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。 例如www.wan

    2024年02月04日
    浏览(69)
  • 人人开源ueditor富文本+SpringBoot后端,配置问题解决

    目录 一、序言 二、出现的问题 三、人人开源富文本情况  四、SpringBoot后端配置 1.关于json文件 2.关于官方提供给SpringBoot的ueditor依赖 五、总结        首先博主第一次开始去使用到人人开源的富文本,在使用时几个问题解决了一天,如果你也存在我想你可以往下认真看,因

    2024年03月23日
    浏览(39)
  • 阿桂天山的技术小结:Flask+UEditor实现图片文件上传富文本编辑

    话不多说,有图有源码 先看效果:  1.前端html页面index.html 2.后端ueditor.py执行文件( 这个非常重要 ) 3.路径配置文件config.py 4.启动运行程序appstart.py 特殊强调 :路径蓝图,必须指向ueditor( 这个非常非常非常重要,否则前端会报错 ),放在app执行文件中 5)最后整个工程文件树:    希望你

    2024年02月11日
    浏览(63)
  • RSAUtil 前端 JavaScript JSEncrypt 实现 RSA (长文本)加密解密

    文章归档:https://www.yuque.com/u27599042/coding_star/cl4dl599pdmtllw1 import JSEncrypt from ‘jsencrypt’ import {stringIsNull} from “@/utils/string_utils.js”:https://www.yuque.com/u27599042/coding_star/slncupw7un3ce7cb import {isNumber} from “@/utils/number_utils.js”:https://www.yuque.com/u27599042/coding_star/tuwmm3ghf5lgo4bw 注意: 此方

    2024年04月22日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包