新增富文本框数据，表单无法正确显示

最新推荐文章于 2023-04-12 16:53:38 发布
最新推荐文章于 2023-04-12 16:53:38 发布
阅读量533 收藏
点赞数
分类专栏： bug 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45944993/article/details/121345602
版权

新增富文本框数据，表单无法正确显示

问题：

新增富文本框数据，表单无法正确显示

请添加图片描述

解决

原来的代码

<el-table-column label="题目内容" align="center" prop="questionContent" >

修改后

      <el-table-column label="题目内容" align="center" prop="questionContent" >
          <template slot-scope="scope">
          <div v-html="scope.row.questionContent"></div>
        </template>
      </el-table-column>

请添加图片描述

小陈小陈一事无成
关注
专栏目录
vue 页面不置顶问题(页面内操作、页面跳转后) - 集合篇
草巾冒小子的博客
10-16 881
文章目录vue 页面内切换dom，页面跳转后 都不置顶？一、页面内操作：二、页面之间跳转：2.1 代码截图 · 说明：2.2 增加代码 · 示下：三、拓展 · （直接置顶、滚动置顶） vue 页面内切换dom，页面跳转后 都不置顶？ 如何解决这种不置顶问题？ 解决办法，详情参考下文介绍： 一、页面内操作： 下述代码，解决了页面内操作，页面不置顶的问题。 二、页面之间跳转： 下述代码，解决了vue-router跳转到新页面后，页面不置顶的问题。 2.1 代码截图 · 说明： 2.2 增加
解决使用elementUI校验表单中使用验富文本编辑器内容的问题
qq_45532769的博客
10-30 2078
解决使用elementUI校验表单中使用验富文本编辑器内容的问题
vue中使用富文本编辑器tinymce高度样式不生效的解决方案
time_david的博客
02-08 2195
解决vue项目中使用tinymce高度样式不生效的问题
vue+elementsui之富文本编辑器采坑
hyly_zhard的博客
11-21 458
富文编辑器的选择，常用的有UEditor，vue-quill-editor，Tinymce，Vue2Editor。 推荐使用Vue2Editor，vue-quill-editor，这个使用比较简单不会那么繁琐。 问题： 1、图片转成base64问题。\ //将以下方法放入富文本编辑器的init方法内 //解决base64问题 images_upload_handler: (blobInfo, su...
j-editor在tab切换时内容消失切不可编辑
weixin_46449736的博客
10-16 1228
项目使用jeccgboot低代码平台 需求是在一个tab里再放一个tab，里面放三个富文本编辑器，jeecgboot的j-editor组件封装了tinymce插件来实现富文本编辑功能。 问题是在切换到基本信息、特征参数这些tab再切换回详情时富文本内文字消失且不可编辑， 网上查阅后发现在切换其他tab过程中富文本的key值没有改变，导致再切换回来富文本编辑器没有重新渲染，出现先前编辑的文字消失且无法再次编辑的问题。 我的解决方法是给每一个富文本的key绑定一个时间戳；第二个富文本在时间戳的基础上加1
vue+wangeditor动态添加/删除富文本功能实现及问题解决
小男哥的博客
10-15 4392
vue+wangeditor动态添加/删除富文本功能实现及问题解决 前言： wangeditor是一个很好用的前端富文本编辑器，其功能强大，简单易上手让我这种前端小白简直爱不释手，然鹅在强大的工具或多或少都会有点小问题。今天就跟大家讲一下我在动态表单中使用它出现的问题以及最终的解决方法，有更好解决方法的大佬，欢迎不吝赐教。 说明：本次案例使用的是wangeditor V3，不同版本请自行参考其官网使用文档 V3官网基本用法说明： 1，安装：npm i wangeditor@3.1.1 ； 2，var E
富文本编辑器CKEditor的使用心得
LSur_king的博客
12-25 1074
1.在JSP页面导入脚本文件 &lt;script type="text/javascript" src="plugins/ckeditor/ckeditor.js"&gt;&lt;/script&gt; 2.写JQuery或JS脚本： &lt;!--'CONTEXT'是一般表单元素textarea的ID，通过js函数转换成具有配置模板的富文本编辑器--&gt; $(function(...
DWZ富客户端框架，使用教程
04-25
- **在线编辑器**：提供文本编辑功能，支持富文本格式。 - **分页组件**：内置的分页机制，轻松实现数据分页显示。 - **ajaxTodo扩展**：针对特定操作的Ajax调用，如数据更新等。 - **dwzExport列表数据导出**：...
RTF规范详解：跨平台文本与图形交换格式
RTF（Rich Text Format）是一种由微软开发的富文本格式，旨在促进不同操作系统和应用之间的文本及图形数据交换。RTF规范允许文本包含各种格式化信息，如字体、大小、颜色、对齐方式等，同时支持图像和其他复杂元素。...
amis前端低代码框架 v1.1.4
04-21
6、内置 100+ 种 UI 组件：包括其它 UI 框架都不会提供的富文本编辑器、条件组合等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 自定义组件 来扩充； 7、容器支持无限级嵌套：可以通过组合来...
前端富文本设置的表格样式无法展示解决方案
ITKouSyou的博客
12-15 3017
这是因为，大部分编辑器本身会自带一些样式属性，而当获取富文本内容的时候往往是不带这些样式属性的，所以才导致了实际看到的和编辑器里预览的不一致的问题。这里的样式可以自己根据实际需求进行修改，如果想要和编辑器完全一致的样式，推荐通过浏览器的开发者工具，查看富文本编辑器里使用的哪种样式，然后进行对应的样式增加。后面的追加样式同方案一一致，但是因为时标签样式，所以会造成样式污染，此方法用在单页面展示富文本会相对方便。然后点击此按键，然后选中左边的表格区域，选中后，就可以在Styles里看到对应的样式。
偶遇bug : el-tab点击不生效,无法切换页面
qq_53585425的博客
11-28 5424
容易忽略的小bug
Vue使用ElementUi表单多级级联时引发的表单错乱问题，闹心的Bug哪都有，这个最烦人
04-12 1720
其实这个问题出现的场景还是挺费心思的，因为业务需要，我们有一个多级表单的场景，而且某个表单可能会级联另一个表单域的出现或隐藏，而且我还使用了v-if判断....这就是最糟心的地方，大部分是因为v-if引起的表单错乱........我们的表单域样式：表单域代码：下面是基本上修好了，将v-if替换为v-show就好了大部分了： 出现问题的样式：当我选择OPRF的时候，就会出现级联关系，并且触发表单校验，这是有问题的时候样式，代码我就不贴了： 1.当使用过级联关系后的表单，点击取消之后，再次单击创建任务，表单
解决vue-element-admin项目中tinymce富文本无法使用问题
weixin_48632668的博客
06-01 2799
解决vue-element-admin项目中tinymce富文本无法使用问题
elementUI使用Tabs踩过的坑
N奈斯先生的博客
06-23 1400
elementUI，但是在使用了tabs标签后发现其他页面不能跳转了，并且会卡死。
vue+element+Ueditor部署百度富文本框的那些坑
热门推荐
danielyulu的博客
12-26 1万+
前言：这段时间在用Ueditor富文本编辑器，出现了一些坑，在网上找了很多，都没怎么解决，主要问题是将Ueditor封装成组件后，放在element-ui的el-dialog里时，内容写不进去，原因大概就是组件没有加载完成，就调用了方法，用了this.$nextTick()同样报错，后来用了感觉最笨的方法setTimeout虽然可以解决，但感觉不太好，后来重新封装了一下，大概思路就是等待组件加载完...
127.(前端)富文本的使用——vue使用超文本
m0_63953077的博客
11-03 651
vue使用超文本
富文本的爬坑之路 - - vue
weixin_43910427的博客
08-24 325
1.百度富文本编辑器 // 百度编辑器页面初始化 // 报错：Uncaught SyntaxError: Unexpected token '<'； Uncaught ReferenceError: ZeroClipboard is not defined ueditor文件要放在public静态资源文件夹下，vue2.0静态资源文件夹是static,vue3.0则是public config: { autoHeightEnabled: false, a
页面table表格展示富文本内容 vue +element
qq_40334370的博客
08-04 7200
用的element框架 需求是在table表格显示富文本内容，参考了这个文章，非常感谢，接力分享 https://blog.csdn.net/u014614038/article/details/113241907 1、安装marked，执行命令 npm install highlight.js --save npm install marked --save 2、在需要的页面引入 import marked from "marked"; import hljs from "h...
带有富文本框的form表单
最新发布
06-08
如果需要在form表单中添加富文本框，可以使用一些富文本编辑器插件，比如常用的CKEditor、TinyMCE、Quill等等。这些插件可以方便地将富文本编辑器嵌入到form表单中，实现对富文本内容的编辑和提交。 下面以CKEditor为例，介绍如何添加带有富文本框的form表单： 1. 下载CKEditor插件，解压缩到web服务器的一个目录下。 2. 在form表单中添加一个textarea标签，用于接收用户输入的富文本内容。 3. 在页面中引入CKEditor的js文件和css文件。 4. 给textarea标签添加一个id属性，并在页面加载完成后使用CKEditor.replace()函数来将其替换为富文本编辑器。 示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>带有富文本框的form表单</title> <!-- 引入ckeditor的js和css文件 --> <script src="/ckeditor/ckeditor.js"></script> <link rel="stylesheet" href="/ckeditor/skins/moono-lisa/editor.css"> </head> <body> <h3>带有富文本框的form表单</h3> <form action="submit.php" method="post"> <label for="content">内容：</label> <textarea id="content" name="content"></textarea> <br> <button type="submit">提交</button> </form> <script> // 将textarea替换为CKEditor富文本编辑器 CKEDITOR.replace('content'); </script> </body> </html> ``` 这样就可以在form表单中添加富文本框，并将编辑器中的内容提交到服务器端进行处理了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值