首页 > 其他分享 >富文本编辑器ueditor

富文本编辑器ueditor

时间:2022-09-21 12:14:32浏览次数:65  
标签:ueditor 文本编辑 vue name val 文件 label

 UEditor 文档   http://fex.baidu.com/ueditor/#api-common

1、安裝插件
          npm i vue-ueditor-wrap 
         
2、下載静态文件(去官网) https://github.com/fex-team/ueditor 
             vue-cli 3.0 将静态文件放在 public 文件下
             vue-cli 2.0 将静态文件放在 static 文件下

3、在组件中
         import VueUeditorWrap from 'vue-ueditor-wrap' // 富文本编译器
         
         <vue-ueditor-wrap v-model="form.content" :config="myConfig" />   // 使用
         
          可双向绑定数据    v-model="form.content"    
          myConfig: {    //  配置项
		        toolbars: [
		          [                            //   自行选择需要的功能
		            'undo', // 撤销
		            'bold', // 加粗
		            'indent', // 首行缩进
		            'italic', // 斜体 
		          ],
		          'fontfamily': [
					          { label: '', name: 'songti', val: '宋体,SimSun' },
					          { label: '仿宋', name: 'fangsong', val: '仿宋,FangSong' },
					          { label: '仿宋_GB2312', name: 'fangsong', val: '仿宋_GB2312,FangSong' },
					          { label: '', name: 'kaiti', val: '楷体,楷体_GB2312, SimKai' },
					          { label: '', name: 'yahei', val: '微软雅黑,Microsoft YaHei' },
					          { label: '', name: 'heiti', val: '黑体, SimHei' },
					          { label: '', name: 'lishu', val: '隶书, SimLi' },
					          { label: '', name: 'andaleMono', val: 'andale mono' },
					          { label: '', name: 'arial', val: 'arial, helvetica,sans-serif' },
					          { label: '', name: 'arialBlack', val: 'arial black,avant garde' },
					          { label: '', name: 'comicSansMs', val: 'comic sans ms' },
					          { label: '', name: 'impact', val: 'impact,chicago' },
					          { label: '', name: 'timesNewRoman', val: 'times new roman' }
				 ], 		
		        autoHeightEnabled: false,// 编辑器不自动被内容撑高
		        initialFrameHeight: 240, // 初始容器高度
		        initialFrameWidth: '100%', // 初始容器宽度
		        // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
		        serverUrl: '',
		        // UEditor 资源文件的存放路径,使用的是 vue-cli 生成的项目,通常不需要设置该选项,
		        vue-cli3.0 将静态文件夹放在 public 文件夹下路径为  /UEditor/
		        vun-cli2.0 将静态文件夹放在static文件夹下 /static/UEditor/
		        UEDITOR_HOME_URL: '/UEditor/'   
		     }    
4、就可以显示了

 扩展:
         public 文件夹下的文件并不会被 Webpack 处理,它们会直接被复制到最终的打包目录下。
         必须使用绝对路径引用这些文件, public 就是用来存放永远不变的文件。

 

标签:ueditor,文本编辑,vue,name,val,文件,label
From: https://www.cnblogs.com/liyunxi/p/16715140.html

相关文章

  • Vue中使用富文本编辑器
    一.下载依赖npmivue-ueditor-wrap-S二.引入组件importVueUeditorWrapfrom'vue-ueditor-wrap'//ES6Module三.注册组件components:{VueUeditorWrap}//......
  • Selenium测试时富文本编辑区输入方法
    用Selenium+python编写自动测试脚本,因为页面中内容编辑使用ckEditor富文本编辑,不知道如何输入内容。方法一:执行JS脚本,ckEditor编辑区内容输入成功,校验提示内容为空通过上......
  • ueditor导入本地word并编辑
    ​图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,......
  • ueditor(JSP版)如何实现word文档的导入和下载功能
    ​ ueditor粘贴不能粘贴word中的图片是一个很头疼的问题,在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴,因为这个需求头疼了半个月,因为前端方面因为安......
  • ueditor任意文件上传漏洞+图片马制作
    ueditor任意文件上传漏洞+图片马制作 ueditor漏洞代码位置:  修复漏洞的代码内容:publicoverridevoidProcess(){Sources=Request.Form.GetValu......
  • 百度ueditor粘贴word图片且图片文件自动上传功能
    ​项目需求可发布文章需求涉及到富文本编辑器经过查阅我选择了较为简便不需要后端支持可独立完成的tinymce框架官方文档也是相当完整虽然都是全英文但是有强大的谷......
  • vue3.0富文本编辑器vue-quill-editor
    1、安装npminstall@vueup/vue-quill@alpha--save2、引入main.js中全局引入import{QuillEditor}from'@vueup/vue-quill'import'@vueup/vue-quill/dist/vue......
  • 文本编辑器如何能实现直接粘贴把图片上传到服务器中
    ​这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" i......
  • 富文本编辑器:如何选择
    富文本编辑器:如何选择Photoby哈维尔·克萨达on不飞溅React富文本编辑器允许您轻松地编辑Web应用程序的内容。但是,在某些情况下您需要重新发明它。例如,启动速......
  • 一个伟大的富文本编辑器的剖析
    一个伟大的富文本编辑器的剖析Photoby荒野上的基拉on不飞溅富文本编辑器可让您轻松编辑内容。您只需单击几下即可更改格式、插入图像和添加链接。它可以显着提高......