vue中使用百度编辑器Ueditor

1.下载Ueditor文件

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

2.安装

vue-editor-wrap
　　npm i vue-ueditor-wrap

3. 配置下载好的Ueditor文件

1.将下载好的文件解压后放到static文件夹内

2. 找到ueditor.config.js文件并打开，

找到window.UEDITOR_HOME_UR 将它设置为：window.UEDITOR_HOME_URL = "/项目名/static/ue/";

然后找到serverUrl，删掉或者注释

3.在main.js 引用 UEditor

4.创建 UEditor VUE 组件

<template><div><script id="editor" type="text/plain"></script></div>
</template>
<script>import '../../static/UE/ueditor.config.js'import '../../static/UE/ueditor.all.min.js'import '../../static/UE/lang/zh-cn/zh-cn.js'import '../../static/UE/ueditor.parse.min.js'// UEDITOR_CONFIG.UEDITOR_HOME_URL = '../../static/UE/'export default {name: 'UE',data () {return {editor: null}},props: {defaultMsg: {type: String},config: {type: Object,toolbars: [['customstyle', 'paragraph', 'fontfamily', 'fontsize']]}},mounted() {const _this = this;this.editor = UE.getEditor('editor',{initialFrameHeight:250,//功能按钮列表toolbars:[['undo', 'redo', '|','bold', 'italic', 'underline','customstyle', 'paragraph', 'fontfamily', 'fontsize','|','print','preview']]},this.config); // 初始化UEthis.editor.addListener("ready", function () {_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。});},methods: {getUEContent() { // 获取内容方法return this.editor.getContent()},delUEContent(name){return this.editor.setContent(name,false)}},destroyed() {this.editor.destroy();}}
</script>
<style scoped lang="less">div{width:100%;}
</style>

效果图:

因为我要只需用到这几个功能按钮，如果需要其它可以去ueditor.config.js文里查看或直接百度

5.引用UEditor

<template><div>
<div style="overflow-y: auto;"><div class="edit_container" style="width:75%;height:350px;"><UE :defaultMsg=defaultMsg :config=config ref="ue" v-model="types.body"></UE></div></div></div>
</template>
<script>import UE from '../../../components/Ueditor.vue'export default {name: "productType",components: {UE},data(){return{defaultMsg: '',//设置高度config: {initialFrameWidth: null,initialFrameHeight: 300,autoHeightEnabled: true,autoFloatEnabled: true},body:'',}},methods: {add(name){//调用组件方法 获取编辑器输入的内容var UEContent = this.$refs.ue.getUEContentthis.types.body = UEContent()//清空编辑器输入的内容var delUE=this.$refs.ue.delUEContentdelUE(this.defaultMsg,false)},},mounted() {},activated(){}}
</script>

vue中使用百度编辑器Ueditor相关推荐

java web项目中使用百度编辑器UEditor
宽为限紧用功工夫到滞塞通项目上用到富文本编辑器,用的是百度的UEditor编辑器.第一次使用,一起来学学吧! 二话不说,下载先:http://ueditor.baidu.com/website ...
百度编辑器整合html,将百度编辑器(Ueditor)整合到dedecms中的方法
本文实例讲述了将百度编辑器(Ueditor)整合到dedecms中的方法,分享给大家供大家参考.具体分析如下: 现在百度编辑器感觉比dedecms自带的编辑器要强多了,这里就来给大家介绍替换dedec ...
百度编辑器整合html,怎么把百度编辑器(Ueditor)整合到dedecms中
Ueditor整合dedecms步骤 1ueditor的下载安装到ueditor官网下载最新版的编辑器源码,下载地址:ueditor我下载的是[1.2.4.0 PHP 版本] 到dedecms的目录 ...
百度html在线编辑器插件,百度编辑器UEditor插件DjangoUeditor v1.8.143
DjangoUeditor将Ueditor封装为一个Django app,提供文件/图片等上传功能,提供UEditorField.UEditorWidget等封装类,简化Ueditor在Django中 ...
php百度编辑器精简版,开源web编辑器|百度编辑器ueditor下载1.4.3.4php版下载_久友软件下载...
百度编辑器ueditor是由百度官方推出的开源web编辑器.百度编辑器ueditor能支持用户在网页上进行内容编辑,软件体积十分的轻巧,完全免费开源,加载速度极快,兼容所有主流的浏览器使用,如:Moz ...
【百度编辑器ueditor】工具，如何去掉百度编辑器 ueditor 元素路径、字数统计等...
去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中搜索并将参数elementPathEnabled设置成false即可常用功能开关如下: ,ele ...
下载百度编辑器ueditor
微信后台开发中, 一个重要的功能是让用户编辑文章发布, 由于我们下载的bootstrap后台模板, 默认的编辑器功能有限, 所以在这里, 我们使用国内一款开源的编辑器--百度编辑器功能强大, 只要你 ...
基于百度编辑器Ueditor的二次开发
基于百度编辑器Ueditor的二次开发官网下载基本配置简化后端配置,不请求后端配置项后端接口规范修改图片上传说明及修改新增按钮及弹窗(自定义附件上传) 按钮文案修改在业务开发的时候,曾 ...
百度编辑器ueditor添加视频方法
一种比较简单的方式,亲试有效在手机上需要展示图文消息,其中包含一个视频,在cms中的百度编辑器里上传不了视频,最终解决方式是,直接在文本编辑器中添加一段代码,在前台页面显示时,对该文本内容做下htm ...

vue中使用百度编辑器Ueditor

1.下载Ueditor文件

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

2.安装

vue-editor-wrap
　　npm i vue-ueditor-wrap

3. 配置下载好的Ueditor文件

4.创建 UEditor VUE 组件

5.引用UEditor

vue中使用百度编辑器Ueditor相关推荐

最新文章

热门文章

vue中使用百度编辑器Ueditor

1.下载Ueditor文件

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

2.安装

vue-editor-wrap npm i vue-ueditor-wrap

3. 配置下载好的Ueditor文件

4.创建 UEditor VUE 组件

5.引用UEditor

vue中使用百度编辑器Ueditor相关推荐

最新文章

热门文章

vue-editor-wrap
　　npm i vue-ueditor-wrap