npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-wangeditor-simple

v1.7.3

Published

A vue plugin base on wangeditor 3.0

Downloads

46

Readme

vue-wangeditor-simple

这个是基于wangeditor v3.0+ 版本写成的vue插件

wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。支持IE10+浏览器。

安装及使用

npm install vue-wangeditor-simple --save

// main.js
import VueWangeditor from 'vue-wangeditor-simple'
Vue.use(VueWangeditor)

// app.vue
<div class="editor_wrap">
    <vue-wangeditor id="editor" :options="options" v-model="content" :init-content="initContent" :disabled="true"></vue-wangeditor>
    <vue-wangeditor id="editor1" :options="options1" v-model="content1" @get-text="getText"></vue-wangeditor>
</div>

data () {
    return {
      initContent: '<p>要初始化的内容</p>'
      content1: '', // 包含html标签
      text1: '', // 不含html标签,纯文本
      options1: {
        width: '900px',
        height: '500px',
      },
      content: '<p>edit here</p>',
      text: '',
      options: {
      width: '90%', // 自定义单位,字符串
      height: '800px', // 自定义单位,字符串
      // 更多配置项请看官网或者官网文档
        menus: [
        width: '900px',
      height: '500px',
      menus: [
        'head',  // 标题
        'bold',  // 粗体
        'italic',  // 斜体
        'underline',  // 下划线
          ...
        'redo',  // 重复
        /* ---- 新增 ---- */
        'clearStyle', //清除文字的样式
        'clearFormat', //清除文字的格式
        'clearAll', //一键清空编辑器
        'insertCode', //插入带类名的代码
        // <pre class="className"><code class="className">hellow world</code></pre>
        'fullscreen' // 全屏
      ],
        ],
        pasteFilterStyle: true,  // 打开/关闭粘贴样式的过滤
        ...
      }
    }
  }

优化

  • props 新增init-content,传入要初始化的内容

  • 由于之前版本都是检测v-model的变化,会影响输入,故将两者分开。

  • 2018-11-11 update:

  • props 新增disabled,控制编辑器的可编辑状态

  • 2019-3-28 update:

  • 移除:text.sync="text",新增@get-text="getText",使用事件代替.sync

getText (text) {
  console.log(text)
}

新增

1、clearStyle: 清除编辑器内所有文字的样式(无法撤销)

  • 等同于粘贴样式的过滤的作用,去除标签内的style,class属性以及<style>标签
  • 文档里说 pasteFilterStyle,pasteTextHandle配置暂时对 IE 无效 ,可以在配置menus里添加 clearStyle ,复制进去后手动清除样式,可以清除word文档复制过来的样式(在IE已测试)。
  • 若有清除不了的,请报issues。

2、clearFormat: 清除格式(无法撤销)

  • 这功能会把所有的文字格式化为正文,即把所有HTML标签替换为<p>标签
  • 排版可能会有错乱(应该只是换行了而已),请自行调整

3、clearAll: 一键清空编辑器功能

  • 一键清空编辑器的所有内容

4、fullscreen: 全屏/退出全屏功能

5、insertCode: 插入带类名的代码

  <pre class="className"><code class="className">hellow world</code></pre>

为了方便在网页中使用插件(prismjs)来显示代码高亮

欢迎前来starissues