集成tinyMCE编辑器以及踩的坑

这篇具有很好参考价值的文章主要介绍了集成tinyMCE编辑器以及踩的坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、tinyMCE编辑器没有实时更新

场景是这样的,在form表单中引用Tinymce富文本编辑组件,在多次重新打开不同form表单时,form携带的数据没有实时更新到Tinymce内,总是显示上一个的form的数据
原因:Tinymce只渲染了一次,所以造成数据有点问题。所以解决的方法就是利用 v-if 的方法,利用显隐判断组件的渲染。
代码如下:


<el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" auto-complete="off" label-width="150px" style="width: 90%; margin-left:5%;">
<el-form-item label="介绍" prop="introduction">
<Tinymce v-if="isUpdate" ref="introduction" v-model="temp.introduction" :height="300" />
</el-form-item>
<el-form-item label="履历" prop="resume">
<Tinymce v-if="isUpdate" ref="resume" v-model="temp.resume" :height="300" />
</el-form-item>
</el-form>
data(){
return{
isUpdate:false;
}
},
methods:{
getData(){ this. isUpdate = true;},
// saveData后必须设置为false,否则无法重新更新isUpdate
saveData(){ this. isUpdate = false;},




如何集成去官網下載 複製就行

集成tinyMCE编辑器以及踩的坑,编辑器,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-834357.html

到了这里,关于集成tinyMCE编辑器以及踩的坑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Tinymce富文本编辑器二次开发电子病历时解决的bug

    本文是在Tinymce富文本编辑器添加自定义toolbar,二级菜单,自定义表单,签名的基础之上进行一些bug记录,功能添加,以及模版的应用和打印 项目描述 建立电子病历模版—录入(电子病历模版和电子病历打印模版)—查看电子病历和打印病历模版 建立电子病历----添加一个电

    2024年04月10日
    浏览(30)
  • 解决在tinymce编辑器插入视频到正文后不能跳转播放的问题

    问题:在其他软件中上传了视频文件,而后将此视频文件插入到正文中,此视频文件 可以 点击进度条跳转进度;而在知了(出现bug的这个软件)中上传了视频文件,而后将此视频文件插入到正文中。此视频文件 无法 点击进度条跳转进度。 需求:希望可以在知了中上传视频

    2024年02月01日
    浏览(44)
  • vue2使用 tinymce富文本编辑器-图片上传、粘贴图片上传致服务器

    1.安装tinymce富文本编辑器插件 npm i tinymce npm i @tinymce/tinymce-vue 2.创建Editor.js文件 封装组件 以便使用 3.汉化包 (我放在public/tynymce/langs文件夹里) 4.vue组件中使用 本次记录重点在于 上传图片方法 需要区分工具栏中图片上传方法 以及 粘贴进去的图片也需要走上传方法。两个方

    2024年02月09日
    浏览(37)
  • 【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接

    前言:最近项目上需要使用富文本编辑器,觉得tinymce很不错就用了,具体怎么在项目中使用参考 【vue】 vue2 中使用 Tinymce 富文本编辑器 【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑 这两天又遇到了新的问题,图片上传后是看地址栏发现是base64的

    2024年02月14日
    浏览(33)
  • Vue集成Monaco Editor的使用,以及开发Python代码编辑器和Sql等

    ​微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(下文简称monaco)就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码(monaco-editor-core)都是共用的,所以monaco和VSCode在编辑代码,交互以及UI上几乎是一摸一样的,有点不同的是,

    2024年02月11日
    浏览(37)
  • tinymce4/5实现将word中内容(文字图片等)直接粘贴至编辑器中——利用插件tinymce-powerpaste-plugin

    TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,自带插件基本涵盖日常所需功能(示例看下面的Demo-2) 接口丰富,可扩展性强,有

    2024年02月15日
    浏览(32)
  • Vue2 实现内容拖拽或添加 HTML 到 Tinymce 富文本编辑器的高级功能详解

    在 Web 开发中,Tinymce 被广泛应用作为富文本编辑器。除了基础的文本编辑功能,Tinymce 还提供了一系列高级功能,使得文本编辑更加灵活和便捷。本文将介绍如何在 Tinymce 中实现一些高级功能,并深入了解每个工具的使用。 Tinymce 是一款基于 JavaScript 的富文本编辑器,支持丰

    2024年02月03日
    浏览(45)
  • 秀米编辑器(xiumi)+百度编辑器(Ueditor) 集成 :解决集成问题,秀米编辑器导出到百度编辑器格式问题,图片保存到自己的服务器(阿里云OSS)

    1.集成前提条件:         1. 需要集成 百度编辑器 到环境中         2. https 环境下才可以导出数据到百度编辑器,如果不是https环境,会出现错误          然后我们开始讲解如何集成: 2.引入资源: //百度编辑器 需要修改的文件(配置与原始的配置不一样,后面

    2024年02月09日
    浏览(34)
  • VUE2.0集成 Markdown 编辑器

    Markdown编辑器的使用 这是一款基于Vue的markdown编辑器。既可以用来编辑Markdown语法,又可以用来解析 效果图,mavonEditor实现了Markdown集成 Markdown是一种标记语言,相较于word文档更加清晰方便,适合进行笔记等。将Markdown集成进入自己项目之后,就可以在项目中使用的Markdown编辑器

    2024年02月10日
    浏览(68)
  • Vue项目集成Markdown标记语言编辑器(MavonEditor)

    这是一款基于Vue的markdown编辑器。既可以用来编辑Markdown语法,又可以用来解析 效果图,mavonEditor实现了Markdown集成 Markdown是一种标记语言,相较于word文档更加清晰方便,适合进行笔记等。将Markdown集成进入自己项目之后,就可以在项目中使用的Markdown编辑器了 mavon-editor:  2.1

    2024年02月07日
    浏览(86)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包