精华内容
下载资源
问答
  • tinymce使用
    千次阅读
    2022-05-08 16:32:29

    1.快速集成

    快速集成部分参考tiny中文文档 http://tinymce.ax-z.cn/

    第1步:下载TinyMCE
    TinyMCE支持多种使用方式,但是本人还是建议使用最传统的方式,把相关资源下载到本地,放置到项目中。最新版的下载地址https://www.tiny.cloud/get-tiny/ 这里下载的是默认配置版,就是插件、主题、皮肤都是官方默认指定的。

    第2步:引入TinyMCE脚本

    <script src="你的网站路径/tinymce/tinymce.min.js"></script>
    

    第3步:将TinyMCE初始化为页面的一部分

    <!DOCTYPE html>
    <html>
    <head>
      <script src='tinymce.min.js'></script>
      <script>
      tinymce.init({
        selector: '#mytextarea'
      });
      </script>
    </head>
    
    <body>
    <h1>TinyMCE快速开始示例</h1>
      <form method="post">
        <textarea id="mytextarea">Hello, World!</textarea>
      </form>
    </body>
    </html>
    

    第4步:通过正常表单POST保存内容
    当form提交时,TinyMCE会将内容塞进textarea,你可以通过正常的post方法获取到编辑器中的内容,行为与普通textarea完全一致。

    2.常见问题处理

    问题处理代码截取自sitesCMS源码,完整代码可查阅sitesCMS源码 https://gitee.com/xhhxb/sitesCMS

    2.1.汉化

    问题现象
    TinyMCE默认是英文的
    解决方案
    官方提供了语言包,从这个地址下载对应的汉化语言包 https://www.tiny.cloud/get-tiny/language-packages/
    配置语言

    language: 'zh-Hans',//汉化语言包
    

    2.2.字体选项没有中文

    问题现象
    即便使用了汉化包,但是在选择字体的下拉菜单中还是没有中文,这个仍然是配置的问题。
    解决方案

    font_family_formats: "微软雅黑=\'微软雅黑\';宋体=\'宋体\';黑体=\'黑体\';仿宋=\'仿宋\';楷体=\'楷体\';隶书=\'隶书\';幼圆=\'幼圆\';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Courier New=courier new,courier;Georgia=georgia,palatino;Webdings=webdings;Wingdings=wingdings",//字体选项
    

    2.3.页面刷新不显示

    问题原因
    sitesCMS中是通过pjax进行页面局部刷新,刷新时会导致tinymce的init方法得不到执行,导致编辑器不能正常显示。
    解决方案

    //先手动销毁,避免刷新页面不能正常创建
    tinymce.remove('#editor');
    //下面再创建
    tinymce.init({... ...});
    

    2.4.表单提交没有值

    问题原因
    提交表单时没有及时将编辑器的内容填充到textarea中
    解决方案

    //ajax提交表单自动同步textarea的问题
    editor.on('change',function(){ editor.save(); });
    

    2.5.全屏被遮挡问题

    问题原因
    sitesCMS后台使用的是layui框架,tinymce全屏时头部和菜单部分会被遮挡,原因是这两部分的z-index比较大,位于最上层,导致遮挡下面的内容。
    解决方案

    //监听全屏插件的全屏事件,手动处理全屏被遮挡文档
    editor.on('FullscreenStateChanged', function(data){
       if(data.state){
          console.log('全屏');
          $(".layui-header").css("z-index","0");
          $(".layui-side").css("z-index","0");
       } else {
          console.log('取消全屏');
          $(".layui-header").removeAttr("style");
          $(".layui-side").removeAttr("style");
       }
    });
    

    2.6.内容被过滤

    问题原因
    sitesCMS中使用了Jsoup对表单内容进行过滤,如果配置中没有把需要保存的标签放置白名单中会导致部分内容或样式被过滤而不能保存。
    解决方案

    /**
     * 放开需要保存的标签
     */
    .addAttributes("video", "src", "controls", "width", "height", "poster", "preload", "muted", "loop", "autoplay")
    .addAttributes("source", "src", "type")
    

    2.7.使用表情保存

    问题原因
    表情字符是4个字节,而mysql中的utf-8最大支持3个字节的存储,而如果想要存储4个字节的字符就会报错,不只是emoji表情,复杂一些的文字也会出现这种情况。
    解决方案
    调整对应表字段的编码为utf8bm4即可

    2.8.图片和视频上传

    图片和视频上传都需要启用对应的插件,并提供对应的配置和编码处理,这个代码和逻辑稍微复杂一点,详细处理方案参考sitesCMS源码https://gitee.com/xhhxb/sitesCMS

    images_upload_url: '/file/uploadImg4TinyMCE',//图片上传地址
    file_picker_types: 'media',//只在视频上传时提供上传按钮
    file_picker_callback: function(callback, value, meta) {
        //在视频上传弹窗提供一个文件上传按钮
        if (meta.filetype == 'media') {
            //callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
            let filetype = '.mp4';
            let url = '/file/uploadVideo4TinyMCE';
            //模拟出一个input用于添加本地文件
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', filetype);
            input.click();
    
            input.onchange = function () {
                let file = this.files[0];
                let xhr, formData;
                console.log(file.name);
                xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', url);
                xhr.onload = function () {
                    let json;
                    if (xhr.status != 200) {
                        layer.msg("文件上传异常,请检查文件格式和大小");
                        return;
                    }
                    json = JSON.parse(xhr.responseText);
                    if (!json || typeof json.location != 'string') {
                        layer.msg(json.msg);
                        return;
                    }
                    callback(json.location);
                };
                formData = new FormData();
                formData.append('file', file, file.name);
                xhr.send(formData);
            }
        }
    }
    
    更多相关内容
  • tinymce使用

    2021-02-02 16:36:04
    tinymce5.6.2使用下载tinymce引入tinymce初始化tinymce预览界面 下载tinymce 请戳这里下载最新版免费版tinymce 注: tinymce有版权,我我是用的是官方社区版及开发版 引入tinymce 将下载好的tinymce社区开发板解压...

    下载tinymce

    请戳这里下载最新版免费版tinymce

    注: tinymce有版权,我是用的是官方社区版及开发版

    引入tinymce

    将下载好的tinymce社区开发板解压后放入我们的项目静态文件里面,在项目中引入tinymce即可,如下图:

    在这里插入图片描述
    在这里插入图片描述

    <script src="/static/tinymce/tinymce.min.js"></script>
    

    初始化tinymce

    1.在html中加入


    2.新建js文件
    3.在js文件里面导入下面代码

    tinymce.init({
       selector: '#tinymcetest', //容器,可使用css选择器
       placeholder: '在这里输入文字',
       language: 'zh_CN', //调用放在langs文件夹内的语言包
       toolbar: true, //工具栏
       menubar: true, //菜单栏
       branding: false, //右下角技术支持
       inline: false, //开启内联模式
       elementpath: false,
       min_height: '50vh', //最小高度
       height: '50vh',  //高度
       skin: 'oxide',
       toolbar_sticky: true,
       visualchars_default_state: true, //显示不可见字符
       image_caption: true,
       paste_data_images: true,
       relative_urls: false,
       // remove_script_host : true,
       plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs',
       toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat |table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
    
       images_upload_url: '/massages/img', /*后图片上传接口*/ /*返回值为json类型 {'location':'uploads/jpg'}*/
       setup: function (editor) {
           editor.on('change', function () {
               editor.save();
           });
       }
    
    });
    

    预览界面

    在这里插入图片描述

    展开全文
  • tinyMce是一款功能强大的基于js的富文本编辑器,这款编辑器的功能几乎可以跟微软的office有的一比,毫不逊色。编辑器里面的各项编辑工具都可以定制,大部分高级功能都是以插件的形式添加进来,开发使用者可以根据...
  • vue中富文本tinymce使用

    2022-05-30 11:28:41
    vue中富文本tinymce使用 tinymce是国外的一款富文本编辑器,开源可商用,免费免费免费!!!插件丰富、可扩展性强、界面好看、提供经典、内联、沉浸无干扰三种模式、对标准支持优秀(自v5开始)、多语言支持都是对他...

    vue中富文本tinymce使用

    tinymce是国外的一款富文本编辑器,开源可商用,免费免费免费!!!插件丰富、可扩展性强、界面好看、提供经典、内联、沉浸无干扰三种模式、对标准支持优秀(自v5开始)、多语言支持都是对他的描述!

    使用

    • 下载
    npm i tinymce@5.10.3 @tinymce/tinymce-vue@3.2.8 -S
    
    • 下载好了后在node_modules里会看到如下结构
    • 在这里插入图片描述
    • 在vue项目中新建tinymce文件夹(一般放在static或者public文件夹中)
    • 然后复制下面这几个文件放到上面新建的文件夹中
    • 在这里插入图片描述
      然后再项目src文件夹中的components文件夹中新建editor.vue
    <template>
      <div class="">
        <!-- 富文本编辑器 -->
        <Editor
          id="tinymce"
          v-model="articleContent"
          :init="editorInit"
          :key="tinymceFlag"
        ></Editor>
      </div>
    </template>
    <script>
    // 引入Tinymce编辑器
    import tinymce from "tinymce/tinymce";
    import Editor from "@tinymce/tinymce-vue";
    //引入工具栏图标和主题
    import "tinymce/icons/default/icons";
    import "tinymce/themes/silver";
    // 引入富文本编辑器主题的js和css,不然显示出错
    import "tinymce/themes/silver/theme.min";
    import "tinymce/skins/ui/oxide/skin.min.css";
    // 扩展插件 - 根据需要引入
    import "tinymce/plugins/image";
    import "tinymce/plugins/link";
    import "tinymce/plugins/code";
    import "tinymce/plugins/table";
    import "tinymce/plugins/lists";
    import "tinymce/plugins/wordcount"; // 字数统计插件
    import "tinymce/plugins/media"; // 插入视频插件
    import "tinymce/plugins/template"; // 模板插件
    import "tinymce/plugins/fullscreen";
    import "tinymce/plugins/paste";
    import "tinymce/plugins/preview";
    import "tinymce/plugins/searchreplace";
    import "tinymce/plugins/charmap";
    import "tinymce/plugins/emoticons";
    import "tinymce/plugins/emoticons/js/emojis";
    import "tinymce/plugins/help";
    import "tinymce/plugins/codesample";
    import "tinymce/plugins/contextmenu";
    import "tinymce/plugins/colorpicker";
    import "tinymce/plugins/textcolor";
    import "tinymce/plugins/advlist";
    import "tinymce/plugins/hr";
    import "tinymce/plugins/textpattern";
    import "tinymce/plugins/autolink";
    import "tinymce/plugins/directionality";
    import "tinymce/plugins/visualblocks";
    import "tinymce/plugins/visualchars";
    import "tinymce/plugins/nonbreaking";
    import "tinymce/plugins/insertdatetime";
    import "tinymce/plugins/imagetools";
    import "tinymce/plugins/autosave";
    import "tinymce/plugins/autoresize";
    export default {
      name: "TinymceEditor",
      components: { Editor },
      props: {
        height: {
          type: Number,
          default: 500,
        }, //从后台获取的字符串HTML数据,
        value: {
          type: String, // 这里我设定个默认值,实际开发中可至为空 - default:"",根据需求修改。
          default: "",
        }, // 基本路径,默认为空根目录
        baseUrl: {
          type: String,
          default: "",
        },
        plugins: {
          //使用的插件 - 根据需求进行删减
          type: [String, Array],
          default:
            "visualblocks link lists image code table fullscreen template paste preview searchreplace colorpicker  wordcount\
             charmap emoticons help codesample media contextmenu textcolor advlist hr textpattern autolink\
              directionality  visualchars nonbreaking insertdatetime imagetools autosave autoresize ",
        },
        toolbar: {
          //工具栏 - 根据需求进行删减
          type: [String, Array],
          default:
            "fontselect fontsizeselect styleselect | undo redo restoredraft | cut copy paste pastetext | forecolor  backcolor bold italic underline strikethrough link codesample code |\
             alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | \
           bullist numlist | blockquote subscript superscript removeformat | \
        table image media charmap hr pagebreak insertdatetime | fullscreen preview|",
        },
      },
      data() {
        return {
          articleContent: this.value,
          tinymceFlag: "",
          editorInit: {
            language_url: "/static/tinymce/langs/zh_CN.js", //引用static下的文件,确保打包后也能引用成功
            language: "zh_CN",
            skin_url: "/tinymce/skins/ui/oxide", // skin路径,到样式文件夹即可
            content_css: "/tinymce/skins/content/default/content.css", //样式规则
            height: this.height,
            content_style:
              "* { padding:0; margin:0; } img {max-width:100% !important }",
            plugin_preview_width: 375, // 预览宽度
            plugin_preview_height: 668, //预览高度
            lineheight_val:
              "1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5", //行高
            fontsize_formats:
              "8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt",
            font_formats:
              "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
            plugins: this.plugins,
            powerpaste_word_import: "merge",
            toolbar: this.toolbar,
            paste_data_images: true,
            statusbar: true, // 底部的状态栏
            menubar: true, // 最上方的菜单
            branding: false, // 水印“Powered by TinyMCE” // 此处为图片上传处理函数,这里直接用了base64的图片形式上传图片
            images_upload_handler: (blobInfo, success, failure) => {
              const img = "data:image/jpeg;base64," + blobInfo.base64();
              success(img);
            },
          },
        };
      },
      mounted() {
        tinymce.init({}); //初始化编辑器
      },
      methods: {
        saveModify() {
          //获取编辑器的内容,获取的是html,也就是包括标签和样式的内容。
          var content = tinymce.get("tinymce").getContent(); //发送请求。。。
        },
      },
      watch: {
        value(newValue) {
          this.articleContent = newValue;
        },
        articleContent(newValue) {
          this.$emit("input", newValue);
        }
      }
    };
    </script>
    
    
    <style>
    </style>
    
    • 这时候项目为英文需要改为中文
    • 下载中文包(下载
    • 放入上面新建的tinymce文件夹中创建一个langs文件夹放入
    • 在这里插入图片描述

    在其他页面中使用

       <Editor v-model="value" />
       import Editor from './components/editor.vue'
       components: {
    		Editor
      	},
    

    效果图

    在这里插入图片描述

    展开全文
  • tinyMCE使用详解

    2019-03-20 04:18:18
    tinyMCE使用详解.rar,tinyMCE使用详解.docx
  • tinymce使用的東西.zip

    2021-04-15 14:20:15
    "tinymce": "4.8.5", "@tinymce/tinymce-vue": "1.1.0" npm i
  • 前言 这几年一直在it行业里摸爬滚打,一路走来,不少总结了一些python行业里的高频面试,看到大部分初入行的新鲜血液,还在为各样的面试题答案或收录有各种困难问题 于是乎,我自己开发了一款...Tinymce 在某些富文本

    前言

    这几年一直在it行业里摸爬滚打,一路走来,不少总结了一些python行业里的高频面试,看到大部分初入行的新鲜血液,还在为各样的面试题答案或收录有各种困难问题

    于是乎,我自己开发了一款面试宝典,希望能帮到大家,也希望有更多的Python新人真正加入从事到这个行业里,让python火不只是停留在广告上。

    微信小程序搜索:Python面试宝典

    或可关注原创个人博客:https://lienze.tech

    也可关注微信公众号,不定时发送各类有趣猎奇的技术文章:Python编程学习

    Tinymce

    在某些富文本编辑器中,我们可以支持文件与图片的同时编写,将文字与图片混合排列

    django中可以使用TimyMce富文本编辑器进行图文混排功能的实现

    下载地址:https://gitee.com/eastside/package/raw/master/tinymce.zip

    TinyMce是啥

    TinyMCE:是一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的各种浏览器,由JavaScript写成

    功能配置灵活简单,两行代码就可以将编辑器嵌入网页中,并且支持AJAX,加载速度非常快

    最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用。下图是此编辑器的界面

    上传路径

    首先配置整个项目的上传文件路径,为了区别与自身的static静态目录

    这里的上传文件我们将另外保存至upload文件夹

    #settings.py
    UPLOAD_ROOT = os.path.join(BASE_DIR,'upload')
    

    模板页面配置

    首先需要在使用到tinymce富文本编辑器的html页面下导入必备js文件

    <script src="{% static 'js/jquery-1.10.2.min.js' %}" ></script>
    <script src="{% static 'js/tinymce_setup.js' %}"></script>
    
    <script src="{% static 'tinymce/js/tinymce/tinymce.min.js' %}"></script>
    

    接下来,在模板页面中加入一个idcontent的输入表单,这里我们以一个文章数据为例

    • 首先是模型层文件定义
    #models.py 
    class Article(models.Model):
        title = models.CharField(max_length=100,verbose_name='标题')
        author = models.CharField(max_length=100,verbose_name='作者')
        content = models.TextField(verbose_name='内容')
    

    这里的content内容要用到富文本编辑器

    • 接着是模板页面的主要部分
    <form method="POST" action='/' enctype="multipart/form-data">
        {% csrf_token %}
        <input type="text" placeholder="文章标题">
        <br>
        <input type="text" placeholder="文章作者">
        <br>
        <input id="rich_content" name="content" value=" ">
        <br>
        <button type="submit">提交</button>
    </form>
    

    修改tinymce配置

    这里搭配了一个tinymce_setup.js文件,用来控制富文本编辑器所使用的插件等

    • 全文配置如下
    tinymce.init({
        // 选择id为content的标签作为编辑器
        selector: '#rich_content',
        // 方向从左到右
        directionality:'ltr',
        // 语言选择中文
        language:'zh_CN',
        // 高度为400 宽度为一半
        height:300,
        width: '50%',
        // 工具栏上面的补丁按钮
        plugins: [
                'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
                'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                'save table contextmenu directionality template paste textcolor',
                'codesample imageupload',
        ],
        // 工具栏的补丁按钮
         toolbar: 'insertfile undo redo | \
         styleselect | \
         bold italic | \
         alignleft aligncenter alignright alignjustify | \
         bullist numlist outdent indent | \
         link image | \
         print preview media fullpage | \
         forecolor backcolor emoticons |\
         codesample fontsizeselect fullscreen |\
         imageupload',
        // 字体大小
        fontsize_formats: '10pt 12pt 14pt 18pt 24pt 36pt',
        // 按tab不换行
        nonbreaking_force_tab: true,
        imageupload_url: "/upload_img/",
        // 上传后图片保存为绝对路径
        relative_urls : false,
    });
    
    • 注意:要注意的是imageupload_url配置用来确定当前图片上传所对应的视图路由

    图片上传视图

    接下来编写富文本编辑器的上传图片路由函数及对应的路由配置

    路由映射tinymce_setup.js与中的imageupload_url配置路由相同

    这里还要注意,由于此时tinymce的上传图片表单并不是和本身所容纳的form表单一起上传,所以并不会具备csrf_token值,需要我们将上传图片的函数额外进行装饰器装饰,取消csrf_token验证

    #views.py
    from django.views.decorators.csrf import csrf_exempt
    def md5(str_):
        import time
        m = hashlib.md5()
        m.update(str(time.time()).encode())
        filename = m.hexdigest()
        return filename + '.' + str_.split('.')[-1]
    
    @csrf_exempt
    def upload_img(request):
        if request.method == 'POST':
            img = request.FILES.get('file')
            if img:
                with open(os.path.join(UPLOAD_ROOT,img.name), 'wb') as fp:
                    for buf in img.chunks():
                        fp.write(buf)
                    # 迭代读取文件并写入到本地
            response = {}
            response['path'] = '/upload/' + file_name_md5
            response['error'] = False
            return HttpResponse(json.dumps(response))
    

    视图函数还是老样子去接收上传文件并保存即可

    • 路由配置
    #urls.py
    path('upload_img/',views.upload_img),
    

    文本接收视图

    以上的视图函数只能处理上传图片的内容接收

    我们的模板页面中还有作者及标题两样表单内容会被POST提交到后台

    并且要主要的是,富文本编辑器里除了图片的内容,还有文字等其他内容,这里也需要我们保存下来

    • 这里还需要一个视图函数去接管处理
    def index(request):
        if request.method == 'GET':
            return render(request, 'index.html')
        if request.method == 'POST':
            title = request.POST.get('title')
            author = request.POST.get('author')
            content = request.POST.get('content')
            models.Article.objects.create(
                title = title,
                author = author,
                content = content,
            )
            return redirect('/show/')
    
    • 表单路由
    #urls.py
    path('',views.index),
    
    • 这里上传之后,保存在后台的content数据是这个样子
    <p><img src="/upload/ec8f8c9a56ed32464a6727741fd58d8d.png" /></p><p>今天<em>一切</em>都是<strong>美丽</strong>的,哈哈哈</p>
    

    上传图片静态映射

    当有了上传图片的视图函数及所有内容的接收视图函数

    这里还有一个特殊的问题,现在如果在富文本编辑器中选择上传图片,你会发现图片已经在选择时就已经存储到了后台upload文件夹下,这也是为什么我们的图片上传视图函数要单独编写,并且还需要取消csrf_token的验证的原因

    除了这个问题你还会发现,在富文本编辑器中,上传的图片是看不到的,是一个坏掉的图片;

    使用F12开发者工具你可以看到,这里的图片展示为一个img标签,而标签的src属性内容正是通过上传视图函数返回的response中的path

    想让这个path值在访问时,能获取到实际的图片效果,需要我们在路由文件中继续配置,配置专门的upload/xxxx.jpg的图片路由访问,让图片真正展示出来

    #urls.py
    from django.views.static import serve
    re_path('^upload/(?P<path>.*)/$',serve,{'document_root':UPLOAD_ROOT}),
    

    上传后图片的访问路径是/upload/,那么这里的路由也是upload/,之后通过静态文件映射函数serve查找upload文件夹下的同路径同名图片资源

    当有了这条路由配置之后,再次再富文本编辑器中加入图片,你就会发现图片出现啦

    上传并展示

    最后,测试上传图片及文字;并且上传成功之后,重定向到show视图函数

    • 这个视图函数用来提取当前最新的上传数据并返回到模板页面
    #views.py
    def show(request):
        if request.method == 'GET':
            article = models.Article.objects.all().last()
            return render(request,'show.html',locals())
    
    • 展示的模板页面
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>展示文章</title>
    </head>
    <body>
        {% if article %}
            <h3>{{ article.title }}</h3>
            <h4>{{ article.author }}</h4>
            <div>{{ article.content|safe }}</div>
        {% endif %}
    </body>
    </html>
    

    其实本身富文本编辑器上传的文本内容就已经在一个p标签中,所以这里没有用段落标签

    另外由于保存在数据库的文本为html格式,而后台传递来的模板变量django出于安全考虑会自动进行转义,直接观看到的效果不会html样式,只是一些普通字符串;

    这里可以使用safe过滤器将内容认定为安全,展示为原始的html效果,其实还不错

    总结

    富文本编辑器其实就是将用户输入的内容变为html代码

    这里的图文混排,只是在图片加入时,单独将图片上传保存,并且回调获取到上传的路径

    之后只需要服务端后台配置好相关的上传图片访问路由配置即可

    展开全文
  • 通过添加external_plugins和mathjax使用来配置您的TinyMCE初始化设置: tinymce.init({ ... external_plugins: {'mathjax': '/your-path-to-plugin/@dimakorotkov/tinymce-mathjax/plugin.min.js'}, toolbar: '...
  • TinyMCE使用教程

    千次阅读 2018-06-14 12:04:09
    使用TinyMCE的方式主要有一下几种方式TinyMCE CloudPackage ManagersSDK / DownloadjQueryCustom Build本章主要介绍SDK一种方式,其他方式可以参考:https://www.tinymce.com/docs/get-started/advanced-install/...
  • tinymce格式刷_formatpainter-格式刷插件和用法,亲测有用,需要的欢迎下载
  • tinymce-emoji 这个简单的tinymce插件添加了一个帮助程序对话框,可将本地表情符号插入到您的内容中。 所有表情符号均已从提供的中删除 用法 通过npm安装: npm install --save tinymce-emoji 添加到您的tinymce ...
  • 最近写博客需要选择一款文本编辑器,选了几款觉得 TinyMCE 不错,插件比较齐全,界面也比较美观,不过在使用 Prism 的时候,却出现了问题。 Q: Prism 的插件 line-numbers 必须要在 pre 标签商添加 line-numbers ...
  • TINYMCE使用总结

    千次阅读 2021-10-24 18:17:39
    TINYMCE使用总结
  • TinyMce使用问题记录

    千次阅读 2020-06-04 15:39:38
    TinyMce 5.2.0使用问题记录。无法通过本地上传的方式上传视频,编辑器里的视频无法播放,编辑器的超链接点击无效
  • TinyMCE编辑器使用

    2022-06-16 11:58:11
    tinyMCE引入及使用方式,使用tinyMCE实现图片上传
  • 【超详细】Tinymce富文本使用教程

    千次阅读 2022-06-10 15:18:25
    官网文档:www.tiny.cloud/docs/ 社区版及开发版官方最新打包地址:... 获取内容:tinyMCE.activeEditor.getContent() 设置内容:tinyMCE.activeEditor.setContent("需要设置的编辑器内容") 获取内容:tinyMCE.
  • 【代码】富文本插件tinymce使用Ctrl+V粘贴图片上传到远程服务器。
  • tinymce 官网的一个收费插件powerpaste,在index.html页面引入tinymce.min.js。参数配置:tinymce.init({powerpaste_word_import: 'propmt',powerpaste_allow_local_images: true,paste_data_images: true,...
  • 先说环境,我用的是cli3, 然后安装的tinymce5,本文主要说遇到问题的解决办法,配置等就比较简单了首先安装网上有很多文章都一样,这步基本没啥问题npm install -s @tinymce/tinymce-vuenpm install -s tinymce安装...
  • tinymce在vue中的使用

    千次阅读 2022-01-11 16:14:06
    tinymce在vue中的使用 1.下载插件 npm i @tinymce/tinymce-vue@3.2.8 npm i tinymce@4.8.4 2.新建文件夹tinymce,把node_modules/tinymce里的文件复制到新建文件夹里 lang是我下载的语言包,tinymce 默认是英文...
  • tinymce使用

    千次阅读 2021-04-16 08:19:32
    tinymce使用 随着版本的更新 许多路径会发生变化 所以记录一下特定版本的使用方法 "@tinymce/tinymce-vue":"^2.0.0", "tinymce":"^5.0.3", 直接安装这两个版本 在public文件夹下面创建一个名为tinymce的文件夹...
  • vue-easy-tinymce一个简单而强大的软件包,用于在Vue.js项目中轻松使用tinymce。 功能v模型支持多实例编辑器支持vue-easy-tinymce一个简单而强大的软件包,可在Vue.js项目中轻松使用tinymce。 功能v模型支持多实例...
  • tinymce基础使用手册

    千次阅读 2021-12-27 13:25:22
    目录 1.开始 2.快速使用 3.常用配置 selector ...6.tinymce-vue 快速使用 组件配置项 7.自定义在vue中使用(推荐) 1. 开始 官网文档:https://www.tiny.cloud/docs/ 社区版及开发版官方最新打包地址:h
  • 1.处理成base64 initTinymce() { ... window.tinymce.init({ // language: this.language, language: "zh_CN", selector: `#${this.tinymceId}`, height: this.height, body_class: "panel-body ",
  • tinymce 使用问题解决

    千次阅读 2012-08-28 16:14:48
    1.最近的开发过程中使用tinymce这个富文本控件,在本地测试的时候没有发现问题,但部署的时候,发现需要弹出对话框的功能都失效了,弹出白框. 后来用f12跟踪后发现报脚本拒绝访问的错误.是一个跨域的问题,解决方法,在...
  • tinymce 使用记录

    2020-03-30 11:32:20
    tinymce 中文版文章超详细
  • tinymce 中文包 使用

    2022-06-07 10:50:14
    tinymce 中文包
  • Django Admin后台使用富文本tinymce(前端+后端)流程 什么是富文本编辑器 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。富文本编辑器不同于文本编辑器,程序员可到网上...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,554
精华内容 4,221
关键字:

tinymce使用