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

    2020-09-28 22:35:21
    wangEditor是一个轻量级的富文本编辑器,相比KindEditor十分简洁,但偏pc端 ,不支持移动端和 ipad。 官网地址:http://www.wangeditor.com/   下载引入 方式一   使用cdn <script src=...


     

    wangEditor是一个轻量级的富文本编辑器,相比KindEditor十分简洁,但偏pc端 ,不支持移动端和 ipad。

    官网地址:http://www.wangeditor.com/

     

    下载引入

    方式一   使用cdn

    <script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.js"></script>
    

     
    方式二   自己下载编译
    在官网下载压缩包,编译后引入dist下的wangEditor.min.js

    npm install
    
    npm run build
    

     
    方式三   npm引入
    需要以npm方式创建项目

    npm i wangeditor --save
    

     

    基本使用

    <div id="editor">
      <!-- 默认内容,可以是富文本 -->
      <p>请输入内容...</p>
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.js"></script>
    
    <script type="text/javascript">
      const E = window.wangEditor;
      const editor = new E("#editor");
      editor.create();
    </script>
    

     

    说明

    1、v4版本的使用和v3略有不同,使用时要注意引入的是v3还是v4版本。

    参考:v3版本的使用
     

    2、有时候编辑的内容是在移动端展示的,比如显示在小程序中的页面上。移动端预览思路

    • 运营在pc端编辑内容
    • 点击“移动端预览”按钮时,前端获取编辑框的带有html标签的文档内容传给后端
    • 后端用StringBuilder拼接html文档的<head>、<meta>之类的固定标签,在临时目录下创建一个html文件,将StringBuilder转换为String写入html文件中,返回给前端html文件路径
    • 前端拼接域名、后端返回的html文件路径,生成二维码显示在页面上
    • 运营手机扫描二维码,转到html页面
    展开全文
  • 基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。 如何应用,步骤。 1.http://www.wangeditor.com/,打开链接下载所需要的版本。 2.创建一个页面 引入 <link href="dist/css/...

    我必须说一句话:

    wangEditor

    基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。

    如何应用,步骤。

    1.http://www.wangeditor.com/,打开链接下载所需要的版本。

    2.创建一个页面 引入

    <link href="dist/css/wangEditor.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="dist/js/lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="dist/js/wangEditor.min.js"></script>

    我这里的链接是我本地路径,你需要改一下。

    注意这里引入的先后顺序,先引入css.然后是jqeruy,js。jquery在先,js在后。

    在body中引入

    <div id="div1">
    <p>请输入内容...</p>
    </div>
    <!--这里引用jquery和wangEditor.js-->
    <script type="text/javascript">
    var editor = new wangEditor('div1');
    editor.create();
    //创建文本编辑器
    </script>

    文本编辑器就在页面中了。

    转载于:https://www.cnblogs.com/tuoxiong/p/5910493.html

    展开全文
  • 这篇文章主要为大家详细介绍了轻量级富文本编辑器wangEditor结合vue使用方法示例,具有一定的参考价值,可以用来参考一下。感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!1、安装使用npm下载: `npm ...

    这篇文章主要为大家详细介绍了轻量级富文本编辑器wangEditor结合vue使用方法示例,具有一定的参考价值,可以用来参考一下。

    感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!

    1、安装

    使用npm下载: `npm install wangeditor`

    2、 创建实例

    (1)基本用法:

    代码如下:

    import E from 'wangeditor'

    export default {

    name: 'editor',

    mounted () {

    var editor = new E('#editor')

    editor.customConfig.onchange = (html) => {

    this.formArticle.content = html

    }

    editor.create()

    }

    }

    效果如图

    【图片暂缺】

    (2)自定义高度写法如下:把菜单和编辑框分开

    代码如下:

    代码如下:

    import E from 'wangeditor'

    export default {

    name: 'editor',

    mounted () {

    var editor = new E('#editorMenu', '#editor')

    editor.customConfig.onchange = (html) => {

    this.formArticle.content = html

    }

    editor.create()

    }

    }

    代码如下:

    .editorMenu {

    border: 1px solid #ccc;

    }

    .editor {

    margin-top: -1px;//将多出来的一像素边框隐藏

    border: 1px solid #ccc;

    min-height: 400px;//编辑框最小高度

    height:auto;//编辑框高度超过最小高度会根据内容高度自适应

    }

    3、上传图片

    (1)editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片

    (2)editor.customConfig.uploadImgServer = '/upload' // 上传服务器端地址

    /upload是上传图片的服务器端接口,接口返回的数据格式如下(固定的,否则会取不到图片地址!!!):

    代码如下:

    {

    // errno 即错误代码,0 表示没有错误。

    // 如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理

    "errno": 0,

    // data 是一个数组,返回若干图片的线上地址

    "data": [

    "图片1地址",

    "图片2地址",

    "……"

    ]

    }

    这些基本就够用了。官网也写得很详细滴

    wangeditor3+vue2.0简单例子

    把wangeditor作为组件的形式使用

    子组件中

    代码如下:

    import E from 'wangeditor'

    export default {

    name: 'editorElem',

    data () {

    return {

    editorContent: '',

    }

    },

    props:['catchData'], //接收父组件的方法

    mounted() {

    var editor = new E(this.$refs.editorElem) //创建富文本实例

    editor.customConfig.onchange = (html) => {

    this.editorContent = html

    this.catchData(html) //把这个html通过catchData的方法传入父组件

    }

    editor.customConfig.uploadImgServer = '你的上传图片的接口'

    editor.customConfig.uploadFileName = '你自定义的文件名'

    editor.customConfig.uploadImgHeaders = {

    'Accept': '*/*',

    'Authorization':'Bearer ' + token //头部token

    }

    editor.customConfig.menus = [ //菜单配置

    'head',

    'list', // 列表

    'justify', // 对齐方式

    'bold',

    'fontSize', // 字号

    'italic',

    'underline',

    'image', // 插入图片

    'foreColor', // 文字颜色

    'undo', // 撤销

    'redo', // 重复

    ]

    //下面是最重要的的方法

    editor.customConfig.uploadImgHooks = {

    before: function (xhr, editor, files) {

    // 图片上传之前触发

    // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件

    // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传

    // return {

    // prevent: true,

    // msg: '放弃上传'

    // }

    },

    success: function (xhr, editor, result) {

    // 图片上传并返回结果,图片插入成功之后触发

    // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果

    this.imgUrl=Object.values(result.data).toString()

    },

    fail: function (xhr, editor, result) {

    // 图片上传并返回结果,但图片插入错误时触发

    // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果

    },

    error: function (xhr, editor) {

    // 图片上传出错时触发

    // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象

    },

    timeout: function (xhr, editor) {

    // 图片上传超时时触发

    // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象

    },

    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置

    // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)

    customInsert: function (insertImg, result, editor) {

    // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)

    // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果

    // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:

    let url = Object.values(result.data) //result.data就是服务器返回的图片名字和链接

    JSON.stringify(url) //在这里转成JSON格式

    insertImg(url)

    // result 必须是一个 JSON 格式字符串!!!否则报错

    }

    }

    editor.create()

    },

    父组件中

    代码如下:

    import wangeditor from './wangeditor'

    data(){

    return{

    content:""

    }

    },

    methods:{

    catchData(value){

    this.content=value //在这里接受子组件传过来的参数,赋值给data里的参数

    }

    },

    components: {

    wangeditor

    },

    上面字最多的地方好好看清楚,只有做了customInsert: function (insertImg, result, editor){}里的步骤,图片才会在富文本中显示,否则是不会自动显示。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持512笔记。

    注:关于轻量级富文本编辑器wangEditor结合vue使用方法示例的内容就先介绍到这里,更多相关文章的可以留意512笔记的其他信息。

    关键词:vue.js

    展开全文
  • 移动端富文本编辑器,非常好用,后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器,非常好用,后台配置也简单。按照wangEditor官网的配置教程就可以。移动端富文本编辑器,非常好用,后台...
  • 富文本编辑器wangEditor【全屏】【源码】插件 使用方法: 依赖jquery,须先约会jquery ♡wangEditor-plugin.css和wangEditor-plugin.js两个文件 在wangEditor的create方法调用后,再调用插件的初始化方法,如: var...
  • HTML富文本编辑器wangEditor的使用

    千次阅读 2018-12-20 17:52:45
    HTML富文本编辑器wangEditor的使用 官网 http://www.wangeditor.com/ 用法官方文档已经讲得很清楚了,我这里只贴出代码,方便以后自己粘贴复制用 用到的CSS wangEditor-fullscreen-plugin.css @CHARSET "UTF-...

    官网

    http://www.wangeditor.com/
    法官方文档已经讲得很清楚了,我这里只贴出代码,方便以后自己粘贴复制用,有兴趣的可以去看看官网。

    项目结构

    │  rich_text.html
    │
    ├─css
    │      wangEditor-fullscreen-plugin.css
    │
    └─js
            wangEditor-fullscreen-plugin.js
    

    源码

    代码很简单,注释也很详细,直接看就好了。

    <!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="utf-8" />
    	<!--适配手机-->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    	<title>富文本编辑器</title>
    	<!-- 引入全屏 CSS,如不需要全屏功能可注释掉 -->
    	<link rel="stylesheet" href="css/wangEditor-fullscreen-plugin.css" />
    	<style>
    		/* table 样式 */
    		table {
    			border-top: 1px solid #ccc;
    			border-left: 1px solid #ccc;
    		}
    
    		table td,
    		table th {
    			border-bottom: 1px solid #ccc;
    			border-right: 1px solid #ccc;
    			padding: 3px 5px;
    		}
    
    		table th {
    			border-bottom: 2px solid #ccc;
    			text-align: center;
    		}
    
    		/* blockquote 样式 */
    		blockquote {
    			display: block;
    			border-left: 8px solid #d0e5f2;
    			padding: 5px 10px;
    			margin: 10px 0;
    			line-height: 1.4;
    			font-size: 100%;
    			background-color: #f1f1f1;
    		}
    
    		/* code 样式 */
    		code {
    			display: inline-block;
    			*display: inline;
    			*zoom: 1;
    			background-color: #f1f1f1;
    			border-radius: 3px;
    			padding: 3px 5px;
    			margin: 0 3px;
    		}
    
    		pre code {
    			display: block;
    		}
    
    		/* ul ol 样式 */
    		ul,
    		ol {
    			margin: 10px 0 10px 20px;
    		}
    
    		#editor .w-e-text-container {
    			height: 800px;
    		}
    	</style>
    </head>
    
    <body>
    	<div id="editor">
    
    	</div>
    
    	<div id="code">
    
    	</div>
    
    	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    	<script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    	<!--全屏使用 JS,如不需要全屏功能可注释掉-->
    	<script type="text/javascript" src="js/wangEditor-fullscreen-plugin.js"></script>
    	<script type="text/javascript">
    		var E = window.wangEditor;
    		var editor = new E('#editor')
    
    		//配置信息
    		var config = editor.customConfig;
    
    		// 自定义配置颜色(字体颜色、背景色)
    		config.colors = [
    			'#000000',
    			'#eeece0',
    			'#1c487f',
    			'#4d80bf',
    			'#c24f4a',
    			'#8baa4a',
    			'#7b5ba1',
    			'#46acc8',
    			'#f9963b',
    			'#ffffff'
    		]
    
    		//lang配置项配置多语言
    		config.lang = {
    			'设置标题': 'title',
    			'正文': 'p',
    			'链接文字': 'link text',
    			'链接': 'link',
    			'上传图片': 'upload image',
    			'上传': 'upload',
    			'创建': 'init',
    			'设置列表': 'set something'
    			// 还可自定添加更多
    		}
    
    		// 表情面板可以有多个 tab ,因此要配置成一个数组。数组每个元素代表一个 tab 的配置
    		config.emotions = [{
    			// tab 的标题
    			title: '表情',
    			// type -> 'emoji' / 'image'
    			type: 'image',
    			// content -> 数组
    			content: [{
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif",
    				alt: "[草泥马]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif",
    				alt: "[神马]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif",
    				alt: "[浮云]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif",
    				alt: "[给力]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif",
    				alt: "[围观]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif",
    				alt: "[威武]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif",
    				alt: "[熊猫]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif",
    				alt: "[兔子]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif",
    				alt: "[奥特曼]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif",
    				alt: "[囧]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif",
    				alt: "[互粉]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif",
    				alt: "[礼物]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif",
    				alt: "[呵呵]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_thumb.gif",
    				alt: "[嘻嘻]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/laugh.gif",
    				alt: "[哈哈]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/14/tza_thumb.gif",
    				alt: "[可爱]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/kl_thumb.gif",
    				alt: "[可怜]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a0/kbsa_thumb.gif",
    				alt: "[挖鼻屎]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f4/cj_thumb.gif",
    				alt: "[吃惊]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/shamea_thumb.gif",
    				alt: "[害羞]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c3/zy_thumb.gif",
    				alt: "[挤眼]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/29/bz_thumb.gif",
    				alt: "[闭嘴]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/71/bs2_thumb.gif",
    				alt: "[鄙视]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/lovea_thumb.gif",
    				alt: "[爱你]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9d/sada_thumb.gif",
    				alt: "[泪]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/19/heia_thumb.gif",
    				alt: "[偷笑]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8f/qq_thumb.gif",
    				alt: "[亲亲]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/b6/sb_thumb.gif",
    				alt: "[生病]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/mb_thumb.gif",
    				alt: "[太开心]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/17/ldln_thumb.gif",
    				alt: "[懒得理你]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/98/yhh_thumb.gif",
    				alt: "[右哼哼]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/zhh_thumb.gif",
    				alt: "[左哼哼]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a6/x_thumb.gif",
    				alt: "[嘘]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/cry.gif",
    				alt: "[衰]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/73/wq_thumb.gif",
    				alt: "[委屈]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9e/t_thumb.gif",
    				alt: "[吐]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f3/k_thumb.gif",
    				alt: "[打哈欠]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/27/bba_thumb.gif",
    				alt: "[抱抱]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7c/angrya_thumb.gif",
    				alt: "[怒]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/5c/yw_thumb.gif",
    				alt: "[疑问]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a5/cza_thumb.gif",
    				alt: "[馋嘴]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/88_thumb.gif",
    				alt: "[拜拜]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/e9/sk_thumb.gif",
    				alt: "[思考]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/24/sweata_thumb.gif",
    				alt: "[汗]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7f/sleepya_thumb.gif",
    				alt: "[困]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6b/sleepa_thumb.gif",
    				alt: "[睡觉]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/90/money_thumb.gif",
    				alt: "[钱]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0c/sw_thumb.gif",
    				alt: "[失望]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/cool_thumb.gif",
    				alt: "[酷]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8c/hsa_thumb.gif",
    				alt: "[花心]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/49/hatea_thumb.gif",
    				alt: "[哼]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/36/gza_thumb.gif",
    				alt: "[鼓掌]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/dizzya_thumb.gif",
    				alt: "[晕]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1a/bs_thumb.gif",
    				alt: "[悲伤]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/62/crazya_thumb.gif",
    				alt: "[抓狂]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/h_thumb.gif",
    				alt: "[黑线]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/yx_thumb.gif",
    				alt: "[阴险]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/nm_thumb.gif",
    				alt: "[怒骂]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/hearta_thumb.gif",
    				alt: "[心]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ea/unheart.gif",
    				alt: "[伤心]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/pig.gif",
    				alt: "[猪头]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d6/ok_thumb.gif",
    				alt: "[ok]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/ye_thumb.gif",
    				alt: "[耶]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/good_thumb.gif",
    				alt: "[good]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c7/no_thumb.gif",
    				alt: "[不要]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d0/z2_thumb.gif",
    				alt: "[赞]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/come_thumb.gif",
    				alt: "[来]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/sad_thumb.gif",
    				alt: "[弱]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/lazu_thumb.gif",
    				alt: "[蜡烛]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/cake.gif",
    				alt: "[蛋糕]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d3/clock_thumb.gif",
    				alt: "[钟]"
    			}, {
    				src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1b/m_thumb.gif",
    				alt: "[话筒]"
    			}]
    		}]
    
    		editor.customConfig.onchange = function (html) {
    			// html 即变化之后的内容
    			$('#code').text(html)
    		}
    
    		// 或者 var editor = new E( document.getElementById('editor') )
    		editor.create();
    
    		//富文本编辑器wangEditor的全屏插件,适用于V3,在wangEditor的create方法调用后,再调用插件的初始化方法
    		E.fullscreen.init('#editor');
    	</script>
    </body>
    
    </html>
    

    全屏插件

    CSS

    wangEditor-fullscreen-plugin.css

    @CHARSET "UTF-8";
    
    .w-e-toolbar {
    	flex-wrap: wrap;
    	-webkit-box-lines: multiple;
    }
    
    .w-e-toolbar .w-e-menu:hover{
    	z-index: 10002!important;
    }
    
    .w-e-menu a {
    	text-decoration: none;
    }
    
    .fullscreen-editor {
    	position: fixed !important;
    	width: 100% !important;
    	height: 100% !important;
    	left: 0px !important;
    	top: 0px !important;
    	background-color: white;
    	z-index: 9999;
    }
    
    .fullscreen-editor .w-e-text-container {
    	width: 100% !important;
    	height: 95% !important;
    }
    
    ._wangEditor_btn_fullscreen{
    	color: #999;
    }
    
    ._wangEditor_btn_SourceCode{
    	color: #999;
    }
    

    JS

    wangEditor-fullscreen-plugin.js

    window.wangEditor.fullscreen = {
    	// editor create之后调用
    	init: function(editorSelector) {
    		//添加查看全屏按钮
    		$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="###" οnclick="window.wangEditor.fullscreen.toggleFullscreen(\'' + editorSelector + '\')">全屏</a></div>');
    		//添加查看源码按钮
    		$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_SourceCode" href="###" οnclick="window.wangEditor.fullscreen.toggleSourceCode(\'' + editorSelector + '\')">源码</a></div>');
    
    	},
    	toggleFullscreen: function(editorSelector) {
    		$(editorSelector).toggleClass('fullscreen-editor');
    		if($(editorSelector + ' ._wangEditor_btn_fullscreen').text() == '全屏') {
    			$(editorSelector + ' ._wangEditor_btn_fullscreen').text('退出全屏');
    		} else {
    			$(editorSelector + ' ._wangEditor_btn_fullscreen').text('全屏');
    		}
    	},
    	toggleSourceCode: function(editorSelector) {
    		$('#code').text(editor.txt.html());
    	}
    };
    

    这两个是直接使用的CDN

    • jquery.min.js

    • wangEditor.min.js

    效果

    在这里插入图片描述

    展开全文
  • laravel-admin 集成富文本编辑器wangEditor教程 运行环境: 系统 win10 , 环境:集成环境 phpstudy8 WNMP php: >=7.0.0, barryvdh/laravel-ide-helper: ^2.4, doctrine/dbal: ~2.3, encore/laravel-admin: 1.5...
  • 前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 先敬上官网:http://www.wangeditor.com/index.html wangeditor是一个萌新富文本编辑器,基于js和css,重点在于...
  • 简洁富文本编辑器wangEditor

    千次阅读 2018-08-23 15:39:54
    GIT免费下载地址:https://github.com/wangfupeng1988/wangEditor/releases 创建方式有两种,非常简单 ...欢迎使用 wangEditor 富文本编辑器&lt;/p&gt; &lt;/div&gt; js: // 引用 var E = ...
  • 富文本编辑器的使用 本次用的富文本编辑器框架为: 原因:简介,轻量; 首先下载测试文档,查看代码:(vue实例) 首先创建编辑器: // 引入 wangEditor import wangEditor from 'wangeditor' mounted() { ...
  • 使用npm下载: `npm install wangeditor` 2、 创建实例 (1)基本用法: <div id=editor class=editor></div> [removed] import E from 'wangeditor' export default { name: 'editor', mounted () { ...
  • 1、引用 wangEditor 相关js 和 css 下载地址:https://files.cnblogs.com/files/kitty-blog/WangEditor.zip 3、页面: <d...
  • THINKPHP5.1使用富文本编辑器wangEditor

    千次阅读 2018-09-20 11:25:59
    1、wangEditor 从v3版本开始不支持 textarea ,但是可以通过onchange来实现 textarea 中提交富文本内容。 2、div是无法向后台传递值的,F12看下编辑器div的属性就知道了。 整体思路: 0、创建一个div用来显示出.....
  • 项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wangEditor使用文档 ...
  • wangEditor-mobile —— 真正适用于手机操作的编辑器! 标签:wangEditor
  • npm安装:npm i wangeditor --save 封装: <template> <div> <div ref="editor" ></div> </div> </template> <script> import WangEditor from "wangeditor" ...
  • 富文本编辑器wangEditor的使用

    千次阅读 2017-10-02 11:34:22
    最近在研究富文本编辑器,于是在网上搜到了一些比较好用的,其中之一就是wangEditor。其个人网站上的教程(wangEditor3使用手册)已经很详细了,当然关于图片上传的地方,还是需要记录一下方便以后使用。
  • 富文本编辑器wangEditor2的基本配置

    千次阅读 2018-08-07 09:54:27
    对于富文本编辑器主要有几种,他们的有点缺点如下: 1.KindEditor:优点:比较轻,轻量版  缺点:目前来说,不可自定义字体字号【2018-04-01】 2.UEditor:优点:拥有最丰富的功能。  缺点:1.换行之后,下一...
  • wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。 官网:www.wangEditor.com 文档:doc.wangEditor.com 源码:github.com/wangeditor-team/wangEditor 踩坑 1、调用Editor提供的方法时,浏览器报错...
  • UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许...项目中创建wangEditor demo欢迎使用 wangEditor 富文本编辑器var E = window.wangEd...
  • 找现成的文本编辑器 ...网上有很多介绍HTML富文本编辑器的文章,介绍了比如百度的UEditor、CKeditor等等,但是下载了很久都下载失败,最后发现这个wangEditor,它有一个官方文档讲得挺详细的,链接如下...

空空如也

空空如也

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

富文本编辑器wangeditor