wangEditor官网

封装的Editor组件

<template>
<div class="editor-wrap">
<div ref="toolbar" class="toolbar"/>
<div ref="editor" class="editor-com" style="text-align:left">
<input
ref="placeHolder"
:style="{border: 'none', background: '#fff', outline: 'none', width: '100%', color: '#ccc', margin: '10px 0 4px 4px'}"
:placeholder="defaultText"
class="default-text"
type="text">
</div>
</div>
</template> <script>
import E from 'wangeditor'
export default {
name: 'Editor',
props: {
editorContent: {
type: String,
default: '',
update: true
},
// 菜单属性
menus: {
type: Array,
default: function() {
return [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
},
update: true
},
// 默认展示文字
defaultText: {
type: String,
default: ''
}
},
data() {
return {
editor: null,
// 第一次加载默认加载初始文字
startEditor: true
}
},
computed: {},
watch: {
editorContent(newval, oldVal) {
if (!this.change) {
this.editor.txt.html(newval)
}
this.change = false
}
},
mounted() {
this.editor = new E(this.$refs.toolbar, this.$refs.editor)
this.editor.customConfig.menus = this.menus
this.editor.customConfig.placeholder = this.defaultText
this.editor.customConfig.onfocus = () => {
this.$refs.placeHolder.style.display = 'none'
} this.editor.customConfig.onchange = () => {
this.change = true
const html = this.editor.txt.html()
const text = this.editor.txt.text()
const obj = {
html,
text
}
// 向上触发editor变化
this.$emit('change', obj)
}
// 创建editor
this.editor.create()
if (this.editorContent.length) {
this.$refs.placeHolder.style.display = 'none'
this.editor.txt.html(this.editorContent)
}
},
methods: {}
}
</script>

源码修改(用于取消聚焦功能)

// filename ===> wangEditor.js 

// 初始化选区,将光标定位到内容尾部
initSelection: function initSelection(newLine) {
var $textElem = this.$textElem;
var $children = $textElem.children();
if (!$children.length) {
// 如果编辑器区域无内容,添加一个空行,重新设置选区
$textElem.append($('<p><br></p>'));
this.initSelection();
return;
} var $last = $children.last(); if (newLine) {
// 新增一个空行
var html = $last.html().toLowerCase();
var nodeName = $last.getNodeName();
if (html !== '<br>' && html !== '<br\/>' || nodeName !== 'P') {
// 最后一个元素不是 <p><br></p>,添加一个空行,重新设置选区
$textElem.append($('<p><br></p>'));
this.initSelection();
return;
}
} // this.selection.createRangeByElem($last, false, true);
// this.selection.restoreSelection();
},
// wangEditor.min.js 中删除下面这行(用于打包时)
this.selection.restoreSelection()

上面注释掉这两行后会发现wangEditor第一次输入内容会出现光标总是出现在某个位置比如文本开头,这是因为我们在Editor组件中`watch`  的方法对于将父组件的处理后的值回显的问题,如下

// 这是上面那种,只有editor触发的文本改变才能回显,这样就不可以将修改过的文本回显到editor中
// 比如过滤重复后的文本
watch: {
editorContent(newval, oldVal) {
if (!this.change) {
this.editor.txt.html(newval)
}
this.change = false
}
} // 下面这种方法可以将修改过的回显不过如果需要取消自动聚焦的话,会出现一个bug,光标会出现在开头
// 这是因为文本被重新写了,但是我们注释了光标自动聚焦到末尾
// --- 可以通过组件初始化成功的时候聚焦到一个隐藏的button上
watch: {
editorContent(newval, oldVal) {
const html = this.editor.txt.html()
if (!oldVal || (html !== newval)) {
this.editor.txt.html(newval)
}
}
}

以上组件演示了在vue中使用 `wangEditor` 的时候添加 `placeholder` 的效果和如何取消wangEditor打开组件自动聚焦的情况。

在Vue项目中使用wangEditor的更多相关文章

  1. 关于在vue项目中使用wangEditor

    1,vue中安装wangEditor 使用的npm安装 npm install wangeditor --save 2,创建公用组件 在components中创建wangEnduit文件夹 组件内容为 ...

  2. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  3. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  4. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  5. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  6. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  7. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  8. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  9. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  10. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

随机推荐

  1. 如何简化跨网络安全域的文件发送流程,大幅降低IT人员工作量?

    为什么要做安全域的隔离? 随着企业数字化转型的逐步深入,企业投入了大量资源进行信息系统建设,信息化程度日益提升.在这一过程中,企业也越来越重视核心数据资产的保护,数据资产的安全防护成为企业面临的重大挑 ...

  2. vue项目使用vue-amap调用高德地图api详细步骤

    想要的效果如下 : 高德地图 && 信息窗体 步骤一: 申请高德key 高德开放平台 | 高德地图API (amap.com) (可参考博客:   [996]如何申请高德地图用户Key ...

  3. 汇总-软件-分类:SSH客户端工具

    官网-FinalShell 官网-Tabby GitHub-Tabby

  4. shardingsphere 5.0.0

    pom <dependency> <groupId>org.apache.shardingsphere</groupId> <artifactId>sh ...

  5. docker中安装db2

    1.查看可安装的db2版本 docker search db2express-c2.下载db2镜像 docker pull ibmoms/db2express-c   3.安装镜像docker run ...

  6. vue2实现tabs侧边导航栏点击内容跳转到对应位置,且内容滚动导航栏切换对应tab

    vue2实现tabs侧边导航栏点击内容跳转到对应位置,且内容滚动导航栏切换对应tab 1.tabs使用了 element的插件tabs, 省的自己写滑动动画 2.左侧有用到了 element的插件 N ...

  7. 3、k8s 核心实战

    7 kubernets核心实战 7.1 资源创建方式 命令行 yaml 7.2 namespace 名称空间来隔离资源 命令行方式 kubectl create ns hello kubectl de ...

  8. Hadoop环境的搭建

    Hadoop HDFS.Yarn.MapReduce Hadoop集群环境搭建 完全分布式环境,伪分布式将其中的多台服务器改为一台,并将配置文件中的相关内容更改即可 1.安装Linux系统模型机 关闭 ...

  9. 12组-Beta冲刺-5/5

    一.基本情况 队名:字节不跳动 组长博客:https://www.cnblogs.com/147258369k/p/15609352.html Github链接:https://github.com/ ...

  10. python 安装redis,rediscluster

    首先看下pip版本,过低版本会出问题 [root@test rpm]# pip -V pip 20.3.4 from /usr/lib/python2.7/site-packages/pip (pyt ...