精华内容
下载资源
问答
  • vue富文本编辑器tinymce

    千次阅读 2020-11-19 11:22:19
    最近整合了一个富文本编辑器,因为有视频和图片的要求 ,也找了不少,刚开始是考虑jquery的kindeditor,后期因为项目要使用vue框架搭建,所以又找了一个适合vuetinymce富文本 ,重点介绍一下tinymce的操作流程 ...
          最近整合了一个富文本编辑器,因为有视频和图片的要求 ,也找了不少,刚开始是考虑jquery的kindeditor,后期因为项目要使用vue框架搭建,所以又找了一个适合vue的tinymce富文本 ,重点介绍一下tinymce的操作流程
          
          tinymce的英文官网写的贼垃圾 不建议观看 乱的一匹,先进行npm下载插件依赖
    
    1. 对于vue.js3
      $ npm install --save “@tinymce/tinymce-vue@^4”

    2. 对于vue.js2
      $ npm install --save “@tinymce/tinymce-vue@^3”

     <template>
       <div id="app">
         <img alt="Vue logo" src="./assets/logo.png">
         <editor
           api-key="no-api-key"
           :init="{
             height: 500,
             menubar: false,
             plugins: [
               'advlist autolink lists link image charmap print preview anchor',
               'searchreplace visualblocks code fullscreen',
               'insertdatetime media table paste code help wordcount'
             ],
             toolbar:
               'undo redo | formatselect | bold italic backcolor | \
               alignleft aligncenter alignright alignjustify | \
               bullist numlist outdent indent | removeformat | help'
           }"
         />
       </div>
     </template>
    
     <script>
     import Editor from '@tinymce/tinymce-vue'
    
     export default {
       name: 'app',
       components: {
         'editor': Editor
       }
     }
     </script>
    

    因为上面工具toolbar里面的值不是很全 我这边把全的贴出来

                   'undo redo | styleselect | fontselect| bold italic  backcolor forecolor | \
                   underline strikethrough  | \
                  alignleft aligncenter alignright alignjustify | \
                  bullist numlist outdent indent | removeformat | link image| \
                  advlist autolink lists charmap print preview|\
                  searchreplace visualblocks code fullscreen|insertdatetime media table paste | wordcount help '
    

    在这里插入图片描述
    这个是效果图 唯一的缺点就是这里配置上传的视频和图片是直接输入连接的 ,
    不过比较欣慰的就是因为苹果手机限制,视频在手机显示效果直接就是一个播放按钮,没有第一帧的画面,这里竟然做了处理,需要视频的小伙伴必看,在视频里面的高级设置里面,先配置一般的原始码,在配置高级里面的封面,下面是示意图在这里插入图片描述在这里插入图片描述

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

    千次阅读 2019-01-24 11:14:30
    1. 介绍tinymce ... 1.2 查看样子   ...第一步:npm install @tinymce/tinymce-vue -S 第二步:npm install tinymce -S 2.2安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 ...

    1. 介绍tinymce

    1.1 查看官网https://www.tiny.cloud/

    1.2 查看样子

     

    2 入门使用

    2.1 资源下载

    第一步:npm install @tinymce/tinymce-vue -S
    
    第二步:npm install tinymce -S

    2.2安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下

    2.3 tinymce 默认是英文界面,所以还需要下载一个中文语言包

    下载地址:https://www.tiny.cloud/get-tiny/language-packages/

    如图所示:

    下载后解压提取:zh_CN.js 并拷贝到static/tinymce/目录下面

    最后目录结构为

    3. 初始化页面

    导包

    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/modern/theme'
    import Editor from '@tinymce/tinymce-vue'

    注意 这里的Editor是tinymce-vue 的一个组件 需要在自己的页面注册后使用

    export default {
      name: 'Tinymce',
      components: { Editor },

    3.2 添加页面代码

    <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor>

    3.3 编辑器需要一个 skin 才能正常工作,所以要设置一个 skin_url 指向之前复制出来的 skin 文件

    editorInit: {
      language_url: '/static/tinymce/zh_CN.js',
      language: 'zh_CN',
      skin_url: '/static/tinymce/skins/lightgray',
      height: 300
    }

    此段代码放在data(){}函数中,直接返回即可

    data() {
        return { editorInit: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300 }}
      }

    3.4 在mounted也要初始化一次

    mounted() {
        tinymce.init({})
      },

    4. 贴出完整的代码

    <template>
      <div class='tinymce'>
        <h1>tinymce</h1>
        <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
        <div v-html='tinymceHtml'></div>
      </div>
    </template>
    
    <script>
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/modern/theme'
    import Editor from '@tinymce/tinymce-vue'
    export default {
      name: 'tinymce',
      data () {
        return {
          tinymceHtml: '请输入内容',
          init: {
            language_url: '/static/tinymce/zh_CN.js',
            language: 'zh_CN',
            skin_url: '/static/tinymce/skins/lightgray',
            height: 300,
            plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
            toolbar:
              'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
            branding: false
          }
        }
      },
      mounted () {
        tinymce.init({})
      },
      components: {Editor}
    }
    </script>

     

    展开全文
  • 作为踩坑过 vue-quill-editor 富文本编辑器,以及 wangEditor 编辑器来说,个人感觉还是 Tinymce 功能更加强大跟齐全一些。说一下体验感,wangEditor 编辑器太年轻了,功能上缺乏很多东西,比如说上传图片无法方便的...
    1. 作为踩坑过 vue-quill-editor 富文本编辑器,以及 wangEditor 编辑器来说,个人感觉还是 Tinymce 功能更加强大跟齐全一些。说一下体验感,wangEditor 编辑器太年轻了,功能上缺乏很多东西,比如说上传图片无法方便的添加图片的 alt 信息,git issue上也有人提意见,功能目前还在计划中。而 vue-quill-editor 这款编辑器是根据 quill 编辑器为基础做的二次加工,功能上来说,感觉没有 Tinymce 增加功能方便简洁,而且为了一些特定化需求,可能还需要更改源码文件,这样就导致如果有人删了一下依赖包重新下载就凉透了。从目前来看,还是 Tinymce 这款功能比较齐全,而且也有人专门翻译做了中文文档,Tinymce 中文文档传送门,这个人做的还不错,更新速度也可以,在首页下方也有功能完全的Demo 可以体验。
    2. 接下来,开始说我在vue中 使用体验了,首先如果 Tinymce 第三方集成区所集成的版本所容纳的功能足够的话,就可以不用按照我的方法,可以直接使用 vue-tinymce 这个集成方案来解决,但是我为了追求所有的功能都能跟上最新版,所以没有选择这个方案,而是用了这个方案
       npm install --save @tinymce/tinymce-vue@3.2.8  tinymce
    
    1. 注意 @tinymce/tinymce-vue@3.2.8 指定版本安装,因为从 4.x.x 版本开始就是 vue3 所支持的版本,如果是 vue2 就必须装 4.x.x 版本以下的,否则会报错。
    2. 安装好之后,自定义一个编辑器组件,比如:
    <template>
    <div class="tinymce-editor">
       <editor
         v-model="myValue"
         :disabled="disabled"
         @onClick="onClick"
         :init="init"
       />
     </div>
    </template>
    <script>
    import { getToken } from "@/utils/auth";
    import tinymce from "tinymce/tinymce";
    import Editor from "@tinymce/tinymce-vue";
    import "tinymce/themes/silver";
    import "tinymce/icons/default/icons"; //解决了icons.js 报错Unexpected token '<'
    // 编辑器插件plugins
    // 更多插件参考:https://www.tiny.cloud/docs/plugins/
    import "tinymce/plugins/image"; // 插入上传图片插件
    import "tinymce/plugins/media"; // 插入视频插件
    import "tinymce/plugins/table"; // 插入表格插件c
    import "tinymce/plugins/lists"; // 列表插件
    import "tinymce/plugins/wordcount"; // 字数统计插件
    import "tinymce/plugins/charmap"; // 特殊字符
    import "tinymce/plugins/preview"; // 预览
    import "tinymce/plugins/hr"; // 水平线
    import "tinymce/plugins/help"; // 帮助文档
    import "tinymce/plugins/imagetools"; // 图片编辑工具
    import "tinymce/plugins/code"; // 编辑源码
    import "tinymce/plugins/fullscreen"; // 全屏
    import "tinymce/plugins/link"; // 超链接
    import "tinymce/plugins/paste"; // 粘贴
    import "tinymce/plugins/quickbars"; // 快速工具栏
    import "tinymce/plugins/searchreplace"; // 查找替换
    
    export default {
     components: {
       Editor,
     },
     props: {
       value: {
         type: String,
         default: "",
       },
       // 基本路径,默认为空根目录,如果你的项目发布后的地址为目录形式,
       // 即abc.com/tinymce,baseUrl需要配置成tinymce,不然发布后资源会找不到
       baseUrl: {
         type: String,
         default: "",
       },
       disabled: {
         type: Boolean,
         default: false,
       },
       plugins: {
         type: [String, Array],
         default:
           "lists image imagetools media table wordcount charmap preview hr help code fullscreen link paste quickbars searchreplace ",
       },
       toolbar: {
         type: [String, Array],
         default() {
           return [
             "code preview hr help searchreplace | removeformat charmap paste | fullscreen",
             "undo redo | formatselect | fontsizeselect | fontselect | bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link lists image imagetools media table |",
           ];
         },
       },
     },
     data() {
       return {
         init: {
           skin_url: "/tinymce/skins/ui/oxide",
           language: "zh_CN",
           language_url: "/tinymce/langs/zh_CN.js",
           protect: [
             /\<\/?(if|endif)\>/g, //<if> & </endif>
             /\<xsl\:[^>]+\>/g, //<xsl:...>
             /<\?php.*?\?>/g, //php代码
           ], // 代码保护
           height: 700,
           plugins: this.plugins,
           toolbar: this.toolbar,
           charmap_append: [
             [0x2615, "morning coffee"],
             [0x2600, "sun"],
             [0x2601, "cloud"],
           ],
           branding: false,
           menubar: false,
           // 此处为图片上传处理函数,这个直接用了base64的图片形式上传图片,
           // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
           images_upload_handler: (blobInfo, success, failure, progress) => {
             var xhr, formData;
             xhr = new XMLHttpRequest();
             xhr.withCredentials = false;
             xhr.open("POST", `${process.env.VUE_APP_BASE_API}/common/upload`);
             xhr.setRequestHeader("Authorization", `Bearer ${getToken()}`);
             xhr.upload.onprogress = function (e) {
               progress((e.loaded / e.total) * 100);
             };
             xhr.onload = function () {
               var json;
               if (xhr.status == 403) {
                 failure("HTTP Error: " + xhr.status, { remove: true });
                 return;
               }
               if (xhr.status < 200 || xhr.status >= 300) {
                 failure("HTTP Error: " + xhr.status);
                 return;
               }
               json = JSON.parse(xhr.responseText);
               if (!json || typeof json.url != "string") {
                 failure("Invalid JSON: " + xhr.responseText);
                 return;
               }
               success(json.url);
             };
    
             xhr.onerror = function () {
               failure(
                 "Image upload failed due to a XHR Transport error. Code: " +
                   xhr.status
               );
             };
    
             formData = new FormData();
             formData.append("file", blobInfo.blob(), blobInfo.filename());
    
             xhr.send(formData);
           },
         },
         myValue: this.value,
       };
     },
     mounted() {
       tinymce.init({});
     },
     methods: {
       // 添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
       // 需要什么事件可以自己增加
       onClick(e) {
         this.$emit("onClick", e, tinymce);
       },
       // 可以添加一些自己的自定义事件,如清空内容
       clear() {
         this.myValue = "";
       },
     },
     watch: {
       value(newValue) {
         this.myValue = newValue;
       },
       myValue(newValue) {
         this.$emit("input", newValue);
       },
     },
    };
    </script>
    
    1. 注意,我这里只引入了一些插件,如果想要其他的工具,比如图片的插件,就需要先引入插件
    // 编辑器插件plugins
    import "tinymce/plugins/image"; // 插入上传图片插件
    // 然后需要在 plugins  toolbar 中放入插件
    plugins:"image";
    toolbar:"image"
    
    1. 关键一点,就是如果看不到编辑器显示出来,还需要一步,在 node_modules 中找到 tinymce,找到对应 skins 文件,在public 文件夹下创建一个 tinymce 文件夹,将其复制出来放在 public/tinymce 文件夹下,或者 放在你可以知道准确的引入地址文件夹下的 xxxx/tinymce 文件夹中。init 时需要设置 skin_url,这是线下环境,如果线上环境找不到路径,就需要配置一个 baseUrl
      // 基本路径,默认为空根目录,如果你的项目发布后的地址为目录形式,
      // 即abc.com/tinymce,baseUrl需要配置成tinymce,不然发布后资源会找不到
    	skin_url: "/tinymce/skins/ui/oxide",
    	// or
    	skin_url: `${baseUrl}/tinymce/skins/ui/oxide`,
    
    1. 如果看不懂英文,可以配置中文资源包,先去本地化资源包下载地址 下载,可以简单注册一个账号,然后进入文档 - > 本地化配置,就可以看到这个页面了,或者复制我从官网下载过来的中文包也行;

    在这里插入图片描述
    8. 我目前所用的本地化中文资源包js 文件
    9. 然后在之前创建的的 tinymce 文件夹中再创建一个 language 文件夹,将 zh_CN.js 文件放在 language 中,然后在 init 中引入

    	  language: "zh_CN",
          language_url: "/tinymce/langs/zh_CN.js",
         // or
         language_url: `${baseUrl}/tinymce/langs/zh_CN.js`,
    
    1. 接下来就可以去其他文件引用这个编辑器组件了。如果有其他的坑可以联系我,大家一起讨论。如果没看到,可以+qq 1499224990 联系我
    展开全文
  • 最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置 来一张tinymce官网的完整功能的图(没梯子可能访问速度有点慢…) 下面开始工作: 插件安装 tinymce官方提供...

    原文地址:https://blog.csdn.net/liub37/article/details/83310879

    最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置
    来一张tinymce官网的完整功能的图(没梯子可能访问速度有点慢…)
    在这里插入图片描述
    下面开始工作:

    插件安装

    tinymce官方提供了一个vue的组件tinymce-vue
    如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,像我这种懒的注册或者购买的直接下载tinymce,自力更生

    安装tinymce-vue

    npm install @tinymce/tinymce-vue -S
    
     

    下载tinymce

    npm install tinymce -S
    

    下载的时候可以先在static下面建个目录tinymce,下载tinymce完成后在node_modules 中找到 tinymce/skins目录,将其复制到static\tinymce目录下面,
    在这里插入图片描述

    下载中文语言包

    tinymce提供了很多的语言包,这里我们下载中文语言包
    在这里插入图片描述
    下载完成后将其解压到static\tinymce目录下面,最终目录结构形式如下
    在这里插入图片描述

    初始化

    引入基本文件

    import tinymce from 'tinymce/tinymce'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/modern/theme'
    
     

    components中注册tinymce-vue才能使用

    <editor id="tinymce" v-model="value" :init="init"></editor>
    
     

    初始化配置项,具体参考官网文档,这里说几个重要的

    init: {
    	language_url: '/static/tinymce/langs/zh_CN.js',//语言包的路径
    	language: 'zh_CN',//语言
    	skin_url: '/static/tinymce/skins/lightgray',//skin路径
    	height: 300,//编辑器高度
    	branding: false,//是否禁用“Powered by TinyMCE”
    	menubar: false,//顶部菜单栏显示
    }
    
     

    扩展插件

    默认的编辑器只有基本功能,如果还需要上传图片,插入表格之类的功能就需要添加插件
    如添加上传图片和插入表格的插件

    import 'tinymce/plugins/image'
    import 'tinymce/plugins/table'
    
     

    引入后还需要再toolbar工具栏上添加相应的按钮

    plugins: 'lists image media table textcolor wordcount contextmenu',
    toolbar: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
    
     

    这里我们一般会再次把它进行封装一下,以便其他地方随时可以引用

    完整代码tinymce-editor.vue

    <template>
      <div class="tinymce-editor">
        <editor v-model="myValue"
          :init="init"
          :disabled="disabled"
          @onClick="onClick">
        </editor>
      </div>
    </template>
    
    <script>
    import tinymce from 'tinymce/tinymce'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/modern/theme'
    import 'tinymce/plugins/image'
    import 'tinymce/plugins/media'
    import 'tinymce/plugins/table'
    import 'tinymce/plugins/lists'
    import 'tinymce/plugins/contextmenu'
    import 'tinymce/plugins/wordcount'
    import 'tinymce/plugins/colorpicker'
    import 'tinymce/plugins/textcolor'
    export default {
      components: {
        Editor
      },
      props: {
        //传入一个value,使组件支持v-model绑定
        value: {
          type: String,
          default: ''
        },
        disabled: {
          type: Boolean,
          default: false
        },
        plugins: {
          type: [String, Array],
          default: 'lists image media table textcolor wordcount contextmenu'
        },
        toolbar: {
          type: [String, Array],
          default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
        }
      },
      data() {
        return {
          //初始化配置
          init: {
            language_url: '/static/tinymce/langs/zh_CN.js',
            language: 'zh_CN',
            skin_url: '/static/tinymce/skins/lightgray',
            height: 300,
            plugins: this.plugins,
            toolbar: this.toolbar,
            branding: false,
            menubar: false,
            //此处为图片上传处理函数,这个直接用了base64的图片形式上传图片,
            //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
            images_upload_handler: (blobInfo, success, failure) => {
              const img = 'data:image/jpeg;base64,' + blobInfo.base64()
              success(img)
            }
          },
          myValue: this.value
        }
      },
      mounted() {
        tinymce.init({})
      },
      methods: {
        //添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
        //需要什么事件可以自己增加
        onClick(e) {
          this.$emit('onClick', e, tinymce)
        },
        //可以添加一些自己的自定义事件,如清空内容
        clear() {
          this.myValue = ''
        }
      },
      watch: {
        value(newValue) {
          this.myValue = newValue
        },
        myValue(newValue) {
          this.$emit('input', newValue)
        }
      }
    }
    
    </script>
    <style scoped>
    </style>
    
    
    

    封装后使用

    <template>
      <div>
        {{ msg }}
        <tinymce-editor v-model="msg"
          :disabled="disabled"
          @onClick="onClick"
          ref="editor"></tinymce-editor>
        <button @click="clear">清空内容</button>
        <button @click="disabled = true">禁用</button>
      </div>
    </template>
    
    <script>
    import TinymceEditor from './tinymce-editor'
    export default {
      components: {
        TinymceEditor
      },
      data() {
        return {
          msg: 'Welcome to Use Tinymce Editor',
          disabled: false
        }
      },
      methods: {
        //鼠标单击的事件
        onClick(e, editor) {
          console.log('Element clicked')
          console.log(e)
          console.log(editor)
        },
        //清空内容
        clear() {
          this.$refs.editor.clear()
        }
      }
    }
    </script>
    
    <style scoped>
    </style>
    
    

    最后来张动态的效果图
    Vue整合tinymce富文本编辑器

    展开全文
  • 使用步骤: ..../static/tinymce4.7.5/tinymce.min.js"&gt;&lt;/script&gt; &lt;div id="app"&gt;&lt;/div&gt; &lt;!-- built files will be auto inj
  • 一、Tinymce可视化编辑器 参考 https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce https://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化 Tinymce是一个传统...
  • Vue 自定义富文本编辑器 tinymce 支持导入 word 模板

    万次阅读 热门讨论 2018-09-13 10:03:10
    自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目 前端 前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: tinymce 前端采用的 vue.js 至于Vue 中怎么集成 ...
  • tinymce 官方为vue项目提供了一个组件 tinymce-vue npm install tinymce -S 我package.json文件里tinymce的版本是^4.8.5 安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static ...
  • 一、复制文本编辑器组件到项目文件夹里面 二、在build下的webpack.dev.conf.js里面添加 templateParameters: { BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory } 三、在项目的index...
  • 1.安装 # npm install tinymce -S 2.把node_modules\tinymce里面的文件包括tinymce文件夹全部复制到static文件夹下面,如下图 ...3.在mian.js中引入tinymce(也可以在组件中...Vue.prototype.$tinymce = Tinymce...
  • 主要介绍了Vue+Webpack完美整合富文本编辑器TinyMce的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue中使用富文本编辑器tinymce 第一步 <!-- 安装 切记版本要对---> yarn add @tinymce/tinymce-vue@3.2.2 tinymce@5.3.1 第二步 找到node_modules中的tinymce文件夹下的skins文件夹,然后在项目中的public下...

空空如也

空空如也

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

vue富文本编辑器tinymce

vue 订阅