精华内容
下载资源
问答
  • tinymce.min.js
    千次阅读
    2020-04-15 16:57:59

    解决办法:安装更早版本的tinymce,版本会有不兼容问题。

    pip install django-tinymce==2.7.0

     

    资料:tinymce官网安装使用步骤:

    https://github.com/aljosa/django-tinymce/blob/master/docs/installation.rst

    更多相关内容
  • vue中tinymce的jquery.tinymce.min.js引入后报这个错误,该如何才能消掉
  • antd.min.js

    2020-05-09 10:36:28
    帮助你完成项目,帮助我获得勋章
  • tinymce使用 效果图 1.官网下载 官方地址TinyMCE...script src="static/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script> 3.2 html 使用 <textarea id="detail"></textarea> 3.

    tinymce使用

    效果图
    在这里插入图片描述
    1.官网下载 官方地址TinyMCE下载
    在这里插入图片描述
    在这里插入图片描述
    2.原装是英文版,可以下载汉化包
    tinymce汉化包
    在这里插入图片描述
    放进langs文件夹下

    3.开始使用

    3.1 引用js

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

    3.2 html 使用

    <textarea id="detail"></textarea>
    

    3.3 初始化

    //初始化富文本
                setEditor(val){
                    var _this = this;
                    //第一次打开初始化
                    tinymce.init({
                        selector: '#detail',
                        language: 'zh_CN',//语言
                        height: 300,//编辑器高度
                        branding: false,//是否禁用“Powered by TinyMCE”
                        plugins: [
                            'powerpaste table advlist autolink lists link charmap print preview hr anchor pagebreak',
                            'searchreplace wordcount visualblocks visualchars code fullscreen',
                            'insertdatetime nonbreaking save table contextmenu directionality',
                            'emoticons textcolor colorpicker textpattern image code codesample toc pagebreak'
                        ],
                        toolbar1: 'undo redo | table | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                        toolbar2: 'print preview | forecolor backcolor emoticons | codesample | pagebreak | toc | fullscreen',
                        image_advtab: true,
                        paste_data_images: true,
                        menubar: false,//禁用标题栏
                        automatic_uploads: true,
                        media_live_embeds: true,//查看上传的视频
                        //图片选择上传
                        images_upload_handler: function (blobInfo, success, failure) {
                            var xhr, formData;
                            var file = blobInfo.blob();//转化为易于理解的file对象
                            var isLt10M = file.size / 1024 / 1024  < 10;
                            if(!isLt10M){
                                failure('上传图片大小不能超过10MB哦!');
                                return;
                            }
                            xhr = new XMLHttpRequest();
                            xhr.withCredentials = false;
                            xhr.open('POST',ctx + 'file/uploadFile?editorImg=editorImg&target=oss');
                            xhr.onload = function() {
                                var json;
                                if (xhr.status != 200) {
                                    failure('上传失败!');
                                    return;
                                }
                                json = JSON.parse(xhr.responseText);
                                if (!json.data || typeof json.data.filePath != 'string') {
                                    failure('上传失败!');
                                    return;
                                }
                                success(json.data.filePath);
                            };
                            formData = new FormData();
                            formData.append('file', file, file.name );//此处与源文档不一样
                            xhr.send(formData);
                        },
                        //初始化完成回调函数
                        init_instance_callback : editor => {
                        //如果第一次打开并且是查看动态记录详情则直接设置值
                        if(!this.editorInit && val){
                        editor.setContent(val);
                    }
                    //修改为初始化完成
                    this.editorInit = true;
                }
                });
                    if(this.editorInit){
                        //清空富文本编辑器内容
                        tinymce.activeEditor.setContent("");
                        //如果是查看在重新设置内容
                        if(val){
                            tinymce.activeEditor.setContent(val);
                        }
                    }
                },
    

    3.4 新增时调用

    //新增
                add(){
                    this.RecordOperation.title = "新增";
                    this.RecordOperation.show = true;
                    setTimeout(()=>{
                        this.setEditor();
                    },500);
                },
    

    3.5 保存时,获取内容赋值

    this.data.content = tinymce.activeEditor.getContent();
    

    3.6 编辑查看富文本内容

    //查询详情
                queryDynamicInfo(dynamicId){
                    axios.get('mj/projectMessage/queryDynamicInfo/'+dynamicId).then(res => {
                        this.RecordOperation.data = res.data;
                        this.RecordOperation.show = true;
                        this.RecordOperation.title = "编辑动态";
                        setTimeout(()=>{
                            this.setEditor(this.RecordOperation.data.content);
                        },500);
                    });
                },
    

    3.7 同个页面使用多个富文本,用不同选择器再次初始化

    <textarea id="detail2"></textarea>
    
    展开全文
  • tinymce使用的是https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js地址,这个网站在国外会存在挂掉的情况,所以考虑使用国内稳定的cdn节点 国内常用节点有: 七牛 ...

    原tinymce使用的是https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js地址,这个网站在国外会存在挂掉的情况,所以考虑使用国内稳定的cdn节点

    国内常用节点有:

    七牛 https://www.staticfile.org

    360 https://cdn.baomitu.com

    字节跳动 https://cdn.bytedance.com

    举例:把节点替换为 七牛的

    // why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
    // const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js' // 此CDN在国外经常会挂,所以换其他国内cdn
    // 国内常用cdn
    // 七牛 https://www.staticfile.org
    // 360  https://cdn.baomitu.com
    // 字节跳动 https://cdn.bytedance.com
    const tinymceCDN = 'https://cdn.staticfile.org/tinymce/4.9.3/tinymce.min.js'

    2、更换节点后会出现找不到中文本的情况,因为下面的地址确实没有 zh_CN.js这个包,所以考虑把中文包下载到本地并引用。

    3、下载中文包:

     https://www.tiny.cloud/get-tiny/language-packages/

    下载好后放到同级目录下

    5、配置文件中引入中文汉化包

     记得使用requrie

     6、愉快的使用

     

     

    展开全文
  • tinymce_5.8.2.zip

    2021-07-30 12:50:19
    TinyMCE可视化HTML编辑器是一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的各种浏览器,采用JavaScript/ECMAScript开发,主要特性包括主题/模板支持,多语言支持(包括简体中文),支持通过插件的方式进行...
  • A simple and powerful package for easy usage of tinymce in Vue.js project. 一个简单而强大的软件包,用于在Vue.js项目中轻松使用tinymce。 View demo 查看演示 Download Source 下载源 特征 (Featur...

    vue使用tinymce

    易用性 (vue-easy-tinymce)

    A simple and powerful package for easy usage of tinymce in Vue.js project.

    一个简单而强大的软件包,用于在Vue.js项目中轻松使用tinymce。

    特征 (Features)

    • [x] v-model Support

      [x] v模型支持

    • [x] Multiple instance editor support

      [x]多实例编辑器支持

    • [x] Configurable options

      [x]可配置的选项

    • [x] Binding initial content (from v-model)

      [x]绑定初始内容(来自v模型)

    安装 (Installation)

    Run the command below to install this package:

    运行以下命令以安装此软件包:

    npm install vue-easy-tinymce --save

    Or

    要么

    Download or clone this repository and copy dist/vue-easy-tinymce.min.js file to your project.

    下载或克隆此存储库,然后将dist/vue-easy-tinymce.min.js文件复制到您的项目中。

    Or

    要么

    Use CDN provider:

    使用CDN提供程序:

    <script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script>

    用法 (Usage)

    In the first step, put vue-easy-tinymce in your project.

    第一步,在您的项目中放入vue-easy-tinymce

    Node.js Bundler(Webpack,汇总,Browserify) (Node.js Bundler (Webpack, Rollup, Browserify))

    window.Vue = require('vue'); // npm install vue --save
    //... etc data or package(s)
    var VueEasyTinyMCE = require('vue-easy-tinymce');

    浏览器加载 (Browser loading)

    <script src="examples/tinymce/tinymce.min.js"></script> <!-- TinyMCE core -->
    <!-- Or CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.4/tinymce.min.js"></script> -->
    
    <script src="examples/vue/vue.min.js"></script> <!-- Vue.js core -->
    <!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    
    <script src="dist/vue-easy-tinymce.min.js"></script> <!-- VueEasyTinyMCE module-->
    <!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script> -->
    
    <script src="examples/index.js"></script> <!-- Your project js code -->

    In the next step, use the VueEasyTinyMCE in vue instance as a component

    下一步,将vue实例中的VueEasyTinyMCE用作组件

    new Vue({
        // ,...
        components: {
            // <tinymce> tag available in parent's template
            'tinymce': VueEasyTinyMCE
        },
        data: {
            /* Your data and models here */
            myModel: '<p>initial value</p>',
    
            /* Config can be declare here */
            myPlugins : [],
            myToolbar1: '',
            myToolbar2 : '',
            myOtherOptions : {}
        }
        // ,...
    });

    Or

    要么

    Vue.component('tinymce', VueEasyTinyMCE);
    new Vue({
        // ...
    });

    设定档 (Config)

    The VueEasyTinyMCE configuration can be defined in:

    VueEasyTinyMCE配置可以在以下位置定义:

    1. Inside Vue instance in data section.

      数据部分中的Vue实例内部。


      Example:
      例:


      Explained in above.
      在上面解释。

    2. Inside <script></script> tag in above of component.

      在组件上方的<script></script>标记内。


      Example:
      例:

    <script>var configToolbar1 = 'undo redo | bold';</script>
    <tinymce :toolbar1="configToolbar1"></tinymce>
    1. Inside <tinymce></tinymce> By binding value directly.

      <tinymce></tinymce>通过直接绑定值。


      Example:
      例:

    <tinymce :toolbar1="'undo redo | bold'"></tinymce>
    道具 (props)
    PropTypeDefaultRequired
    :pluginsArray[ ]No
    :toolbar1String' 'No
    :toolbar2String' 'No
    :otherObject{ }No
    Struts 类型 默认 需要
    :plugins 数组 [] 没有
    :toolbar1 '' 没有
    :toolbar2 '' 没有
    :other 目的 {} 没有

    Config value example:

    配置值示例:

    var myPlugins = [
        'advlist autolink lists link image charmap print preview anchor textcolor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table contextmenu paste code directionality template colorpicker textpattern'
    ];
    
    var myToolbar1 = 'undo redo | bold italic strikethrough | forecolor backcolor | template link | bullist numlist | ltr rtl | removeformat';
    
    var myToolbar2 = '';
    
    var myOtherOptions = {
        height: 200,
        templates: [
            {title: 'Test template 1', content: 'Test 1'},
            {title: 'Test template 2', content: 'Test 2'}
        ]
        //,content_css: 'css/tinymce-content.css'
        //,width:600,
        //directionality: 'rtl',
        //theme: 'modern',
        //menubar: false
        //, etc...
    };

    Finally, you can easily use the <tinymce></tinymce> in your own view.

    最后,您可以在自己的视图中轻松使用<tinymce></tinymce>

    <tinymce v-model="myModel"
        :plugins="myPlugins" :toolbar1="myToolbar1" :toolbar2="myToolbar2"
        :other="myOtherOptions">
    </tinymce>

    (Example)

    At first read the Usage section and then follow below code:

    首先,请阅读“ 用法”部分,然后遵循以下代码:

    index.js (index.js)

    new Vue({
        el: '#app',
        data: {
            /* Your data and models here */
            myModel: '<p><span style="color: #ff0000;">Initial Value</span></p>',
    
            /* Config can be declare here */
            myPlugins : [
                'advlist autolink lists link image charmap print preview anchor textcolor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table contextmenu paste code directionality template colorpicker textpattern'
            ],
            myToolbar1: 'undo redo | bold italic strikethrough | forecolor backcolor | template link | bullist numlist | ltr rtl | removeformat',
            myToolbar2 : '',
            myOtherOptions : {
                height: 200,
                templates: [
                    {title: 'Test template 1', content: 'Test 1'},
                    {title: 'Test template 2', content: 'Test 2'}
                ],
                content_css: 'css/tinymce-content.css'
                //,width:600,
                //directionality: 'rtl',
                //theme: 'modern',
                //menubar: false
                //, etc...
            }
        },
        components: {
            'tinymce': VueEasyTinyMCE
        },
        methods: {
            getModelValue: function () {
                alert(this.myModel);
            },
            changeModelValue: function () {
                this.myModel = '<p>Change value programmability</p>';
            },
            clearModelValue: function () {
                this.myModel = '';
            }
        }
    });

    index.html (index.html)

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue-easy-tinymce</title>
    
        <link rel="stylesheet" href="css/style.css">
    
    </head>
    <body>
    
    
    <div id="app">
        <img src="logo.png">
    
        <tinymce v-model="myModel"
                 :plugins="myPlugins" :toolbar1="myToolbar1" :toolbar2="myToolbar2"
                 :other="myOtherOptions">
        </tinymce>
    
        <br>
        <button @click="getModelValue()">Get current model value</button>
        <button @click="changeModelValue()">Change model value programmability</button>
        <button @click="clearModelValue()">Clear model value</button>
    
        <br><br>
        <a target="_blank" href="https://github.com/m3esma/vue-easy-tinymce">vue-easy-tinymce</a>
    
    </div>
    
    
    <script src="tinymce/tinymce.min.js"></script> <!-- TinyMCE core -->
    <!-- Or CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.4/tinymce.min.js"></script> -->
    
    <script src="vue/vue.min.js"></script> <!-- Vue.js core -->
    <!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    
    <script src="../dist/vue-easy-tinymce.min.js"></script> <!-- VueEasyTinyMCE module-->
    <!-- Or CDN <script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script> -->
    
    <script src="index.js"></script> <!-- Your project js code -->
    
    
    </body>
    </html>

    In the above example, you can use node package manager (npm) instead of scripts. it explained in the Usage section.

    在上面的示例中,可以使用节点包管理器(npm)代替脚本。 在用法部分进行了说明。

    翻译自: https://vuejsexamples.com/a-simple-and-powerful-package-for-easy-usage-of-tinymce-in-vue-js-project/

    vue使用tinymce

    展开全文
  • 由于modern和advanced的theme已经在 tinymce 的很多版本中不再使用,因此在setting.py文件中设置theme要和所安装的tinymce版本所契合。如下所示: TINYMCE_DEFAULT_CONFIG= { 'theme':'advanced', 'width':600, ...
  • 在官网下载tinymce生产用法所需要的全部文件; https://www.tinymce.com/ ...script src="static/tinymce/tinymce.min.js"></script> 将tinymce插件内所有文件复制至项目中static文件夹内; 在项目内...
  • TinyMCE是一个开源的所见即所得的HTML编辑器,界面相当清新,界面模拟本地软件的风格,顶部有菜单栏。支持图片在线处理,插件多,功能非常强大,易于集成,并且拥有可定制的主题。支持目前流行的各种浏览器,它可以...
  • django-tinymce版本3.3.0,前端页面无法加载出富文本编辑器,浏览器控制台提示tiny_mce.js加载失败 网上的django-tinymce教程(他们的版本小于3) pip installdjango-tinymce 在settings.py中INSTALLED_APPS中添加'...
  • 2.在 build/webpack.dev.conf.js 中添加配置 templateParameters: { BASE_URL: config.dev .assetsPublicPath + config.dev .assetsSubDirectory } 3.引入js脚本 在index.html 中引入js脚本,可能因为...
  • 上次使用的是云端TinyMCE的API KEY一方面需要注册申请,另一方面好像有免费试用时间,不断搜罗,这次分享本地下载的方法 1.进入首页链接首先点击左上角 Products 然后点击 Get Tinymce 进入下载界面 2.进入后,...
  • vue-element-admin TinyMCE组件 CND失效 解决方案
  • 这个问题其实很简单就解决了,但我走了不少弯路,希望看到文章的兄弟们不要再踩坑了 首先,出现这个问题,应该是在把Tinymce本地化 ...script src="%PUBLIC_URL%/tinymce/tinymce.min.js"></script>
  • 简单使用 tinymce

    2021-03-31 11:01:02
    第一次使用 tinymce,遇到的坑却不少。 首先官网下载 tinymce ,开发版和社区版都可以。 附上下载链接: ...现在简单 html 文件中上上手,...<!...script src="./tinymce.js"></script> <script> 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里的文件复制到新建文件夹里 ...import "./tinymce.min.js"; import
  • Vue中使用tinymce富文本编辑...https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.11/tinymce.min.js //版本高了和脚手架不太兼容,好像是超过5.0就有问题 formatselect // 设置标题模块,引入网上找的一些,默认
  • 2、下载tinymce.min.js到本地 地址 3、下载汉化js zh_CN.js 放到 langs目录下 汉化包下载 4、引入 <script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=官方申请的API_KEY"></script&g...
  • 1、分析问题: 这种是由于引入文件时出错 2、解决问题: (法1)查看引入路径是否正确 (法2)把放在 Vue项目 src/assets里边的资源文件放到 public 文件夹下来引用 assets...例如src=“<%= BASE_URL %>api/api.js
  • TinyMCE 5.3.2

    2021-05-01 14:57:23
    TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JS写成,它对IE6+和Firefox1.5+都有着非常良好的支持,功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的需求,且功能配置灵活简单。TinyMCE 5.3.2 ...
  • 单页面vue引入富文本tinymce-4.7.5

    千次阅读 2019-04-14 13:03:40
    首先要先把富文本tinymce-4.7.5的js下载回来。 tinyMCE下载地址:https://www.tiny.cloud/get-tiny/self-hosted/ 其中tinyMCE默认为英文,如需中文需要下载语言扩展包,下载地址:https://www.tiny.cloud/get-t...
  • layui的富文本编辑器插件(tinymce)封装
  • 最近因业务需求在项目中嵌入了tinymce这个富文本编辑器...因为已经不再维护了,需要大量修改源码,很多都是专门为jsp等服务器渲染项目写的代码需要删除, 然后越删越害怕越删越不敢用,依赖jquery,需要专门用js去pars
  • npm安装参考如下连接tinymce富文本编辑器(vue)_天高任鸟飞-CSDN博客_tinymce-vueTinyMC编辑器简介TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比,有着丰富的插件,支持多种...
  • 富文本编辑器Tinymce

    2022-07-31 00:47:23
    将脚本库复制到项目的static目录下(在vue-element-admin-master的static路径下)在guli-admin/build/webpack.dev.conf.js中添加配置。...课程信息组件中引入Tinymce。使在html页面中可是使用这里。...
  • TinyMCE是一个轻量、简洁、功能强大的编辑器。 公司之前使用过kindEditor和wangEditor。 kindEditor:功能强大,代码简洁,有常用的从txt和word复制、多图上传等功能,但是没有格式刷,运营的妹子经常反馈生成多余的...
  • Tinymceeditor富文本编辑器的使用

    千次阅读 2020-04-21 23:20:05
    tinymceeditor富文本编辑器的使用 1、安装tinymce 使用mpn itinymce -S 2、新建tinymceeditor.vue文件,内容如下 <template> <section id='tinymceeditor'>这是tinymceeditor富文本编辑器</...
  • 你的路径+/tinymce/js/tinymce/tinymce.min.js 初始化 tinymce.init({各种配置}) 配置项随心所欲吧 自定义配置选择 H5 H5的基本配置 框架中使用? vue,react,anular以及其他框架怎么用?Java,python等等也行哟 ...
  • 在react 中使用tinyMce富文本编辑器

    千次阅读 2021-02-19 11:11:46
    最开始使用tinyMce的时候发现第一次加载巨慢,查了一下资料后发现一句话,tinyMce在首次加载的时候会在全局查找tinyMce这个变量,如果没有找到就会请求云服务器的tinyMce资源,个人认为应该是这个原因导致的,而导致...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,706
精华内容 682
关键字:

tinymce.min.js