vue2.0实现富文本编辑及文本内容展示_vue显示富文本内容-程序员宅基地

技术标签: 前端  vue.js  javascript  

1,下载富文本插件

npm install vue-quill-editor --save

2,可以直接在页面进行引入,也可以全局挂载,(只展示页面引入)

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

3,页面使用

    <!-- 富文本 -->
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />
    <!-- 公告发布按钮 -->
    <div class="releaseBtn">
      <el-button type="danger" size="medium" @click="releaseBtn"
        >发布公告</el-button
      >
    </div>

4,页面展示效果为

 5,到这一步如果页面需要把所发送的富文本内容展示到前端,可以直接让后端把传过去的内容原封不动的返回到前端(以下为演示)

演示发送,像后端发送的格式为

可以让后端把这样的数据直接返回回来

6,页面功能回显

可以直接使用v-html进行页面内容回显,此时拿到后端返回的数据

 <div v-html="this.announcementDetail"></div> 

7,现在我们可以直接显示数据啦

以上仅为本人自身理解,如有错误,请大佬指正!!!!!

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42477308/article/details/126073635

智能推荐

1.简述GPS载波相位测量的基本原理。2.在高精度GPS测量工作中,为什么需要采用载波相位测量方法进行三维定位。3.载波相位测量中,确定整周未知数主要有哪些方法?GNSS测量与数据处理(第六周作业)_载波相位测量的相位csdn-程序员宅基地

文章浏览阅读8.5k次,点赞9次,收藏34次。1.简述GPS载波相位测量的基本原理?载波相位测量的观测量是GPS接收机所接收的卫星载波信号与接收机本振参考信号的相位差。以#[(4)表示k接收机在接收机钟面时刻4%时所接收到的j卫星载波信号的相位值,φ。(t)表示ht接收机在钟面时刻i时所产生的本地参考信号的相位值,则k接收机在接收机钟面时刻t时观测j卫星所取得的相位观测量可写为中(tn) =中o(tr) - p’(5n)通常的相位或相位..._载波相位测量的相位csdn

Linux安装JDK,Nginx_ngnix安装后需要安装jdk-程序员宅基地

文章浏览阅读265次。如何在Linux下安装JDK和Nginx?Linux下安装JDK把 JDK 的安装包上传到服务器,目录如下 /user/local/java然后我们需要解压安装包解压 tar zxvf jdk-8u301-linux-x64.tar.gz解压完成后,JDK 的安装目录就出现了,复制目录路径 /usr/local/java/jdk1.8.0_301我们安装完 JDK 之后,是不是还需要配置环境变量让 JDK 生效,接下来就是配置环境变量的操作了。3.配置环境变量vim /etc/pr_ngnix安装后需要安装jdk

vijos 1221 神秘配方 题解_配方编程c++-程序员宅基地

文章浏览阅读243次。题面背景每天中午的下课铃一响,浙江镇海中学(什么?镇海中学)的同学们都会冲出学校来附近的小饭馆吃饭,刹那间天昏地暗,飞砂走石,家家餐馆内都是一片黑压压的人 。馄饨店、饺子馆,在学校附近开一家红一家。身为镇海中学信息中心首席科学顾问兼资深信息学竞赛辅导老师Dennis看到了,他为了在业余时间方便学生,他租了学校附近的一家店面,雇了几个拉面师傅,开了一家“正宗兰州牛肉拉面馆”,生意还不错。..._配方编程c++

定论——软件开发的方法-论探讨(5)-程序员宅基地

文章浏览阅读97次。 2.探寻假设  在探寻软件开发以往的方法论背后的假设之前,首先要指出的是,这些假设很难被发现,不是说它们不存在,而是这些加上很少被看成是假设,往往作为理所当然的一部分,被排除在常规的思考范围之外。让我们来看几段大家都很熟悉的文字吧。  “大多数大型软件项目都没有达到预期的目标,交付推迟,预算超支,功能不完善。许多软件项目彻底失败了。”    ——FDD  “当前,软件开发的情况并不理想。很多系统...

