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. Ubuntu无法访问Windows磁盘, 且无提示信息

    现象描述, 双系统Ubuntu和Windows, 进入Ubuntu后无法访问Windows盘内容, 且图标闪烁无任何错误信息提示. 1.安装ntfsfix sudo apt-get install n ...

  2. 如何正确遍历删除List中的元素,你会吗?

    遍历删除List中的元素有很多种方法,当运用不当的时候就会产生问题.下面主要看看以下几种遍历删除List中元素的形式: 1.通过增强的for循环删除符合条件的多个元素 2.通过增强的for循环删除符合 ...

  3. monkeyRunner

    MonkeyRunner工具是使用Jython(使用Java编程语言实现的Python)写出来的,它提供了多个API,通过monkeyrunner API 可以写一个Python的程序来模拟操作控制A ...

  4. 【eclipse插件开发实战】 Eclipse插件开发5——时间插件Timer开发实例详解

    Eclipse插件开发5--时间插件Timer开发实例详解 这里做的TimeHelper插件设定为在菜单栏.工具栏提供快捷方式,需要在相应地方设置扩展点,最后弹出窗体显示时间. 在上一篇文章里创建好了 ...

  5. 13.详解oauth2授权码流程

    13.详解oauth2授权码流程 把登陆系统单独独立出来,可以给自己写的微服务用,也可以给第三方的系统调用我们的服务 显式的和隐式的,两种方式,

  6. Laravel框架之Session操作

    //设置session里的值 public function session1(Request $request){ //1.HTTP request session(); /*$request-&g ...

  7. python 三元表达式 列表推导式,生成器表达式。递归,匿名函数, 内置函数

    三元表达式 三元表达式仅应用于: 1.条件成立返回一个值 2.条件不成立返回一个值 res = x if x>y else y print(res) name= input("姓名&g ...

  8. myeclipse同时部署两个项目-permgen space

    黑色头发:http://heisetoufa.iteye.com/ 使用myeclipse启动两个SSH2的部署在tomcat6下的项目报出java.lang.OutOfMemoryError: Pe ...

  9. C# in查询

    一.前言 在做项目中,我们会经常使用到 in 查询语句.那么如果我们用 EF 和 Linq 怎么写?接下来看代码 二.实例 我使用的是区域查询的例子,基本的 sql 语句如下: SELECT * FR ...

  10. TP5之上传多张图片

    1.效果图(每点击一次‘添加选项’,就会有一个新的 file 框来添加新的图片) 2.view <!--不要忘了引入jquery文件--> <!-- post传值方式和文件传输协议一 ...