精华内容
下载资源
问答
  • 主要介绍了Java开发 富文本编辑器TinyMCE详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 富文本编辑器TinyMCE

    2019-09-30 21:21:08
     最近项目中用到了javascript富文本编辑器,从网上找开源控件,发现很多可选,参考下面文章,列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/12/25/1631766.html。  通过对比,最终选择TinyMCE,...

     

      最近项目中用到了javascript富文本编辑器,从网上找开源控件,发现很多可选,参考下面文章,列出了很多可用的插件http://www.cnblogs.com/ywqu/archive/2009/12/25/1631766.html 。

      通过对比,最终选择TinyMCE,界面比较美观,使用和操作也简单,下面做一个记录。

      TinyMCE是一个开源,纯JavaScript HTML WYSIWYG编辑器。它能够把HTML TEXTAREA或其它HTML标签转换成Rich编辑器。TinyMCE非常易于集成到其它内容管理系统中。可以通过外观/主题和插件来定制满足自己需求的编辑器。提供汉化语言包。多浏览器支持:Mozilla、MSIE、FireFox、Opera和Safari。此外你还可以很方便地使用Ajax来保存和加载内容。 

      效果图:

      

      下载地址:

      http://www.tinymce.com/download/download.php

      demo地址:

      http://www.tinymce.com/tryit/full.php

    ps:

      在源文件包中没有demo中可直接显示效果的html页面,只有脚本库和样式等,需要用户自行创建html页面,tinymce的使用方法很简单,相信看过了下面几个例子马上就可以着手使用了!

    eg1.快速启动

    菜单条

      

     

    ------------------------------------------------

      博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!
    店名:
      小鱼尼莫手工饰品店
    经营:
      发饰、头花、发夹、耳环等(手工制作)
    网店:
      http://shop117066935.taobao.com/

      ---------------------------------------------------------------------

    继续正题... 

      

    代码

    <DOCTYPE html>
    <html>
    <head>  
      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
      <script type="text/javascript" src="tinymce.min.js"></script>
      <script type="text/javascript">
        tinymce.init({
            selector: "textarea"
        });
      </script>
    </head>
    <body>
      <form method="post" action="somepage">
          <textarea name="content" style="width:100%"></textarea>
      </form>
    </body>
    </html>

    eg2.Full featured

    菜单条

      

    代码

    <DOCTYPE html>
    <html>
    <head>
      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
      <script type="text/javascript" src="tinymce.min.js"></script>
      <script type="text/javascript">
        tinymce.init({
            selector: "textarea",
            theme: "modern",
            plugins: [
                "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons template paste textcolor moxiemanager"
            ],
            toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
            toolbar2: "print preview media | forecolor backcolor emoticons",
            image_advtab: true,
            templates: [
                {title: 'Test template 1', content: 'Test 1'},
                {title: 'Test template 2', content: 'Test 2'}
            ]
        });
      </script>
    </head>
    <body>  
    <form method="post" action="somepage">
        <textarea name="content" style="width:100%"></textarea>
    </form>
    </body>
    </html>

    ps: 在init方法中配置参数,来确定编辑器的功能!

     

    店名:
      小鱼尼莫手工饰品店
    经营:
      发饰、头花、发夹、耳环等(手工制作)
    网店:
      http://shop117066935.taobao.com/

    转载于:https://www.cnblogs.com/qiongmiaoer/p/3533862.html

    展开全文
  • 富文本编辑器tinymce

    2018-07-19 16:07:00
    TinyMCE是一个开源(LGPL-2.1)的富文本编辑器TinyMCE不仅易于扩展,它也非常灵活。大多数功能是简单的配置,而核心编辑器有近100定制选项,从简单的修改到最神秘的边缘。 下面是测试代码,可以直接在浏览器上打开...

    TinyMCE是一个开源(LGPL-2.1)的富文本编辑器,TinyMCE不仅易于扩展,它也非常灵活。大多数功能是简单的配置,而核心编辑器有近100定制选项,从简单的修改到最神秘的边缘。

    下面是测试代码,可以直接在浏览器上打开。

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
    <script>tinymce.init({ selector:'textarea' });</script>
    </head>
    <body>
    <textarea>Next, use our Get Started docs to setup Tiny!</textarea>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/MirZhai/p/9336406.html

    展开全文
  • 主要介绍了Vue+Webpack完美整合富文本编辑器TinyMce的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • django使用富文本编辑器 tinymce

    千次阅读 2018-04-16 19:27:21
    django使用富文本编辑器 tinymce

    创建工程,数据中数据格式设置为 models.TextField()
    此时编辑器是普通的文本框。

    使用 tinymce

    1、安装 django-tinymce

     pip install django-tinymce

    2、INSTALLED_APPS 中添加 ‘tinymce’,

    3、模型文件中导入包

    from tinymce.models import HTMLField

    4、设置模型成员类型:

    scontend = HTMLField()

    5、更改编辑器样式:
    setting.py文件中增加 tinymce 的默认样式

    TINYMCE_DEFAULT_CONFIG = {
        'theme': 'advanced',
        'width': 600,
        'height': 400,
    }
    展开全文
  • 一、Tinymce可视化编辑器 参考 https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce https://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化 Tinymce是一个传统...
  • vue中使用富文本编辑器tinymce 第一步 <!-- 安装 切记版本要对---> yarn add @tinymce/tinymce-vue@3.2.2 tinymce@5.3.1 第二步 找到node_modules中的tinymce文件夹下的skins文件夹,然后在项目中的public下...

    vue中使用富文本编辑器tinymce

    第一步

    <!-- 安装  切记版本要对--->
    yarn add @tinymce/tinymce-vue@3.2.2 tinymce@5.3.1 
    

    第二步

    找到node_modules中的tinymce文件夹下的skins文件夹,然后在项目中的public下新建static文件夹下再新建tinymce文件夹,然后将刚刚找到的整个skins文件夹拷贝到public的static文件夹下tinymce目录下。

    接着去官网下载语言包,解压,将langs文件夹拷贝到public的tinymce文件夹下(和skins文件夹同级)

    第三步 注册组件 TinymceRich

    <template>
      <div class='c_tinymce'>
        <editor :id='id' v-model='editorValue' :init='editorInit'></editor>
      </div>
    </template>
    
    <script>
    // 参考链接 https://www.jb51.net/article/189489.htm
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/silver/theme'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/icons/default/icons';
    import 'tinymce/themes/silver';
    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/contextmenu';
    import 'tinymce/plugins/textcolor';
    export default {
      name: 'tinymce',
      components: {Editor},
       props: {
        height: {
          type: Number,
          default: 500
        },
        id: {
          type: String,
          default: 'tinymceEditor'
        },
        // 自定义组件v-model的value
        value: {
          type: String,
          default: ''
        },
        // link lists image code table wordcount media fullscreen preview paste contextmenu textcolor
        plugins: {
          type: [String, Array],
          default: 'link lists image code table wordcount fullscreen preview paste contextmenu textcolor'
        },
        toolbar: {
          type: [String, Array],
          default: 'fontselect | bold italic underline strikethrough | link unlink image | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | removeformat'
        }
       },
      data () {
        return {
          tinymceHtml: '请输入内容',
          newValue: '',
          editorInit: {
            language_url: `/static/tinymce/zh_CN.js`, //public目录下 语言包路径
            language: 'zh_CN',
            skin_url: `/static/tinymce/skins/ui/oxide`, //public目录下 skinurl
            content_css: `/static/tinymce/skins/content/default/content.css`, //public目录下 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”
            images_upload_handler: (blobInfo, success, failure) => {
              // blobInfo.blob() 可以取到文件对象
              this.$emit('handleImgUpload', blobInfo, success, failure);
            }
          },
        }
      },
      mounted () {
        tinymce.init({})
      },
      computed: {
        editorValue: {
          get() {
            return this.value;
          },
          set(val) {
            this.newValue = val;
          }
        }
      },
      watch: {
        newValue(newValue) {
          this.$emit('input', newValue);
        }
     },
     methods: {
      clear() {
       this.editorValue = '';
      }
     }
    }
    </script>
    <style lang="scss">
    .tox-tinymce-aux {
      z-index: 99998!important;
    }
    .tox {
      .tox-dialog-wrap {
        z-index: 99998!important;
    
        }
      .tox-dialog-wrap__backdrop {
        z-index: 99998!important;
      }
      .tox-dialog {
        z-index: 99999!important;
      }
    } 
    
    </style>
    

    第四步 如何使用

    <template>
     <div>
       <tinymce-rich :height="300" id="send-article-rich" v-model="formData.content" @handleImgUpload="apiUploadFileHandel"/>
     </div>
    </template>
    
    <script>
    import TinymceRich from '@/components/TinymceRich.vue'
    import { apiUploadFile } from '@/utils/api.js'
    export default {
      components: { TinymceRich },
      data() {
        return {
          formData: {
            content: ''
          }
        }
      },
      methods: {
        // 上传
        async apiUploadFileHandel(blobInfo, resolve, failure) {
          let file = blobInfo.blob()
          console.log(file)
          let formData = new FormData()
          formData.append('file', file)
          const loading = this.$loading()
          const { success, data } = await apiUploadFile(formData).catch(() => {
          loading.close()
          failure()
          })
          loading.close()
          if(!success) return failure()
          console.log(data)
          this.$message.success(data.msg)
          resolve(data.data[0].filePath)
        },
      }
    }
    </script>
    
    <style lang='scss'>
    
    </style>
    
    展开全文
  • vue富文本编辑器tinymce

    千次阅读 2020-11-19 11:22:19
    最近整合了一个富文本编辑器,因为有视频和图片的要求 ,也找了不少,刚开始是考虑jquery的kindeditor,后期因为项目要使用vue框架搭建,所以又找了一个适合vue的tinymce富文本 ,重点介绍一下tinymce的操作流程 ...
  • 找网上找了很久选择了一款国外的富文本编辑器tinyMCE。这个编辑页面很符合我的审美,界面如下。 这个界面可以说非常美观,而且含有许多插件。有部分插件是需要付费使用的,但是免费的插件已经足够普通用户使用了。...
  • 使用富文本编辑器TinyMCE+react踩坑 <Editor inline={false} initialValue={newsStore.content} onChange = {(value) => { /*this.props.newsStore.setEditFieldContents(value.level.content)...
  • 富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。 TinyMCE的优势: 开源可商用,基于LGPL...
  • tinymce 4 editortinymce.init({selector:"#txt",plugins: ["advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker","searchreplace wordcount visualblocks visual...
  • Java开发之富文本编辑器TinyMCE 一、题外话 最近负责了一个cms网站的运维,里面存在很多和编辑器有关的问题,比如编辑一些新闻博客,论文模块。系统采用的是FCKEditor,自我感觉不是很好,如下图 ...
  • 富文本编辑器TinyMCE菜鸟使用教程

    千次阅读 2019-04-09 18:50:42
    老师给我了一个Ckeditor,个人感觉比较丑,(主要是老师没有给使用文档,我作为一个完完全全的小菜鸟,根本不会使),我就从网上找好看并且好用的富文本编辑器TinyMCE就是最佳的选择。 我后台...
  • TinyMCE是一个轻量级的富文本编辑器,相对于CK编辑器更加精简,但必须满足绝大部分场景的需要。 2.安装和配置TinyMCE 2.1安装TinyMCE npm install-保存tinymce 2.2设置tinymce局部访问(.angular-cli.json) ...
  • django验证码插件captcha以及富文本编辑器tinymce部署 安装captcha、tinymce pip install django-simple-captcha pip install django-tinymce setting.py中引入captcha INSTALLED_APPS = [ 'django.contrib.admin...
  • Django学习笔记(富文本编辑器tinymce配置) 1.首先在虚拟环境中安装tinymce,我一开始安装的最新版本2.8.0然后报错了,换成2.4.0之后就没问题 用命令pip install django-tinymce==2.4.0安装 2.在settings.py中配置应用 ...
  • # 富文本编辑器配置 TINYMCE_DEFAULT_CONFIG = { "theme": "advanced", # 外观 "width": 600, # 宽度 "height": 400, # 高度 }
  • Vue 自定义富文本编辑器 tinymce 支持导入 word 模板

    万次阅读 热门讨论 2018-09-13 10:03:10
    自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目 前端 前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: tinymce 前端采用的 vue.js 至于Vue 中怎么集成 ...
  • 在django中,后台admin管理站点使用富文本编辑器tinymce输入带格式数据,导入数据库中,phthon再从数据库传给前端, 结果呈现的数据却带格式标签。 解决方案 在模板中,给该数据加过滤器safe即可,如{{ content|safe...
  • 富文本编辑器Tinymce是使用步骤: 1、首先去python的模块包的网站下载一个django-tinymce的包 2、下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pip install django_tinymce直接下载...
  • Vue + Webpack 完美整合富文本编辑器 TinyMce

    万次阅读 热门讨论 2018-01-07 15:05:27
    选择一个合适的富文本编辑器对于一个前端项目至关重要,这次我基于Vue来开发我项目中的前端部分,经过权衡选择了tinymce。其在UI,功能都很适合,tinymce官方文档:点击打开链接;引入tinymce 我选用的版本4.7.4npm ...

空空如也

空空如也

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

富文本编辑器tinymce