原创 

vue nuxtjs 中使用tinymce 编辑器

分类:前端    1003人阅读    IT小君  2021-07-10 12:23

安利

tinymce 编辑器 是我用过的最好的编辑器,常用功能都是免费,定制和升级功能需要收费

下载

资源不大好找本站保留了一份方便读者,下载包包含编译版本和开发版本。编译版体积小,开发版包含源码 方便魔改。每个包中都包含了所需插件和zh_cn.js汉化脚本。地址:https://yy123.ink/itResDetail/67

集成

加载原理:VUE像jquery 一样加载js、css;vue 动态加载外部js、css

mounted(){
      if(process.client){
        var self = this;
        this.loadJs("/tinymce/js/tinymce/tinymce.min.js", function () {
			//脚本加载完回调
          self.initTinyMCE('topicEditor');
          self.initTinyMCE('commentEditor')
        });
      }
    },methods: {
		//js加载方法定义
		loadJs(url, callback) {
         var loadScript = document.createElement("script");
          loadScript.type = "text/javascript";
          loadScript.src = url;
          document.body.appendChild(loadScript);

          loadScript.onload = loadScript.onreadystatechange = function () {
			  //script 标签 onload 完成回调
              if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
                  if (callback != null) {
                      callback();
                      loadScript.onload = loadScript.onreadystatechange = null;
                  }
              }
          };

      },initTinyMCE(id){
		  //生成编辑器
          tinymce.init({
              selector: '#'+id,
              language:'zh_CN',
              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',
              height: 650, //编辑器高度
              min_height: 400,
              /*content_css: [ //可设置编辑区内容展示的css,谨慎使用
                  '/static/reset.css',
                  '/static/ax.css',
                  '/static/css.css',
              ],*/
              fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
              font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
              link_list: [
                  { title: '预置链接1', value: 'http://www.tinymce.com' },
                  { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
              ],
              image_list: [
                  { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
                  { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
              ],
              image_class_list: [
              { title: 'None', value: '' },
              { title: 'Some class', value: 'class-name' }
              ],
              importcss_append: true,
              //自定义文件选择器的回调内容
              file_picker_callback: function (callback, value, meta) {
                  if (meta.filetype === 'file') {
                    callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
                  }
                  if (meta.filetype === 'image') {
                    callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
                  }
                  if (meta.filetype === 'media') {
                    callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
                  }
              },
              toolbar_sticky: true,
              autosave_ask_before_unload: false,
          });
      }


效果


点击广告,支持我们为你提供更好的服务

网页设计开发公司网站模板

中小型创意设计服务公司网站模板

响应式太阳能能源公司网站模板

HTML5现代家居装潢公司网站模板

现代时尚家具公司网站模板

css+js实现的颜色渐变数字时钟动画特效

HTML5数字产品服务公司网站模板

html5图标下拉搜索框自动匹配代码

canvas炫酷鼠标移动文字粒子特效

HTML5 Canvas竖直流动线条背景动画特效

js+css3抽奖转盘旋转点餐代码

响应式时尚单品在线商城网站模板

html5 canvas进度条圆环图表统计动画特效

小众时尚单品在线电子商务网站模板

响应式咖啡饮品宣传网站模板

css鼠标跟随文字模糊特效

html5 svg夜空中星星流星动画场景特效

有机水果蔬菜HTML5网站模板

html5 canvas彩色碎片组合球形旋转动画特效

jQuery右端悬浮带返回顶部特效

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务