1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图)

https://ueditor.baidu.com/website/download.html

2.将下载好的文件解压,存放在项目位置下:

  >1.如果是在vue脚手架中集成百度富文本框,则将解压后选取部分文件新建文件夹UE,放在其下面,之后放在与index.html平行下的地方如图所示:

  

>2.如果是在vue-element-admin或者iview-admin中集成百度富文本框,则将解压后选取部分文件新建文件夹UE,放在其下面,之后放在与index.html平行下的地方,需要新建文件夹static 如图所示:

注意的点:有人会问为什么,不放在src的下面,非要和index.html平级?

     值得说的是你不知道,后面操作上传图片等上传按钮的时候,加载的是UE下html文件,vue框架只有一个index.html模板,其他都是路由加载模块,放在src的下面代码经          过压缩后,上传后再次嵌入整个框架,也就是index.html模板。所以放在与index.html平级下,点击富文本上传等功能时候,就会单个加载UE下html文件,也不会报已下       错误:

codemirror.js:1 Uncaught SyntaxError: Unexpected token <
ZeroClipboard.js:1 Uncaught SyntaxError: Unexpected token <
ueditor.all.min.js:11 Uncaught ReferenceError: ZeroClipboard is not defined
at a (ueditor.all.min.js:11)
at ueditor.all.min.js:11
at HTMLScriptElement.i.onload.i.onreadystatechange (ueditor.all.min.js:7)

3.修改UE下ueditor.config.js中的路径

4.在项目main.js中引入UE下的js

import '../public/static/UE/ueditor.config.js'
import '../public/static/UE/ueditor.all.min.js'
import '../public/static/UE/lang/zh-cn/zh-cn.js'
import '../public/static/UE/ueditor.parse.js'
可引入,也可不引入
import '../public/static/UE/themes/default/css/ueditor.css'
样式必须引入
 
5.编写百度百度富文本vue的组件,位置任一放
 

  

<template>
<div>
<script :id="id" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: "UE",
data() {
return {
editor: null
};
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
},
id: {
type: String
}
},
mounted() {
const _this = this;
this.editor = window.UE.getEditor(this.id, this.config); // 初始化UE
this.editor.addListener("ready", function() {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
});
console.log("上传这堆错误不用理会,上传接口需自行开发配置");
},
methods: {
getUEContent() {
// 获取内容方法
return this.editor.getContent();
},
getUEContentTxt() {
// 获取纯文本内容方法
return this.editor.getContentTxt();
}
},
destroyed() {
this.editor.destroy();
}
};
</script>

6.在模块中使用,刚封装好的百度富文本编辑器.vue组件,引入路径看你存放组件的位置,注册后使用

<template>
<div class="components-container">
<div class="info">
UE编辑器示例
<br />需要使用编辑器时,调用UE公共组件即可。可设置填充内容defaultMsg,配置信息config(宽度和高度等),可调用组件中获取内容的方法。支持页面内多次调用。
</div>
<button @click="getUEContent()">获取内容</button>
<button @click="getUEContentTxt()">获取无文本内容</button>
<div class="editor-container">
<UE :defaultMsg="defaultMsg" :config="config" :id="ue1" ref="ue"></UE>
<UE :defaultMsg="defaultMsg" :config="config" :id="ue2" ref="ue2"></UE>
</div>
</div>
</template>
<style>
.info {
border-radius: 10px;
line-height: 20px;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
</style>
<script>
import UE from "../../components/ueditor.vue";
export default {
components: { UE },
data() {
return {
defaultMsg:
'<span style="orphans: 2; widows: 2; font-size: 22px; font-family: KaiTi_GB2312; "><strong>夏钧姗:成功的投资需具备哪些心态和掌握哪些重要止损位</strong></span>',
config: {
initialFrameWidth: null,
initialFrameHeight: 350
},
ue1: "ue1", // 不同编辑器必须不同的id
ue2: "ue2"
};
},
methods: {
getUEContent() {
let content = this.$refs.ue.getUEContent(); // 调用子组件方法
this.$notify({
title: "获取成功,可在控制台查看!",
message: content,
type: "success"
});
console.log(content);
},
getUEContentTxt() {
let content = this.$refs.ue.getUEContentTxt(); // 调用子组件方法
this.$notify({
title: "获取成功,可在控制台查看!",
message: content,
type: "success"
});
console.log(content);
}
}
};
</script>
7.运行项目效果如图:

8.会出现这样的报错,是由于后端无配置接口请求,后续完善

觉得不错就关注点赞,欢迎评论不足之处,后期上传GitHub案例

 

vue集成百度富文本编辑器的更多相关文章

  1. vue 集成百度富文本编辑器

    <template> <div> <textarea style="display:none" id="editor_content&quo ...

  2. Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)

     tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...

  3. Django集成百度富文本编辑器uEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包, ...

  4. JAVA 集成 Ueditor 百度富文本编辑器

    开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...

  5. ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

    本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: @ ...

  6. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  7. 对于MVC中应用百度富文本编辑器问题的解决办法

    1.对于应用富文本编辑器post提交表单内容提示有危险的解决办法: [ValidateInput(false)] //文本编辑器的表单提交不用提示危险 [HttpPost] public Action ...

  8. 在MVC中应用百度富文本编辑器

    1.下载.NET版本的百度富文本编辑器,前往 下载.NET版本百度富文本框 2.解压下载的.zip压缩包,将utf8-.net文件夹名称改为:ueditor,复制到MVC根目录下面.结构如下: App ...

  9. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

随机推荐

  1. LeapMotion Demo2

    原文:LeapMotion Demo2    官方doc有四个手势,最近尝试实现对握拳的识别,并能在我的程序界面上体现出来.    调试过程较为繁琐,幸好最终效果还差强人意! 首先看看我的效果图:   ...

  2. js错误界面

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. ApplicationCommands用于表示应用程序程序员经常遇到的常见命令,类似于ctrl+c

    在WPF中,许多控件都自动集成了固有的命令集.比如文本框TextBox就提供了复制(Copy),粘贴(Paste),裁切(Cut),撤消(Undo)和重做(Redo)命令等. WPF提供常用应用程序所 ...

  4. jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单

    jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...

  5. 3D-Touch Home Screen Quick Actions 使用

    1. 3D-Touch简单介绍 3D-Touch是iPhone 6s推出的一种可以让你与手机进行互动的全新方式.这一次,iPhone 能够感应你按压屏幕的力度.除了轻点.轻扫.双指开合这些熟悉的 Mu ...

  6. Medical Image Report论文合辑

    Learning to Read Chest X-Rays:Recurrent Neural Cascade Model for Automated Image Annotation (CVPR 20 ...

  7. Delphi XE5 Android Dialogs 对话框(模拟做了一套)

    最近要在Android中使用对话框, 但发现无现成的, TOpenDialog等已经不支持移动设备,还好系统提供了一些文件目录函数可用,于是简单的模拟了一个,支持OpenDialog ,SaveDia ...

  8. Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化

    原文:Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化  [函数名称]   P分位法图像二值化 [算法说明]   所谓P分位法图像分割,就是在知道图像中目标所占的比率Rat ...

  9. 调用其它UI文件

    调用其它UI文件 首先 要头文件包含  #include “dialog_biaozhun.h"Dialog_biaozhun *dialog = new Dialog_biaozhun() ...

  10. asp.net core2.0中网站发布的时候,视图文件不被打包成dll

    项目csproj文件里面加 <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <Target ...