热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue常用的文本编辑器vueueditorwrap使用总结

原文出处链接:https:blog.csdn.netqq_40180411articledetails100149621一、安装依赖:首先在前端项目Terminal中执行以下命令:

原文出处链接:https://blog.csdn.net/qq_40180411/article/details/100149621

一、安装依赖:

首先在前端项目Terminal中执行以下命令:

如果你没安装yarn就用npm(第一条命令),安装过yarn就用(第二条命令):简单测试安装yarn与否,可以在Terminal输入yarn命令,如果提示yarn不是内部命令就是说明你还未成功安装yarn,这时你可以选择用npm命令安装,如果npm也不是内部命令,那就说明你node.js可能也没装。

npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap
二、下载ueditor并将其复制到Static目录下 如图所示:

 

下载地址:链接:https://pan.baidu.com/s/1EkENeonqdV0nihswQkrwDA 
提取码:5k52 
(当然你也可以直接去网上下载)

三、引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module


导入后是灰色的,你需要注册一下这个组件,注册组件:

components: {
VueUeditorWrap
}
// 或者在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

 

注册完,import VueUeditorWrap from 'vue-ueditor-wrap' 变成彩色字体,证明引入组件成功

四、实例化、v-model绑定数据

实例化:

 

v-model绑定文本编辑器内输入内容,可以用来与后台传数据。

:config绑定编辑器配置内容,可以对编辑器样式进行个性化设置:

data () {
return {
ueConfig:{
toolbars: [
[
'undo', //撤销
'bold', //加粗
'indent', //首行缩进
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'fontfamily', //字体
'fontsize', //字号
'justifyleft', //居左对齐
'justifycenter', //居中对齐
'justifyright', //居右对齐
'justifyjustify', //两端对齐
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'lineheight',//行间距
]
],
'fontfamily':[
{ label:
'',name:'songti',val:'宋体,SimSun'},
{ label:
'仿宋',name:'fangsong',val:'仿宋,FangSong'},
{ label:
'仿宋_GB2312',name:'fangsong',val:'仿宋_GB2312,FangSong'},
{ label:
'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},
{ label:
'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},
{ label:
'',name:'heiti',val:'黑体, SimHei'},
{ label:
'',name:'lishu',val:'隶书, SimLi'},
{ label:
'',name:'andaleMono',val:'andale mono'},
{ label:
'',name:'arial',val:'arial, helvetica,sans-serif'},
{ label:
'',name:'arialBlack',val:'arial black,avant garde'},
{ label:
'',name:'comicSansMs',val:'comic sans ms'},
{ label:
'',name:'impact',val:'impact,chicago'},
{ label:
'',name:'timesNewRoman',val:'times new roman'}
],
// 初始容器高度
initialFrameHeight: 300,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口
enableAutoSave: false,
elementPathEnable:
false,
wordCount:
false,
},
}
}

 

 

版权声明:本文为CSDN博主「一生所Ai」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_40180411/article/details/100149621



推荐阅读
  • Python处理Word文档的高效技巧
    本文详细介绍了如何使用Python处理Word文档,涵盖从基础操作到高级功能的各种技巧。我们将探讨如何生成文档、定义样式、提取表格数据以及处理超链接和图片等内容。 ... [详细]
  • 编写了几个500行左右代码的程序,但基本上解决问题还是面向过程的思维,如何从问题中抽象出类,形成类的划分和设计,从而用面向对象的思维解决问题?有这方面的入门好书吗?最好是结合几个具体的案例分析的 ... [详细]
  • HTML基础入门指南
    本文将深入浅出地介绍HTML的基础知识,包括其定义、开发工具、制定机构、特性、基本标签及更多实用内容。 ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 本文介绍了一个基于 Java SpringMVC 和 SSM 框架的综合系统,涵盖了操作日志记录、文件管理、头像编辑、权限控制、以及多种技术集成如 Shiro、Redis 等,旨在提供一个高效且功能丰富的开发平台。 ... [详细]
  • 本文介绍如何在 Visual Studio Code 中使用 Jupyter Notebook 插件,包括创建、编辑和运行笔记本的基本操作。 ... [详细]
  • 本文将带您了解Cocos家族的不同版本和分支,特别是Cocos Creator的发展历程及其核心特性,帮助初学者快速入门。 ... [详细]
  • 如何从python读取sql[mysql基础教程]
    从python读取sql的方法:1、利用python内置的open函数读入sql文件;2、利用第三方库pymysql中的connect函数连接mysql服务器;3、利用第三方库pa ... [详细]
  • 全能终端工具推荐:高效、免费、易用
    介绍一款备受好评的全能型终端工具——MobaXterm,它不仅功能强大,而且完全免费,适合各类用户使用。 ... [详细]
  • Java EE CDI:解决依赖关系冲突的实例
    在本教程中,我们将探讨如何在Java EE的CDI(上下文和依赖注入)框架中有效解决依赖关系的冲突问题。通过学习如何使用限定符,您将能够为应用程序的不同客户端提供多种接口实现,并确保每个客户端都能正确调用其所需的实现。 ... [详细]
  • 在Win10上利用VS2015构建Caffe2环境
    本文详细介绍如何在Windows 10操作系统上通过Visual Studio 2015编译Caffe2深度学习框架的过程。包括必要的软件安装、环境配置以及常见问题的解决方法。 ... [详细]
  • 本文由「Vue虚拟实验室」的成员effort撰写,深入探讨了Vue CLI 3.0创建项目后的配置细节,特别是如何通过配置代理解决开发环境中的跨域问题。 ... [详细]
  • Vue项目中应用骨架屏实践
    在当前开发的项目中,由于登录过程涉及多次重定向,导致用户体验不佳。为了改善这一状况,本文介绍了如何使用vue-skeleton-webpack-plugin插件在Vue项目中实现骨架屏,以减少用户感受到的白屏时间。 ... [详细]
  • 解决Vue项目离线创建问题
    当使用vue-cli工具通过命令`vue init webpack demo`创建Vue项目时,可能会遇到连接超时错误,这通常是因为网络问题导致无法访问远程服务器。本文将介绍如何通过离线方式成功创建Vue项目。 ... [详细]
  • 本文详细记录了 Docker 的初学体验,从基础安装到运行第一个容器,帮助新手快速掌握 Docker 的核心概念和操作。 ... [详细]
author-avatar
林韵杰64833
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有