橘哥哥-优快云博客

项目中有需求,用户通过全选word中的图片和文字,然后直接粘贴到富文本编辑器中,可以正常显示,但是实际开发中发现word多图片粘上去的时候图片全部都是file本地路径,无法正常显示,于是考虑另一种思路,用户直接上传word,然后后台通过解析word,并且把word中的图片进行上传,最后返回给前端的就是纯标签形式,类似于下图前端收到数据回传后,直接渲染到富文本内就可以了以iceEditor为例//iceEditor此处为自定义组件iceEditor.plugin({ ...

2022-04-11 09:52:01 2002

原创 el-autocomplete选中后在原有文字上进行追加而非替换

项目中有一个根据输入公式的需求,当用户输入, . { [ ( 这些特殊符号后,会返回一个数组,用于提示用户快捷输入,但是公式可能太长,返回值就只能带提示的那一部分,而并非全部,例如:公式为 :${Global.Plan.Units(//).Count}>0当用户输入 ${Global. 时返回一个数组 [{tip:'Plan'}],假设用户直接选中那么v-model中绑定的值就会变成Plan了,需求当用户选钟plan时,是在${Global.的基础上进行追...

2022-04-08 11:17:27 1777 1

原创 svg中text标签换行显示,并实现拖拽移动text标签

如图,项目中需要一个在线批阅的功能,批阅者可以在线给word文档进行批注和打勾打叉等功能,后来又追加移动批注和批注换行的功能,想法就是用户通过\n或者按钮等操作对文本进行一个切割,例如图片中的文本嘻嘻嘻\n哈哈哈\n啦啦啦\n么么么\n哒哒哒然后对文本用split("\n")方法进行切割,变成数组['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒哒']//x 和 y 是做鼠标移动时回传出来的let arr =['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒...

2022-04-02 10:04:19 2339

原创 vue中模拟试卷出题单选题

如图,可以根据elementui组件自定义多选题,自动增加ABCD等选项,删除时从答案中移除

2022-03-30 13:45:18 1697

原创 wangEditor上传图片事件抛出处理+解决Form-Making中无法粘贴

项目背景:项目中无法直接修改插件中的富文本编辑器,只能先修改插件的富文本编辑器源码,然后打包插件最后放到项目中运行,所以需要将插件中富文本编辑器的上传图片事件抛出使用Form-Making 自定义表单插件的时候,遇到无法粘贴表格的问题,查看源码后得知,是form-making中使用的vue2-editor富文本编辑器无法粘贴表格,搜索很久无法查阅到关于vue2-editor中如合粘贴表格,于是决定修改form-making中的源码,将vue2-editor替换成wangEditor富文本编辑器,

2022-03-15 17:37:47 2132

原创 unity3D学习笔记

前段时间有个unity3D的离线版实验小项目,模型和材质都已经调好,需要简单的c#+unity3D开发经验,类似游戏人物获取指定的实验物品,拼接安装到指定的地方,看了几天的unity3d视频就着手开始撸了比较优质的学习资料1.Unity熟悉引擎2.UnityGUI3.C#语法4.进阶unity游戏教程...

2022-03-11 16:56:58 4642 1

原创基于CodeMirror和diff-match-patch封装一个vue中的文本对比组件

如上图项目中需要对比文本修改前后不同的差异之处.考虑到方便后期复用,便封装成一个components组件首先装包cnpm install diff-match-patch savecnpm install codemirror save<template> <div ref="codeMirror" class="code-contrast" style="width:100%;height:100%"></div></templ..

2022-03-11 16:42:57 2982

原创 iceEditor

=>源码在此处ps:此富文本编辑器优点是可以直接通过js引入,便捷使用,缺点是教程太少,二次开发较为麻烦项目中导入图片时,ice编辑器默认是粘贴时图片多大,富文本内图片的显示多大,需求是添加一个自定义组件可以选中富文本内图片时可以去更改图片大小,此处参考的源码插件开发这一块,如下图根据插件开发的代码,弄好后如下图逻辑就是获取选中图片的html代码,然后通过replace转换成加上style样式代码的html,然后插到原来的位置,其实源码里面都写好了,就是找起来比较麻烦.

2022-02-22 10:33:09 796

原创记录一下nginx转发问题部署问题

用laya写了一个项目部署到的根目录,后来又写了一个后台管理平台,部署到根目录下的managers目录,结果发现第一次进入managers路径是正常显示,结果一刷新就变成下图所示通过调试器发现有很多文件没找到,而这些文件在后台管理项目中根本就不存在,所以找不到原因nginx部署时有问题.每次刷新后台管理项目时都跳转到了根目录(部署的laya项目),所以显示有问题....

2022-02-11 17:18:53 1299

原创 Laya中添加html元素根据Laya中的位置自动定位

Laya项目中有时候需要用到html元素比如此处,使用了ICE的UI组件库,代码中原本是直接定位上去的,但是当窗口发生变化时,Laya元素会自动缩小适配,而html元素的定位出现偏移等问题.于是就考虑,在原位置创建一个Laya元素,然后将html元素定位在Laya元素里面,从而达到html跟随窗口大小而变化的需求.//1.创建Laya中的元素并设置宽高,并添加到Laya对应的块中let spr = new Laya.Box()spr.width = 100spr.height = 1

2022-01-24 09:35:25 979 2

原创随机切换特效轮播图自动播放+手动切图+随机特效

公司买了个华为云速建站,图的就是云速建站的方便,但是傻瓜建站就注定不能非常方便的特殊定制化界面,有些特殊效果根本加不上去,而公司又有要求,只能使用iframe嵌进去.就在jquery库中弄了个特效轮播图按自己需求改了下,将就能用.还需要优化下....

2022-01-20 11:03:22 828

原创 el-carousel高度自适应,由内容图片撑开

<el-carousel indicator-position="outside"> <el-carousel-item v-for="item in images" :key="item.id"> <img :src="item.src" alt="" style="width:100%"> </el-carousel-item> <img :src="images[0].src" style="width:100%;opaci.

2022-01-18 17:22:06 2781

原创记录一下遇到的bug---Uncaught SyntaxError: Unexpected token ‘＜‘

今天通过js引入插件时,发现一个很奇怪的bug,例如此处.我直接通过相对路径引入相关js然后发现部署在根目录的网页可以正常显示该插件但是如果部署在非根目录就显示不出来同时会报错Uncaught SyntaxError: Unexpected token '<' 和相关js的方法defined处理后发现原因就在引入的地方,因为是相对路径引入,所以如果部署在非根目录下,那么js在根目录下就找不到.所以就会报上面的错误,处理方法为通过动态引入,然后就可以正常显示的...

2021-12-29 16:55:21 773

原创 iceEditor 富文本编辑器的使用方法小结

1.为什么选择iceEditor因为最近使用Laya项目开发,不好通过npm装包等方法去引入富文本编辑器的插件,于是找到iceEditor这款,只需要通过js引入,即可快捷使用2.使用方法基本使用方法参考官方文档iceEditor 官方文档3.在vue项目中使用iceEditor 富文本编辑器的使用方法1).将iceEditor项目下载到vue项目中的plugins下2).index.html中引入相关css和js ,注意需要放到body里面,而且引入顺序不能反...

2021-12-28 15:28:16 1286 2