JS实现 带有话题的文本编辑 + 图片编辑(上)
2021-03-05 03:29
阅读：588
标签：indent ret 文本编辑 动态 highchart api 进入 dir 标签
效果图展示:
这是一个比较简易的文本编辑框显示,此文主要讲文本编辑相关~
文本编辑实现原理分析:
- 一般涉及到文本编辑,我们通常会使用 input 输入框来实现,但是像一些需要含有特殊样式标题的文本编译框,input 显然满足不了我们的需求,这时候我们需要用到一个可以使任何元素都可以具有编辑功能的属性: contenteditable 只需要在元素上设置contenteditable="true",该元素即可进行编辑
- 默认进入该页面时,文本框聚焦,通过 directives 设置 自定义指令
- 编辑的文本要默认设置好相关标题长度的距离,不然会和标题重叠在一起, 可以通过 text-indent 这个设置首行缩进距离的属性解决,由于标题是动态获取的数据,所以设置时不能写死,所以要根据标题长度进行设置
- 编辑好的内容 通过 input事件去获取
以上就是js实现带有不同样式标题的文本编辑方式重要点
核心代码
html:
#{{title}}# div class="edit_box" contenteditable="true" v-html="message" ref="editBox" id="editBox" @input="changeText" v-focus :style="{‘text-indent‘:indentNumber + ‘em‘}" >
js:
data() { return { title: "你对后浪的感触", message: ‘片中说：科技繁荣，文化繁茂，城市繁华，现代文明的成果被层层打开，可以尽情享用。我要说，那个追着无人机几条街的孩子，那些高中入学率只有一半的学生，那些996的职员，那些被房价压得喘不过气的年轻人，这也是青年，这也是我们的生活。现代文明的成果并没有传递到每个人，现代社会的结构性矛盾却无时不刻不成为着重压在每个人头顶的利剑。‘, indentNumber: 0, }; }, directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }, created() { this.indentNumber = this.title.length + 4.5 }, methods: { changeText(){ this.commentInner = this.$refs.editBox.innerHTML console.log(this.commentInner); }, }
css:
* contenteditable
兼容性很好，兼容所有主流浏览器。
用法很简单，只需要给你需要的标签填上即可。
该属性可继承,只要父元素设置后,子元素也可进行编辑
我是一个div
分享一刻:
各种折线图和柱状图
JS实现 带有话题的文本编辑 + 图片编辑(上)
标签：indent ret 文本编辑 动态 highchart api 进入 dir 标签
原文地址：https://www.cnblogs.com/huangaiya/p/12909366.html
上一篇：重新认识package.json
下一篇：php框架选型
评论
亲，登录后才可以留言！