首页 > 其他分享 >Vue2.0 使用wangEditor(富文本编辑器)

Vue2.0 使用wangEditor(富文本编辑器)

时间:2023-09-03 21:45:30浏览次数:38  
标签:文本编辑 wangEditor edit wangeditor Vue2.0 页面

 

1、安装

npm install wangeditor --save

2、页面中使用

2.1 定义容器

<div id="content"></div>

2.2 引用 wangeditor

// 引入wangeditor
import wangEditor from "wangeditor";

2.3 创建实例,调用它的方法,使页面中呈现富文本编辑

在mouted()勾子函数中操作

mounted() {
    // 创建实例
    let edit = new wangEditor("#editor");
    // 生成页面的富文本编辑器、
    edit.create();
}

标签:文本编辑,wangEditor,edit,wangeditor,Vue2.0,页面
From: https://www.cnblogs.com/Beijingqq/p/17675631.html

相关文章

  • wangEditor增加源码模式,添加查看源码功能
    wangEditor是一款轻量级的富文本编辑器。使用还比较方便,但是缺少查看源码模式,需要我们自定义一个menu给增加查看源码模式下面是wangEditor增加源码模式的代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="......
  • Vue2.0中使用bpmn-js
      使用bpmn-js在网页中绘制流程图 1.新建vue项目,输入命令安装bpmn-jsnpminstallbpmn-js--save 2.在src/main.js中引入css样式//css样式import'bpmn-js/dist/assets/diagram-js.css'import'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'import'bpmn-js/di......
  • VUE- elementUI使用quill富文本编辑器(编辑文本、上传图片)
    准备工作:安装 yarninstall vue-quill-editormain.js//编辑器importVueQuillEditorfrom'vue-quill-editor'//引入样式import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'......
  • 如何复制word的图文到wangEditor中自动上传
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@     page contentType="text/html;cha......
  • Linux常用命令_拷贝移动、打包压缩、文本编辑命令(cp、mv、tar、vim)
                ......
  • wangEditor 自定义上传图片
    //需要项目后台提供上传接口uploadFile下载接口FILE_URL:Object.defineProperties(Vue.prototype,{FILE_URL:{value:function(fileId){if(!fileId){return}return(process.env.VUE_APP_REMOTE_URL+'mi'+......
  • vue2使用富文本编辑器vue-quill-editor
    一、将图片保存为base64编码(不建议)使用步骤:1、 安装vue-quill-editornpminstallvue-quill-editor-S2、main.js中全局引入//富文本编辑器importVueQuillEditorfrom'vue-quill-editor'import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'......
  • wangEditor 复制word里面带图文的文章,图片可以直接显示
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@     page contentType="text/html;cha......
  • 华为认证欧拉openEuler-HCIA文本编辑器及文本处理
    文本编辑器及文本处理文本编辑器介绍常见的Linux文本编辑器有:emacsnanogeditkeditvivimLinux文本编辑器-emacsemacs是一款功能强大的编辑器,与其说是一款编辑器,它更像一个操作系统。emacs带有内置的网络浏览器、IRC客户端、计算器,甚至是俄罗斯方块。当然,emacs需要在图形......
  • Django博客开发教程:使用ckeditor富文本编辑器添加数据
    前一篇没用,我测试了集成ueditor之后没法上传图片,ueditor百度早就停止维护了,于是我想到了改用ckeditor,结果一遍成功富文本即具备丰富样式格式的文本。可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够在页面中编辑带html格式的文本,引入富文本编辑器。  一、安......