1.参考 https://www.npmjs.com/package/vue-wangeditor 使用该富文本编辑器

<template>
<div class="egit_box">
<p>富文本编辑器试用</p>
<div class="text_box" style="width: 100%;display: flex;justify-content: center;">
<vue-egdit ref="editor" id="editor" v-model="initContent" :menus="meaus"></vue-egdit>
</div>
<div class="btn" style="margin-top: 30px;">
<el-button type="primary" @click="setContent">设置富文本内容</el-button>
<el-button type="primary" @click="getContent">获取富文本内容</el-button>
<el-button type="primary" @click="goNextPage">跳转页面</el-button>
</div>
</div>
</template>
<script>
//参考文档 https://www.npmjs.com/package/vue-wangeditor
import vueEgdit from 'vue-wangeditor'
export default {
components: {
vueEgdit
},
data() {
return {
initContent: '初始化富文本内容',
meaus: [
'source', // 源码模式
'|',
'bold', // 粗体
'underline', // 下划线
'italic', // 斜体
'strikethrough', // 中线
'eraser', // 清空格式
'forecolor', // 文字颜色
'bgcolor', // 背景颜色
'|',
'quote', // 引用
'fontfamily', // 字体
'fontsize', // 字号
'head', // 标题
'unorderlist', // 无序列表
'orderlist', // 有序列表
'alignleft', // 左对齐
'aligncenter', // 居中
'alignright', // 右对齐
'|',
'link', // 链接
'unlink', // 取消链接
'table', // 表格
'emotion', // 表情
'|',
'img', // 图片
'video', // 视频
'insertcode', // 插入代码
'|',
'undo', // 撤销
'redo', // 重做
'fullscreen' // 全屏
]
}
},
mounted() {
console.log(this.$refs.editor, '富文本实例')
},
methods: {
setContent() {
this.initContent = '设置好的内容';
this.$refs.editor.setHtml(this.initContent) //如设置:后台返回来的固定内容
console.log(this.initContent, '设置编辑器内容')
},
getContent() {
this.initContent = this.$refs.editor.getHtml(this.initContent);
console.log(this.initContent, '获取编辑器当前内容的html代码片段')
},
//vue 跳转
goNextPage() {
this.$router.push({
name: 'testEgdit',
})
}
}
} </script>

vue+element ui项目总结点(三)富文本编辑器 vue-wangeditor的更多相关文章

  1. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  2. vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1

    1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...

  3. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  4. vue+element ui项目总结点(六)table编辑当前行、删除当前行、新增、合计操作

    具体属性方法参考官方网站:http://element-cn.eleme.io/#/zh-CN/component/installation <template> <div clas ...

  5. vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件

    <template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...

  6. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  7. 前端富文本编辑器vue + tinymce

    之前有项目需要用到富文本编辑器,在网上找了好几个后,最终选择了这个功能强大,扩展性强的tinymce tinymce中文文档地址(不全):http://tinymce.ax-z.cn/ tinymce ...

  8. vue2.0项目中使用Ueditor富文本编辑器示例

    最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 在线预览:https://suweiteng.github.io/vue2-management-platform ...

  9. 项目页面集成ckeditor富文本编辑器

    步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...

随机推荐

  1. 十、外键约束FK(foreign key)

    1.定义 a.外键涉及到的术语:外键约束.外键字段.外键值. b.外键约束.外键字段.外键值三者之间的关系? 答:给某个字段添加外键约束之后,该字段称为外键字段,外键字段中的值是外键值. c.外键根据 ...

  2. glance image-create

    glance image-create

  3. CodeForces 1110G. Tree-Tac-Toe

    题目简述:给定$n$个节点的树,其中一些节点被染成了白色(其余节点未染色).黑白双方博弈,白先动.轮到黑(白)方时,选择树上的一个未染色的节点并将其染成黑(白)色.率先达成三连色(即存在三个节点$a, ...

  4. TypeScript完全解读(26课时)_15.模块和命名空间

    新建文件夹ts-modules 并新建index.ts 在根index.ts内引入 新建a.ts文件 ts在1.5之前有两个概念一个是内部模块,一个是外部模块,因为在1.5之前es6的标准还没有提出 ...

  5. HDU - 1715 - 大菲波数 - JAVA

    http://acm.hdu.edu.cn/showproblem.php?pid=1715 import java.io.*; import java.util.*; import java.mat ...

  6. CF 429B B.Working out 四个角递推

    B. Working outtime limit per test2 secondsmemory limit per test256 megabytesinputstandard inputoutpu ...

  7. Unity中HideInInspector和SerializeField

    http://blog.sina.com.cn/s/blog_697b1b8c0102uxvn.html Unity会自动为Public变量做序列化,序列化的意思是说再次读取Unity时序列化的变量是 ...

  8. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:9. 自定义委托事件方法

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...

  9. assembly x86(nasm)串比较

    预留字符串口令,输入口令串与预留密码串比较.若匹配则显示“MATCH!CONGRATULATION”,否则显示“NOMATCH!”,并让用户重新输入,程序能对口令进行测试,但测试次数最多3次,若3次输 ...

  10. B.出题人的女装

    链接:https://ac.nowcoder.com/acm/contest/358/B 题意: 出题人早上起床就打算穿衣服,他有两箱衣服,因为懒,他在这两天只打算打开一个箱子. 两个箱子中一个有n件 ...