vue中富文本编辑框
.npm install vue-quill-editor --save
.npm install quill --save
.封装成子组件
<template>
<quill-editor v-model="currentValue" ref="myQuillEditor" :options="editorOption" class="n-editor"></quill-editor>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.core.css";
export default {
name: "n-editor",
components: {
quillEditor
},
props: {
value: {
type: String
},
editorOption: {
type: Object,
default: function() {
return {};
}
}
},
data() {
return {
currentValue: this.value
};
},
watch: {
value(v) {
this.currentValue = v;
},
currentValue(v) {
this.$emit("input", v);
}
}
};
</script>
<style>
.n-editor .ql-editor {
height: auto;
min-height: 320px;
}
</style>
<template>
<div>
<span>{{content}}</span> <editor v-model="content"></editor>
<button @click="content='abc'">reset to abc</button>
</div>
</template>
<script>
import editor from './Editor.vue'
export default {
components:{
editor
},
data() {
return {
content: ""
};
}
};
</script>
vue中富文本编辑框的更多相关文章
- Qt Style Sheet实践(四):行文本编辑框QLineEdit及自动补全
导读 行文本输入框在用于界面的文本输入,在WEB登录表单中应用广泛.一般行文本编辑框可定制性较高,既可以当作密码输入框,又可以作为文本过滤器.QLineEdit本身使用方法也很简单,无需过多的设置就能 ...
- TTabControl、TMemo组件(制作一个简单的多文本编辑框)
TTabControl包含一列字符串标签的tabs 每个标签控制一个对象 首先创建一个TForm;接下来添加TTabControl组件和一个文件对话框TOpenDialog(用于添加文件),然后在TT ...
- JS的文本编辑框jwysiwyg-0.6
一款轻量的用js写的文本编辑框.
- UEditor富文本编辑框学习
1.首先需要引入CSS.JS <!--富文本编辑框--> <link href="${pageContext.request.contextPath}/css/plugin ...
- 文本框、文本编辑框、按钮——axure线框图部件库介绍
1. 与文本面板组合设计表单 文本框主要是在设计页面表单的时候,用的最多,通过与文本面板的组合使用,下面我们通过文本面板和文本框设计了一个简单的注册表单 对于,文本框中的文字,只需要双击即可编辑文字 ...
- MFC常见问题以及解决方法(1)_MFC下文本编辑框按下回车后窗口退出
这里主要介绍遇到这种方法的解决方案,解决方法可能有多种,但这里只给出有效的一种,这里不会详细说明出现问题的原因以及为什么这样解决,想了解更多可以百度,写这个主要是防止以后忘记,做个简单的笔记. 问题: ...
- 03 EditText文本编辑框
二 EditText 文本编辑框 父类: TextView >概念:文本编辑框 可以进行文本编辑 android:textColor="#00f&qu ...
- win32: 文本编辑框(Edit)控件响应事件
过去几年,关于文本编辑框(Edit)控件的响应事件,我都是在主程序 while(GetMessage(&messages, NULL, 0, 0)) { ... } 捕获. 总感觉这种方式让人 ...
- 使用Flask-CKEditor集成富文本编辑框
使用Flask-CKEditor集成富文本编辑框 富文本编辑器即所见即所得编辑器,类似于文本编辑软件.它提供一系列按钮和下拉列表来为文本设置格式,编辑状态的文本样式即最终呈现出来的样式.在Web程序中 ...
随机推荐
- ASP.NET CORE下运行CMD命令
ASP.NET CORE下运行CMD命令,用以前的ASP.NET 的命令System.Diagnostics.Process.Start("notepad");这样是可以运行出记事 ...
- 获取CPU序列号的Delphi程序
Unit CPUid; Interface Type TCpuType = (cpu8086, cpu286, cpu386, cpu486, cpuPentium); Function CpuTyp ...
- ListView中的item中的Onclick事件的优化
ListView的Adapter的优化布局载入器的载入次数最典型的使用方法是使用convertView进行优化,让convertView当做布局载入器的载体,也就是.重用 convertView 用以 ...
- 【iCore4 双核心板_ARM】例程二十四:LWIP_DHCP实验——动态分配IP地址
实验现象: 核心代码: int main(void) { system_clock.initialize(); led.initialize(); adc.initialize(); delay.in ...
- Hlacon 之Image ,Region,XLD
一 读取的3种方式: read_image( image,'filename') //image 是输出对象,后面是输入文件的路径和名称 读取多图: 1,申明一个数组,分别保存路径 ImagePath ...
- myeclipse中的项目 如何在项目视窗中显示setting,classpath等配置文件
导入了别人的项目,各种jar包都放好后,path也都build好了,项目也能正常启动,但是就是项目名有红叉,这是为什么呢? 网上有人说Java build path中的jar包missing了,这是一 ...
- 简单的 FastDFS + Nginx 应用实例
版权声明:本文为GitChat作者的原创文章,未经 GitChat 同意不得转载. https://blog.csdn.net/GitChat/article/details/79479148 wx_ ...
- 【2019年03月29日】股票的滚动市盈率PE最低排名
仅根据最新的市盈率计算公式进行排名,无法对未来的业绩做出预测. 深康佳A(SZ000016) - 滚动市盈率PE:2.51 - 滚动市净率PB:1.68 - 滚动年化股息收益率:2.9% - - - ...
- Github恶搞之自定义你的contribution图表
在正式写程序之前让我先来看看效果: 对了,这个程序的效果就是生成一个具有你想要的“contributions in the last year”图表的html页面. 当然,html文件,而不是你在Gi ...
- 微信小程序-bug-调用wx.login()无响应的原因和解决方案
想必,最近有些小程序开发者,在调用wx.login()的时候,在部分IOS上无响应的情况: 补充一点:在测试模式,调试模式,都是OK的,一上正式环境就GG了,百思不得其解啊! 响应结果如下: 在suc ...