阿里云oss存储图片过程-程序员宅基地

文章浏览阅读1.5k次。4. 新建bucket。区域要选与你服务器一致的区域,如华东。acl权限要设置为公共读,要不然你上传的图片访问不了。1. oss存储申请成功后,拿到appID和secret。2.按官方文档,下载配置的oss.browser软件。3.输入你的appID和secret来登录账户。

(新)将DataTable转换成list (--分页--) 【Skip--Take】_datatable skip-程序员宅基地

文章浏览阅读4k次。将DataTable转换成list 及数据分页。 /// /// 酒店评论列表-分页 /// /// /// 当前页 /// public static List GetHotelCommentList(int userId, int pageIndex, out in_datatable skip

随便推点

Linux后门系列--由浅入深sk13完全分析(缩水版)-程序员宅基地

文章浏览阅读68次。创建时间:2007-09-11文章属性:原创文章提交:wzt (wzt_at_xsec.org)Linux后门系列--由浅入深sk13完全分析(缩水版)作者 wzt联系方式 [email protected]个人网站 http://tthacker.cublog.cn http://xsec.org本文首发《***防线》第八期,本文在《黑防》里有更详细更细致..._get_sct()

swarm操作命令_修改了swarm-base.yml文件,怎么重启-程序员宅基地

文章浏览阅读823次。docker config # 查看已创建配置文件 - docker config ls # 将已有配置文件添加到docker配置文件中 - docker config create docker 配置文件名 本地配置文件 docker node # 查看集群中的节点 - docker node ls # 将m..._修改了swarm-base.yml文件,怎么重启

[HAOI2011]Problem b_[haoi2011] 问题b-程序员宅基地

文章浏览阅读422次。[HAOI2011]Problem bDescription对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数。Input第一行一个整数n,接下来n行每行五个整数,分别表示a、b、c、d、k100%的数据满足:1≤n≤50000,1≤a≤b≤50000_[haoi2011] 问题b

第27天 | 28天学会PyQt5,高级控件之QListWidget_pythonlist widget用法-程序员宅基地

文章浏览阅读1.4k次。列表框架还有一个QListWidget,它是QListView的子类,与QListView不同的是,它已经建立了一个数据储存模型QListWidgetItem,直接调用addItem()函数就可以添加条目(Item),常用的事件类型有: 事件类型 描述 currentItemChanged 列表中的条目发生改变时,触发此事件; itemClicked 点击列表中的条目时,触发此事件。 _pythonlist widget用法

Longformer详解-程序员宅基地

文章浏览阅读8.4k次,点赞11次,收藏43次。IntroductionLongformer是一种可高效处理长文本的模型,出自AllenAI 2020年4月10日。目前已经开源,而且可以通过huggingface快速使用传统Transformer-based模型在处理长文本时存在一些问题,因为它们均采用"我全都要看"型的attention机制,即每一个token都要与其他所有token进行交互,无论是空间还是时间复杂度都高达O(n2)O(n^2)O(n2)。为了解决这个问题,之前有些工作是将长文本切分为若干个较短的Text Segment,然后逐个处_longformer

基于文本内容理解的中医药数据基础研究——中医药文献语料库的建设_中医基础数据模型设计方案-程序员宅基地

文章浏览阅读1k次。http://journal.shouxi.net/html/qikan/zgyx/zgzyyxxzz/20079149/zyyxxx/20100108093937831_500494.html【关键词】 中医药文献;语料库;中文信息库“中医药文献语料库系统”是汉语语料库建设中的一个分支,是在北京大学计算机语言所开发的“汉语文本切分与词性标注工具”的基础上,利用中医药专业切分词典再次加工而成,是为面向中医药文本内容理解的需要而设计研制的。其中中医药文献语料库_中医基础数据模型设计方案