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

    千次阅读 2019-08-13 19:47:26
    vue中使用富文本编辑器 vue中会经常用到富文本编辑器,今天遇到一个问题,想要点击按钮显示富文本编辑器,在网上找了很多都不合适不能进行有效的显示,今天跟大家分享简单快速的方法操作富文本编辑器无论是vue-cli...

    vue中使用富文本编辑器

    vue中会经常用到富文本编辑器,今天遇到一个问题,想要点击按钮显示富文本编辑器,在网上找了很多都不合适不能进行有效的显示,今天跟大家分享简单快速的方法操作富文本编辑器无论是vue-cli3.0还是vue-cli2.0都可以进行操作
    GitHub ------- https://github.com/surmon-china/vue-quill-editor

    在这里插入图片描述
    打开页面向下滑动

    在这里插入图片描述
    安装依赖 ↑

    在这里插入图片描述
    如果在其他页面也需要引用可以进行全局的安装(上面的),如果只在当前页面可以只在当前页面引用(下面)↑
    在这里插入图片描述
    这样加在页面中就可以进行显示~

    展开全文
  • wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的功能不是很复杂,那么选它没错了,刚好能满足你! 第一步:先保证你的电脑安装有node,当然使用cdn也可以,下载到本地也行,我这里...

    node安装的同学请直接用我本文的demo,原作者的demo好像有一点点小问题,本文demo是我修改过的,亲测可用

     

    先敬上官网:http://www.wangeditor.com/index.html

    wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的功能不是很复杂,那么选它没错了,刚好能满足你!

    第一步:先保证你的电脑中安装有node,当然使用cdn也可以,下载到本地也行,我这里用的vue-cli,顺便下载到项目依赖中了

    本地下载:

    https://github.com/wangfupeng1988/wangEditor/releases

    cdn使用:

    https://unpkg.com/wangeditor/release/wangEditor.min.js

    node下载:

    npm i wangeditor -S

    第二步:在项目中引入该插件并定义html结构,我这里使用vue脚手架,没有使用脚手架和其他构建工具的同学可以使用script标签对插件进行引用

    例如:

    <div id="editor"></div>
    <script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    <script type="text/javascript">
      var E = window.wangEditor
      var editor = new E('#editor')
      // 或者 var editor = new E( document.getElementById('editor') )
      editor.create()
    </script>

    vue-cli中使用:先建立模板,然后引入插件,创建即可,可以对菜单进行配置,也可以对编辑器中的内容进行实时监听

    <template>
      <div id="wangeditor">
        <div ref="editorElem" style="text-align:left;"></div>
      </div>
    </template>
    <script>
    import E from 'wangeditor'
    export default {
      name: 'Editor',
      data () {
        return {
          editor: null,
          editorContent: ''
        }
      },
      // catchData是一个类似回调函数,来自父组件,当然也可以自己写一个函数,主要是用来获取富文本编辑器中的html内容用来传递给服务端
      props: ['catchData'], // 接收父组件的方法
      mounted () {
        this.editor = new E(this.$refs.editorElem)
        // 编辑器的事件,每次改变会获取其html内容
        this.editor.customConfig.onchange = html => {
          this.editorContent = html
          this.catchData(this.editorContent) // 把这个html通过catchData的方法传入父组件
        }
        this.editor.customConfig.menus = [
          // 菜单配置
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          'code', // 插入代码
          'undo', // 撤销
          'redo' // 重复
        ]
        this.editor.create() // 创建富文本实例
      }
    }
    </script>
    

     

    展开全文
  • const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media ...
  • 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中使用富文本编辑器(wangeditor) 安转 :npm i wangeditor --save 在需要的文件下引入:import Editor from “wangeditor” 实现文字的样式和图片的上传并显示在文本编辑器中 <template> <div id=...

    Vue中使用富文本编辑器(wangeditor)

    • 安转 :npm i wangeditor --save
    • 在需要的文件下引入:import Editor from “wangeditor”
    • 实现文字的样式和图片的上传并显示在文本编辑器中
    
    <template>
    	<div id="editor"></div>
    	//挂载点
    </template>
    
    <script>
    	export default {
    		data(){
    			return {
    				myEditor:null,
    				serverIP: "http://localhost:3001"
    				//设置一个服务器端口
    			}
    		},
    		mounted() {
    		    this.editor = new Editor("#editor");
    		    //创建一个富文本编辑器
    		    this.editor.config.menus = [
    		    //配置菜单,列表中的都是显示的
    		      "head",
    		      "bold",
    		      "fontSize",
    		      "fontName",
    		      "italic",
    		      "underline",
    		      "strikeThrough",
    		      "indent",
    		      "lineHeight",
    		      "foreColor",
    		      "backColor",
    		      "link",
    		      "list",
    		      "todo",
    		      "justify",
    		      "quote",
    		      "emoticon",
    		      "image",
    		      "video",
    		      "table",
    		      "code",
    		      "splitLine",
    		      "undo",
    		      "redo",
    		    ];
    		    this.editor.config.uploadImgServer = `${this.serverIP}/upload/img`;
    		    //配置上传图片的地址
    		    this.editor.config.uploadFileName = "mainPic";
    		    //配置图片的名称
    		    this.editor.config.zIndex = 0;
    		    //设置富文本编辑器的层级
    		    this.editor.create();
    		    //将富文本编辑器创建在网页之中
    		    this.editor.config.uploadImgHooks = {
    		    // 图片上传并返回了结果,想要自己把图片插入到编辑器中
    		      customInsert: (insertImgFn, result) => {
    		      //result是图片的地址
    		        insertImgFn(`${this.serverIP}${result.file}`);
    		        //将图片插入到富文本编辑器之中
    		      },
    		    };
    		  },
    	}
    </script>
    

    获取富文本编辑器中的数据

    this.editor.txt.html()

    展开全文
  • Vue + Element UI使用富文本编辑器 - 简书 VUE如何element-ui自带的富文本编辑器_繁星、晚风-CSDN博客_elementui富文本编辑器 改造vue-quill-editor: 结合element-ui上传图片到服务器 - 简书
  • 因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用。分享记录一下。 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容如下 <template lang="html"> <div ...
  • 第一步:下载tinymce npm install tinymce-vue --save; cnpm install tinymce-vue --save; 第二步:下载tinymce的css文件包和语言包 ...这里直接将富文本编辑器封装成了一个vue组件的形式 <template> &...
  • 实战向 如何在vue中使用富文本编辑器 富文本编辑器,其实网上已经有很多很多的攻略了,这也是一个经常会使用的东西,但是总有些人会觉得别人写的自己看不懂,所以今天我整点能复制过去直接就能用的 一、依赖插件 vue...
  • 基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费 http://www.wangeditor.com/index.html (1)、安装 npm install wangeditor 2、封装公用组件 editor.vue <template lang="html"> ...
  • Vue-Quill-Editor再vue使用 .../ 导入富文本编辑器 import VueQuillEditor from 'vue-quill-editor' // require styles 导入富文本编辑器对应的样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.
  • vue中使用tinymce项目中使用tinymcetinymce富文本编辑器说明及效果示例安装tinymce代码实现页面引入tinymce及需要使用的组件![在这里插入图片描述]...
  • 在开发中,特别是后台管理,富文本是常用的,今天我们来看下vue中使用富文本编辑器–wangeditor&修改文本区域默认高度&不展示本地图片上传按钮解决方案。 之前发布过在react中的使用方法,有兴趣的可以看下...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,341
精华内容 3,336
关键字:

vue中使用富文本编辑器

vue 订阅