mdrender-false-编辑
发布于 1 年前 作者 zanetti4 607 次浏览 来自 客户端测试

<p style=“white-space: normal;”>编辑:</p><p style=“white-space: normal;”>mdrender-false</p><p style=“white-space: normal;”><em>mdrender-false</em></p><p style=“white-space: normal;”><strong>mdrender</strong></p>

70 回复

@zanetti4 ,这个文章编辑功能怎么办啊,从接口拉过来的是html,确认编辑提交的时候需要markdown格式,必须要用编辑器插件么?

@Reviving-Pain 我刚做到发布话题,还没做编辑功能呢。现在正如你看到的,内容展示出来带有 html 标签,我用的 ueditor 编辑器。发布话题时提交的内容是 <p>mdrender-false</p>,在细览页从接口拿到的是 <p>mdrender-fals</p>难道发布话题时提交的内容也需要 markdown 格式吗?

@zanetti4 ,确认了一下,至少我现在发现的是这样,提交新发布的文章或者修改的文章,里面的content要么是普通的文本,要么是markdown格式的文本,如果提交带有各种标签的html文档的话是会被当作普通文本处理的,如果要拉过来的数据是markdown的话需要在拉取文章的接口请求中设置一下mdrender这个请求字段,详见这个我之前提的问题,拉过来之后如果要给用户显示的话要么自己现在使用的前端框架支持markdown渲染,否则只能再找个插件进行渲染了。关于编辑话题的问题,把markdown文本从服务器拉过来传给textarea就好了,也不需要专门的makdown编辑器插件了。这是我的项目的具体演示地址 vueCnode社区前端 ,可以适应移动端和pc端,处女作,大神轻喷 :)

@zanetti4 提交的接口里好像没有mdrender这个字段

@Reviving-Pain 回答得好详细啊!我再研究研究,参考一下您的项目。我只做了 pc 端,另外,新建主题的接口里确实没有 mdrender 参数。

@zanetti4 一起学习^ω^ ,刚才看了一下你的github原来你也用vue做前端啊,做好了@我一下,跑跑你的项目,相互学习一下

@Reviving-Pain 是的,正在练习 vue,没问题,我做好了上传到 github 告诉您。有段时间没更新了

@Reviving-Pain 刚才试了一下,我在请求主题详情时对内容的字符实体名称做了反转义,这样在我的文章细览页就能正常显示发布的话题了。不过在 cnode 这里,还是带标签的。

@zanetti4 如果从服务器拉取文章的时候不希望得到markdown文本而希望得到html文档的话,拉过来反转译一下再编辑也可以,不过向服务器发送的时候还是只能识别普通文本或者markdown文本。 推荐把文章请求字段mdrender设置成false,这样拉过来的markdown文本不用反转译就可以直接呈现给用户编辑,标记的格式都在,简单易读,方便编辑,而如果拉过来的是html,不反转译很难呈现给用户,不仅如此,就算反转译成了markdown格式,也不能保证样式的完全还原,但是,如果是反转译成普通文本,那原来的样式丢了又是一件很麻烦的事情。 以上是一点点个人理解,如果有更好的解决方案的话可以一起探讨一下

@Reviving-Pain 关键还是因为我提交的内容是 html 格式的,所以拿到的内容带有 & l t ; 和 & g t ;,我才做的反转义,页面内容展示出来原来的样式倒是没丢,不过呈现在 cnode 这儿带有标签肯定是不对的。我想先把其它功能做完,再给这块儿做优化,或许用 ueditor 也能提交 markdown 格式,也未可知。 我的细览.jpg

@zanetti4 ,嗯嗯,ueditor插件可以提交markdown的话就方便多了

@zanetti4 请问一下你的项目中使用vuex统一管理组件状态了吗?

@Reviving-Pain 我用了 vuex,但是没有把所有数据都放进去,目前只放了“没有回复的主题”,其它数据在组件间传递。

@zanetti4 不错啊,用了vuex,我这边等功能基本完成之后准备用vuex进行重构 T^T

@Reviving-Pain 为什么要进行重构啊?不是所有数据必须放在 vuex 里面呀

@zanetti4 ,我没有用vuex,登录状态全是app.vue判断之后给子组件分发的……

@Reviving-Pain 那是有点儿麻烦,我把登录状态存在 cookie 里了。

测试评论

自己的回复

测试新消息

测试新消息222

测试新消息11111

测试新消息 333333

测试新消息1

测试新消息2

标记全部已读

标记全部已读 111

测试回复

111111 谢谢谢谢

测试新评论

测试新评论 2

测试新评论 2

测试新评论 2

测试新评论3

测试新评论4

测试新评论5

测试新评论6

测试新评论7

测试新评论8

@zanetti4 给自己的评论回复

@zanetti4 回复30楼 abc

@Reviving-Pain 测试回复-链接

@Reviving-Pain 我的 cnode 项目基本做完了,还有几个待解决的问题。代码中的问题欢迎给我指正~

