array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v；报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文（变量对象，作用域链，this）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记：快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习（二）Flotr2，雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树（Expression）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例：事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 tinymce富文本编辑器整合到django - 爱码网

tinymce富文本编辑器整合到django

第一步：定义表存图片路径

models.py

  1. class AdminIMG(models.Model):
  2.     filename = models.CharField(max_length=200, blank=True, null=True)
  3.     img  = models.ImageField(upload_to = './admin')


    

  1. H:\blog>python manage.py makemigrations
    2. 

  2. Migrations for 'XYZblog':
    3. 

  3.   XYZblog\migrations\0002_auto_20170923_2018.py
    4. 

  4.     - Create model AdminIMG
    5. 

  5. H:\blog>python manage.py migrate
    6. 

  6. Operations to perform:
    7. 

  7.   Apply all migrations: XYZblog, admin, auth, contenttypes, sessions
    8. 

  8. Running migrations:
    9. 

  9.   Applying XYZblog.0002_auto_20170923_2018... OK
    10. 



 



第二步：定义视图，让图片直接显示在编辑框内



views.py




    

  1. from .models import AdminIMG
    2. 

  2. def uploadIMG(request):
    3. 

  3.     img = request.FILES.get('img')
    4. 

  4.     adminIMG = AdminIMG()
    5. 

  5.     adminIMG.filename = img.name
    6. 

  6.     adminIMG.img = img
    7. 

  7.     adminIMG.save()
    8. 

  8.     return HttpResponse(
    9. 

  9.         "<script>top.$('.mce-btn.mce-open').parent().find('.mce-textbox').val('/media/%s').closest('.mce-window').find('.mce-primary').click();</script>" % adminIMG.img)
    10. 



 



第三步：定义上传的目录




settings.py



 




    

  1. MEDIA_ROOT = os.path.join(BASE_DIR, 'static/upload/img')
    2. 



 



第四步：定义url



urls.py




    

  1. from django.views.static import serve
    2. 

  2. from blog.settings import MEDIA_ROOT
    3. 

  3. urlpatterns = [
    4. 

  4.     url(r'uploadIMG/',views.uploadIMG,name='uploadIMG'),
    5. 

  5.     url(r'^media/(?P<path>.*)$', serve, {'document_root': MEDIA_ROOT, }),
    6. 

  6.     ......
    7. 

  7. ]
    8. 



 


 



 第五步：编辑\static\js\tinymce\textareas.js






    

  1. tinymce.init({
    2. 

  2. selector: 'textarea',
    3. 

  3. theme : "modern",
    4. 

  4. plugins: ["image"],
    5. 

  5. image_advtab: true,
    6. 

  6. paste_data_images:true,
    7. 

  7. file_browser_callback: function(field_name, url, type, win) {
    8. 

  8. if(type=='image') $('#my_form input').click();
    9. 

  9. },
    10. 

  10. });
    11. 

  11. $( document ).ready(function() {
    12. 

  12. h ='<iframe >;
    13. 

  13. $('body').append(h);
    14. 

  14. function getCookie(name) {
    15. 

  15. var cookieValue = null;
    16. 

  16. if (document.cookie && document.cookie != '') {
    17. 

  17. var cookies = document.cookie.split(';');
    18. 

  18. for (var i = 0; i < cookies.length; i++) {
    19. 

  19. var cookie = jQuery.trim(cookies[i]);
    20. 

  20. // Does this cookie string begin with the name we want?
    21. 

  21. if (cookie.substring(0, name.length + 1) == (name + '=')) {
    22. 

  22. cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
    23. 

  23. break;
    24. 

  24. }
    25. 

  25. }
    26. 

  26. }
    27. 

  27. return cookieValue;
    28. 

  28. }
    29. 

  29. var csrftoken = getCookie('csrftoken');
    30. 

  30. console.log(csrftoken);
    31. 

  31. $('#my_form').append('<input type="hidden" name="csrfmiddlewaretoken" value='+csrftoken+' />');
    32. 

  32. });
    33. 



 


 



编辑器已有图片上传功能：


tinymce富文本编辑器整合到django


 


tinymce富文本编辑器整合到django


tinymce富文本编辑器整合到django


 



保存，查看数据库：


tinymce富文本编辑器整合到django


 



查看上传目录：


tinymce富文本编辑器整合到django


 



查看前台显示：


tinymce富文本编辑器整合到django


 



OK！

 
                    
            
                

                  
 
        

	 
        

            

                                            

        

        
相关文章：

        

      
            
 
                    
    
                                            

               
   
         

    


  






 
          

    
猜你喜欢 

        
    
                        

   
 



    
相关资源 

        
    
              
                            

   

   
    

     
相似解决方案 

         
    
                          

    

  
   

    

 
   

    
热门标签  

    

                    Java
                        Python
                        linux
                        javascript
                        Mysql
                        C#
                        Docker
                        算法
                        前端
                        SpringBoot
                        Redis
                        Vue
                        spring
                        设计模式
                        .net core
                        .net
                        kubernetes
                        c++
                        数据库
                        数据结构
                        大数据
                        js
                        机器学习
                        微服务
                        Android
                        Go
                        程序员
                        面试
                        JVM
                        ASP.net core
                        云原生
                        人工智能
                        后端
                        PHP
                        git
                        CSS
                        golang
                        k8s
                        Nginx
                        Django
                        mybatis
                        深度学习
                        多线程
                        React
                        架构
                        devops
                        爬虫
                        云计算
                        Spring Boot
                        LeetCode