l-text组件扩展问题

l-text组件扩展问题

老师您好。

问题描述:希望l-text支持在元素直接进行文字的编辑,也可以实时反馈到表单上。

相关截图:

在使用课程线上H5编辑器时,有些疑惑。

当我选中了文字时点击删除的话,会把整个图层删掉。

预期结果: 

1.如果选中了文字只删除文字

2.如果没有选中文字,则删除整个图层

http://img1.sycdn.imooc.com//climg/6096b97e09d4b9e022140944.jpg

我的想法是:

通过给p标签添加contentediable属性,并且绑定p的input事件,监听p标签的内容变化,从而更新表单上的值。
但是我不知道怎么判断是选中了图层还是选中了文字,获取选中的文本的方法


希望老师能给个思路,谢谢!!!

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好 

很好的扩展思路 由于我们在实现的没有考虑直接编辑文字的场景 这个场景其实要实现的内容挺多的,比如换行等等的实现,现在的删除逻辑是只要元素被选中,并且不是 表单(input 或者 textarea),就要删除图层。


所以这里的实现,我认为是要判断是否是 可编辑状态,正常逻辑应该是可编辑状态,删除就不响应,所以我认为你这里可以拿到外侧的节点,查看它的 contentediable 属性是否存在,如果存在那么就不删除图层,进行正常的操作即可。


  • rookie_white 提问者 #1

    老师我觉得,这个判断外侧节点是否存在contentediable属性这个方案似乎行不通。
    因为其实可编辑的元素的contentediable的属性是一直为true,因为可以一直编辑的,不存在不可编辑的状态,拿到外侧的元素也似乎没啥用,判断不了编辑元素是否选中了文字信息。当然除了最后生成H5的时候是不可编辑的。

    我觉得是判断当前这个元素有没有被选中的内容,也可以说当前窗口中选中的文字包含在这个图层中,如果有选中的内容就不删除图层,进行正常的编辑工作,反之则删除图层。
    现在我不知道去怎么判断这个元素有没有被选中的文字,网上搜的话,只能获取到窗口被选中的文字的值。就卡在了这个地方,感觉需要换个思路实现才行?​。
    不知道我的理解对不对,还是我理解错了老师的思路。

    2021-05-10 23:54:01
  • rookie_white 提问者 #2

    老师,我在MDN上找到这个方法获取选中的文本的方法, 可以设置对应参数来解决我上面说的那个问题,?今天有点乱,没注意到,又自问自答了。
    还有老师的方案我不是很理解,就像我上面说的那样,是不是我理解错了老师的思路。理解错了的话,希望老师帮我解答一下。有点啰嗦,不好意思。
    谢谢老师解答。

    2021-05-11 00:28:55
  • 张轩 回复 提问者 rookie_white #3

    同学你好 这个问题我们首先要明确需求

    首先我们是有快捷键这个功能的 当选中图层的时候 按下删除是删除这个图层的。(也就是这个原因造成了你的矛盾)

    解决方案,一般的编辑器的做法。

    单击选中,和原来的逻辑一样,没问题。

    双击选中,并且进入编辑模式,也就是你说的 contenteditable 设置为 true,现在就要让按删除按钮不触发图层的删除,这里不需要判断是否选中或者没有选中文本,而是在双击的时候添加图层的一个新的数据(改变 store),比如 isEditing:true, 在点击删除的时候,可以拿到当前store 中 component 的值,看它是否正在编辑,如果 isEditing 是 true,那么就不处理,反之则进行下一步操作。


    说了这么多,希望你明白啦,不明白可以继续留言。


    2021-05-11 10:59:23
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师