1.前端代码

前端HTML

<script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.js"></script>
<link href="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.css" rel="stylesheet"> <div id="app" style="margin-top: 60px;">
<el-row>
<el-col :span="16" :offset="4">
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
</el-col>
<el-col :span="4" :offset="16" style="margin-top: 20px;">
<el-button type="primary" @click="handleAdd" id="btn1">添加</el-button>
</el-col>
</el-row>
</div>

前端js

<script type="text/javascript">
new Vue({
el: '#app',
data: {
editor: null
},
mounted() {
this.init()
},
methods: {
init() {
const E = window.wangEditor;
this.editor = new E(document.getElementById('editor'));
this.editor.customConfig.uploadImgServer = '/upload_img/';
this.editor.customConfig.showLinkImg = false;
this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
this.editor.customConfig.uploadImgMaxLength = 5;
this.editor.customConfig.withCredentials = true;
this.editor.create();
},
handleAdd() {
console.log(this.editor.txt.html());
console.log(this.editor.txt.text());
axios.post(site_url + "create_blog/", {"content": this.editor.txt.html()}).then(res => {
if (res.data.result) {
this.$message.success('添加内容成功');
} else {
this.$message.error('添加内容失败');
}
}, 'json');
}
}
})
</script>

2.后端代码(python + Django)

django路由

from django.conf.urls import patterns

from home_application import host_view

urlpatterns = patterns(
'home_application.views',
(r'^$', 'home'),
(r'^api/test/$', "test"),
(r'^upload_img/$', host_view.upload_img),
(r'^media/(?P<name>\d+).(?P<postfix>\w+)', host_view.get_media),
...
)

django视图

import os
import time from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse, HttpResponse
from django.utils.encoding import escape_uri_path def check_upload_wrapper(func):
def inner(*args, **kwargs):
if not os.path.exists("media/"):
os.makedirs("media/")
return func(*args, **kwargs)
return inner def create_blog(request):
data = json.loads(request.body)
content = data.get("content")
print(content)
return JsonResponse({"result": True}) def get_media(request, name, postfix):
file_name = name + "." + postfix
file_path = os.path.join("media", file_name)
file = open(file_path, 'rb')
response = HttpResponse(file)
response['Content-Type'] = 'application/octet-stream'
response['Content-Disposition'] = "attachment;filename*=utf-8''{}".format(escape_uri_path(file_name))
return response @csrf_exempt
@check_upload_wrapper
def upload_img(request):
file_list = [] for k, v in request.FILES.items():
t = time.strftime('%Y%m%d%H%M%S')
now_file_name = t + '.' + k.split('.')[-1]
file_path = os.path.join('media', now_file_name) with open(file_path, "ab") as f:
f.write(v.read())
file_list.append("/" + file_path) return JsonResponse({"errno": 0, "data": file_list})

Vue.js中使用wangEditor富文本编辑器的更多相关文章

  1. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  2. vue项目中使用百度富文本编辑器ueditor

    第一步,安装依赖,并且把ueditor整个文件夹放入public里边 第二步,在你需要编辑的地方引入,或者main.js中全局引入 XX.vue文件中写入下面代码,创建编辑器. <vue-ued ...

  3. 更加简洁易用——wangEditor富文本编辑器新版本发布

    1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...

  4. JS编写自己的富文本编辑器

    富文本编辑器,网上有很多功能齐全种类丰富的如百度的Ueditor,简单适用型的如WangEditor等等.在经过一番挑选后,我发现都不适用现在的项目,然后决定自己造轮子玩玩.富文本编辑器中主要涉及到J ...

  5. 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例

    大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...

  6. vue2.0项目中使用Ueditor富文本编辑器示例

    最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 在线预览:https://suweiteng.github.io/vue2-management-platform ...

  7. Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap

    其中UEditor中也存在不少错误,再引用过程中. 但是UEditor相对还是比较好用的一个富文本编辑器. vue-ueditor-wrap说明 Vue + UEditor + v-model 双向绑 ...

  8. Vue系列:wangEditor富文本编辑器简单例子

    考虑到该富文本编辑器可能会在后续项目中继续使用,因此单独将其做成一个组件,把wangeditor作为组件的形式使用. 以下是参考代码 子组件部分: 父组件引用子组件: 以上就是 wangEditor ...

  9. vue中引入Tinymce富文本编辑器

    最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...

随机推荐

  1. ES6-Generator使用与改写

    用Generator封装Symbol中的iterator方法: 注意:Generator的function后必须写* config:分别有3个txt文件,两个文件写路径,一个文件写要输出的内容 前置写 ...

  2. 每日一问:讲讲 JVM 的类加载机制

    前面给大家讲解了 Java 虚拟的内存结构 以及 Java 虚拟机的垃圾回收机制,我们更加明白了 Java 的内存管理机制,今天我们来讲讲 Java 虚拟机的另外一个高频考点:类加载机制. JVM 的 ...

  3. 2019年上海市大学生网络安全大赛两道misc WriteUp

    2019年全国大学生网络安全邀请赛暨第五届上海市大学生网络安全大赛 做出了两道Misc== 签到 题干 解题过程 题干提示一直注册成功,如果注册失败也许会出现flag. 下载下来是包含010edito ...

  4. Java基础之十六 数组

    数组:可以创建并组装它们,通过使用整型索引值访问它们的元素,并且它们的尺寸不能改变. 16.1 数组为什么特殊 数组与其他种类的容器之间的区别有三方面:效率,类型和保存基本类型的能力. 数组是一种效率 ...

  5. React-native 导航插件React Navigation 4.x的使用

    React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...

  6. DDD框架基础知识

    DDD框架基础知识 参考: https://www.cnblogs.com/zhili/p/OnlineStorewithDDD.html(领域驱动设计,分层架构) https://www.cnblo ...

  7. Plsql 破解 非密钥版

    打开注册表在run下输入regedit删除1.HKEY_CURRENT_USER/Software/Allround Automations2.HKEY_CURRENT_USER/Software/M ...

  8. Spring Security 解析(四) ——短信登录开发

    Spring Security 解析(四) -- 短信登录开发   在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决定先把Spring Security ...

  9. 基于网络拓扑图通过RCMS对网络进行配置

    目录 基于网络拓扑图通过RCMS对网络进行配置 一些基本命令 对网络拓扑图1的简单配置 二层交换机S3 三层交换机 S2 实验结果 对网络拓扑图2的简单配置 NAT.ACL配置公网IP 基于网络拓扑图 ...

  10. 谨记不要在MySQL中使用“utf8”编码

    掉坑回顾: 最近在工作中遇到一个BUG,用于记录客户昵称的数据表,在插入带有表情的字符时候报错.使用的存储引擎是INNODB,当我查看数据库字段的时候确实是设置的utf8,我传入的字符也是utf8的编 ...