Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

移动端如何调用toolbar的方法 #321

Closed
karthuszY opened this issue Apr 17, 2020 · 58 comments
Closed

移动端如何调用toolbar的方法 #321

karthuszY opened this issue Apr 17, 2020 · 58 comments
Assignees
Milestone

Comments

@karthuszY
Copy link

你在什么场景下需要该功能?

移动端需要键盘顶部的按钮点击实现输入md,而不是自带的toolbar

描述可能的解决方案

vditor提供接口供移动端调用,类似viditor.boldSelect即可输入加粗

其他信息

@@移动端关于所见即所得的MD编辑器很迫切,找了很多资料就看到贵项目实现比较接近。
@Vanessa219

@Vanessa219
Copy link
Owner

Vanessa219 commented Apr 17, 2020

目前没有,你使用 toolbarIconElement.dispatchEvent(new CustomEvent("click")) 试试。

vditor = new Vditor()
toolbarIconElement = vditor.vditor.toolbar.elements.bold

@Vanessa219
Copy link
Owner

没问题的话我先关闭了,有问题可以随时反馈。

@karthuszY
Copy link
Author

调用这个方法在移动端无效 @Vanessa219
请问是否还有其他解决方案

@Vanessa219
Copy link
Owner

不好意思,少了一层

vditor.vditor.toolbar.elements.bold.firstElementChild.dispatchEvent(new CustomEvent("click"))

@karthuszY
Copy link
Author

image
还是没有效果,不管我是在App端调用该方法 还是在网页内部调用

@Vanessa219
Copy link
Owner

直接在 console 中输入以上代码片段即可。要保证 toolbar 中有 'bold', wysiwyg mode 体现为工具栏上 b 高亮

@karthuszY
Copy link
Author

image
还是没有效果,而且移动端需要隐藏toolbar
不知道在toolbar隐藏的状态下 使用此种方法是否有效。
或者是否可以通过模拟快捷键来实现格式输入?

@Vanessa219
Copy link
Owner

移动端的 iPhone 是 touchstart 了,其余为 click

@karthuszY
Copy link
Author

非常感谢 解决了大部分问题 ,还有一些问题请教
如何隐藏这个popover
image

还有是否能实现完全离线使用,我看到有一些CDN下载的东西,论坛里和issue里的离线使用的问题我看过了,没找到相应答案

@Vanessa219
Copy link
Owner

开发文档里面搜索 cdn,修改为本地的就可以了。不需要情景菜单的话可以设置为 ir 模式

@karthuszY
Copy link
Author

所见即所得模式没法隐藏这个菜单吗

@Vanessa219
Copy link
Owner

你覆盖一下 css 试试 display:none !important

@karthuszY
Copy link
Author

再请问一下 heading的 H1到H6因为按钮是隐藏 即使获取到了元素也没法模拟点击事件,有什么处理方案吗
image

@Vanessa219
Copy link
Owner

先触发 heading 就可以显示按钮了

@karthuszY
Copy link
Author

image
这样操作会有异常显示 会把已经隐藏的toolbar显示出来 不知是否还有其他解决方案

@karthuszY
Copy link
Author

还有是否有回调监听删除了某一个格式的代码,比如删除了check/code/list应该如何监听,方便将按钮状态置为非选中

@Vanessa219
Copy link
Owner

隐藏的 toolbar 移除显示区域 left: -100000px

@Vanessa219
Copy link
Owner

有个 input 回调,你试试

@karthuszY
Copy link
Author

input回调我在使用 感谢回答,还有最后一个问题 headings点击后,我不想显示这个选择框需要如何使用代码隐藏选择框 并完成h1-h6的点击事件呢
image

@Vanessa219
Copy link
Owner

.vditor-hint {
    position: fixed;
    left: -1000px;
}
vditor.vditor.toolbar.elements.headings.querySelectorAll('button')[0].dispatchEvent(new CustomEvent("click"))

@karthuszY
Copy link
Author

谢谢!非常感谢你的耐心解答

@karthuszY
Copy link
Author

image
image
无法呼出inline-code 和ordered-list这两个控件

@Vanessa219
Copy link
Owner

vditor.vditor.toolbar.elements["inline-code"].firstElementChild.dispatchEvent(new CustomEvent('click'))

@karthuszY
Copy link
Author

image
image
vditor.setValue(json['content']) 时 部分换行和回车消失了

@Vanessa219
Copy link
Owner

Vanessa219 commented Apr 29, 2020

部分换行和回车在 markdown 规范中解析出来会被移除。想要不被解析可以试试vditor. insertValue(json['content'], false)