@zanetti4 OK! 好的,等会pull下来拜读一下,如果有问题第一时间告诉你,嗯……我这边也重写了很多地方,刚刚push上去,如果你有空也pull下来看看,给指点指点,有不足之初也希望你能直接提出来,作为重要参考。谢谢你还记得call我~相互学习,相互学习 ^o^

来自 Vue版CNode客户端

@zanetti4 拜读了一下,暂时有这些感想,我做了些整理,看了之后可能会有种开批斗的感觉…还请多多包含,后面有时间打算仔细研究研究你项目里面的一些功能亮点 review about cnode project.png 如果图不清楚及时@我,给你发有道云笔记链接 还有,每个页面没有对应的页面标题,亘古不变 —> project-cnode 还有,项目里大段的被注释掉的代码太多了……这个习惯很不好,我花了好久才改掉的这个习惯 来自 Vue版CNode客户端

@zanetti4 评测下方又添加了一些建议(因为cnode官方没有暴露评论修改的接口,所以直接拿cnode官方网站修改的评论…)

来自 Vue版CNode客户端

@Reviving-Pain 有几天没登录了,刚看到你的留言,写得非常详细、用心,感谢!好的,我也把你的项目下载下来体验一下,然后把感受反馈给你。之前就参考过你的代码,vue-markdown 就是从你那儿学的~
截图很清晰,你所指出的缺点主要集中在用户体验上(loading),之前没注意这些。注释的代码我是为了做个备份,最后确实应该删掉。我修改一下再告诉你。
那些插件都是在网上搜的,我还参考了几个别的程序员写的 cnode,从那儿学到的。

@Reviving-Pain 我把你的项目下载后体验了一把,现在把我的感受反馈给你,如有说的不对之处,请见谅。有很多值得我学习的地方,受益匪浅~
有待改进:

  • 打开页面后不登录,点击右上角的消息图标,弹出登录提示依然不登录,点击叉子后右侧一直是 loading 状态。
  • 进入社区主页,向下滚动页面,此时右下角的 Fork me on GitHub 缎带链接会挡住滚动条,影响鼠标拖动。
  • 社区主页和话题细览页的“回到顶部”按钮风格不一致,统一一下是否更好?
    值得学习:
  • 无限滚动。
  • 话题细览页右侧有“查看评论”按钮,可以定位到评论处。
  • 用户页有 github 链接。
  • 左侧导航的展开、收起动画体验很好。
  • 登录时还有如何获取 token 的提示,人性化。
  • 有发布评论快捷键 ctrl + enter
  • 在编辑话题页有“取消编辑”按钮。
  • 点击发布话题按钮后,有确认提示。

@test-ly 测试评论 <

@zanetti4 , 好的,已经列入日程了,依然有很多问题,多谢

来自 Vue版CNode客户端

@zanetti4 麻烦问一下,还有没有比较好的公共开放API呀~(⁄ ⁄•⁄ω⁄•⁄ ⁄)

来自 Vue版CNode客户端

@Reviving-Pain 别的我也不知道了,这是我用框架做的第一个网站。去百度搜一下看看吧~

@Reviving-Pain 刚看到一个有开放 api 的网站 v2ex,另外问一下,在向 cnode api 发请求时,应该会产生跨域,但是我没有做相应的处理,也没有报错,这是什么原因?难道 cnode 服务端设置了允许跨域的头部?

@zanetti4 个人初步判断应该是服务端支持CORS请求,看了一下红宝书上的介绍:

CORS(Cross-Origin Resource Sharing)跨域资源共享,是W3C的一个工作草案,定义了必须在访问跨域资源的时候,浏览器与服务器应该如何沟通。CORS背后的基本思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或者响应是应该成功,还是应该失败。
比如一个简单的使用GET或POST发送的请求,它没有自定义头部,而主体内容是text/plain。在发送该请求的时候,需要给它附加一个额外的Origin头部,其中包含请求页面的源信息(协议、域名和端口)以便于服务器根据这个头部信息来决定是否予以响应。

之前也仔细检查了一下在发送cnode社区支持的这些api请求的时候,可以在Request Headers里找到这个浏览器给自动附加的Origin头部,进一步可以证明服务端对这些接口解除了同源策略限制,具体检查细节如下图
CNode社区api支持CORS.png

来自 Vue版CNode客户端

@Reviving-Pain 明白了,解释得非常详细,谢谢!

@zanetti4 哈哈,不客气,相互学习(๑•̀ㅂ•́)و✧

来自 Vue版CNode客户端

@zanetti4 把这个帖子的标题和内容改一改,然后切换到问答区,大概删除一下中间的测试评论,都可以当一个标准的问答讨论帖了哈哈

来自 Vue版CNode客户端

@Reviving-Pain 哈哈,没错,感觉相互促进很有学习动力,一个人学习很枯燥~

回到顶部