html 组件化编辑器,vue.js组件化使用百度富文本编辑器（一）

注意：

本文采用的编辑器为：idea

1.下载百度富文本编辑器，地址：https://ueditor.baidu.com/website/download.html#ueditor

2.加入到static文件夹下，如图：

3.在main.js中引入js。

注意：一定要修改ueditor.config.js中的路径

window.UEDITOR_HOME_URL = "./static/ueditor/"

4.编写vue组件：

export default {

name: 'UE',

data () {

return {

editor: null

}

props: {

defaultMsg: {

type: String

config: {

type: Object

}

mounted() {

const _this = this;

this.editor = UE.getEditor('editor', this.config); // 初始化UE

this.editor.addListener("ready", function () {

_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。

});

methods: {

getUEContent() { // 获取内容方法

return this.editor.getContent()

}

destroyed() {

this.editor.destroy();

}

5.编写测试使用的Vue界面：

获取内容

//采用局部引用的方式注册组件

import ueditor from '@/components/Ueditor';

export default {

name: "PublishPage",

data() {

return {

defaultMsg: '说点什么吧',

config: {

initialFrameWidth: null,

initialFrameHeight: 350

}

components: {

ueditor

methods: {

getUEContent() {

let content = this.$refs.ue.getUEContent();

this.$notify({

title: '获取成功，可在控制台查看！',

message: content,

type: 'success'

});

console.log(content)

}

6.编写路由

7.运行项目

npm run dev

8.效果展示

注：

1.编写的文本和媒体文件发送到服务端请看下一篇介绍。

2.这是笔者学习记录的过程，如果有错误，敬请指正，不喜勿喷，谢谢。

html 组件化编辑器,vue.js组件化使用百度富文本编辑器（一）相关推荐

百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
tiptap - 基于 vue 的优雅流畅的开源富文本编辑器
一款专为 vue.js 打造,设计优雅,体验流畅舒服的现代富文本编辑器. 关于 Tiptap Tiptap 是一款专为 vue 打造的简洁明快的富文本编辑器,通过简单的设置能为用户提供多种优秀的文字编 ...
vue使用百度富文本编辑器（ueditor）
文章目录 vue使用百度富文本编辑器(ueditor) 1.进入官网或者github下载源码 2.使用grunt编译 4.安装`vue-ueditor-wrap` 5.组件中引入,自定义组件 6.后端 ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
百度富文本编辑jsp上传_百度富文本编辑器教程，从入门到放弃
原标题:百度富文本编辑器教程,从入门到放弃百度UEditor 资源与项目分离-完全教程夏老师人真好又求到一篇技术贴来来来继续掏出小本本什么是百度UEditor? 百度UEditor是一款富 ...
UEditor 百度富文本编辑器 .Net实例
转自 http://download.csdn.net/download/hdsslxl/6740605 1.UEditor 百度富文本编辑器完整版 .Net实例已解决上传图片问题. 2.内附完整d ...
百度富文本编辑器ueditor在https协议下无法正常插入动态地图
在浏览器https协议下,百度富文本编辑器ueditor有可能会无法正常插入动态地图.所谓"动态地图",就是在插入地图的时候,勾选右上角的"动态地图"选择框: ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
百度富文本编辑器（ueditor）的使用
项目中遇上了百度富文本编辑器的使用,官网上给出的文档不够详尽,这里将本人开发项目时遇上的需求配置和问题记录下来. 注:刚开始记录遇到的问题,总结不够多,只能持续更新,作为自己的一个代码经验总结.能做到 ...

html 组件化编辑器,vue.js组件化使用百度富文本编辑器（一）

html 组件化编辑器,vue.js组件化使用百度富文本编辑器（一）相关推荐

最新文章

热门文章

html 组件化 编辑器,vue.js组件化使用百度富文本编辑器（一）

html 组件化 编辑器,vue.js组件化使用百度富文本编辑器（一）相关推荐

最新文章

热门文章

html 组件化编辑器,vue.js组件化使用百度富文本编辑器（一）

html 组件化编辑器,vue.js组件化使用百度富文本编辑器（一）相关推荐