@karthuszY
Copy link
Author

试了insertValue(json['content'], false) 和 setValue(json['content'], false) 都没有效果

@Vanessa219
Copy link
Owner

更新到最新版试试。

@karthuszY
Copy link
Author

更新到最新版本3.1.9依然存在这个问题,并且hidetoolbar有bug,不会隐藏或者要键盘弹起之后才会隐藏

@Vanessa219
Copy link
Owner

更新到 3.1.19 试试。配置项已经修改,可以看一下 CHANGELOG.md

  toolbarConfig: {
    pin: true,
    hide: true
  }

@Vanessa219
Copy link
Owner

规范里面会删除多余的换行和空格,这也是为了排版的好看。是什么场景一定要加上不必要的换行和空格呢?

@karthuszY
Copy link
Author

karthuszY commented May 6, 2020

感谢提供意见。

使用场景如下:
目前我将vditor用于移动端,用户编辑书写了一个文章,段落、图片或者内容中间可能插入一行或者多行的空行保证间隔,让文章看起来更清晰,如果保存了这个md string再次回来编辑的时候 中间的空行消失了,可能会造成用户的困扰

@Vanessa219
Copy link
Owner

这可能要看你的用户了,vditor 用在 https://hacpai.com/ 上还没出现用户提出类似的需求。

你也可以做一个换行按钮,点击以后插入替换字符

@88250
Copy link
Collaborator

88250 commented May 6, 2020

可以这样看,如果你的用户用过 Markdown 的话那么应该明白多个空行实际上没有作用,即段落不会存在多余空行,如果需要内容分隔,可以用 --- 分隔线。

但如果你的用户没用过 Markdown 的话,那解释起来就费劲了。其实也没有什么解释的必要,用户不会关注这个 😂 这种场景下,我个人建议还是用富文本编辑器,满足用户需求第一。

@karthuszY
Copy link
Author

karthuszY commented May 6, 2020

可能用户并不会在意md和富文本的区别😂

还是感谢两位的耐心解答

@karthuszY
Copy link
Author

karthuszY commented May 6, 2020

image
不知道为什么会出现这个报错,好像是我加载了编辑器关闭网页以后再次重新打开网页加载编辑器就会这样

@Vanessa219
Copy link
Owner

可以详细描述一下么?我这里重现不了

@karthuszY
Copy link
Author

karthuszY commented May 6, 2020

不知道是不是我js写的不对
var vditor func config(json) { vditor = new Vditor( value: json.content ) }
大概是这样写的 我提供了一个config方法供iOS原生调用,让原生传入一些配置信息,比如原始的value,mode之类的,不知道是不是我这样的写法有问题

我这里现在没带电脑,如果不是这个原因 明天我再提供详细一点的代码

@Vanessa219
Copy link
Owner

这样看不出你的参数。

@karthuszY
Copy link
Author

image

实际问题就是我有一个文章列表,每次我再初始化方法中需要传入json进行初始化,打开第一个文章初始化编辑不会报错,关掉再重新打开另一个文章就会报错,如果这时候关掉当前的编辑器再重新打开第一个文章,也同样报错

@Vanessa219
Copy link
Owner

你把 vditor.vditor... 放在 options.after 中试试

@karthuszY
Copy link
Author

应该不是这个问题 我把代码注释了也一样

@Vanessa219
Copy link
Owner

https://github.com/Vanessa219/vditor/issues/new

那你可以添加一下 'edit-mode' 或稍等 #373 修复

@karthuszY
Copy link
Author

好的 感谢 已解决

@karthuszY
Copy link
Author

karthuszY commented May 7, 2020

image
image

当初始化的value 为空字符串""时,会出现该错误,控制台没有报错
我试过初始化的value设为有内容的字符串不会出现该情况,不知道什么问题

复现的步骤是:移动端加载网页打开编辑器,关掉,再打开,再关掉,第三次打开基本必现

ps:把value这个字段注释不进行初始化也会出现该问题

我的应用场景如下:用户根据日期记录笔记,左右滑动可以切换,点击可以打开编辑

image

@Vanessa219
Copy link
Owner

重复加载的时候把 dom 里面清空了

document.getElementById('vditor').innerHTML = ''

@karthuszY
Copy link
Author

image
请问是否有隐藏这个的配置项

@88250
Copy link
Collaborator

88250 commented May 9, 2020

@Karthus1110 老铁,开个新的 issue 吧

@Vanessa219
Copy link
Owner

@karthuszY 没有,用 css 试试

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants