[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":25,"_26":27,"_28":29,"_30":16,"_31":32,"_33":34},"loginname","lpreterite","page",1,"limit",20,"total","id","10568","avatar_url","http://www.gravatar.com/avatar/c395c199d63e45d334b926a1b7b4774e?size=48","githubUsername","","create_at","2013-10-25 08:09:51.19","score",5,"topic_count","reply_count",0,"is_star",false,{"_20":36,"_37":21,"_38":39,"_40":41,"_42":43,"_44":45,"_46":34,"_47":34,"_31":32,"_48":49,"_26":45,"_50":51},"25287","author_id","tab","share","content","# 唠叨\r\n最近公司在开发一个社交管理后台，看一遍线框图后发现需要富文本编辑器我便找会上两年开发的[vue-tinymce](https://github.com/lpreterite/vue-tinymce)组件，可惜的是组件支持还是vue1，所以这个组件需要升级支持vue2。然后有朋友问我为何不用现有的？因为看一圈回来发觉比较不靠谱的啊，全部都需要赋予id值（明明可以内部处理的为何要外部传入？），实在看不下去结果还是完善自己写的这个没多少收藏的库吧:)\r\n\r\n# 关于 vue-tinymce\r\n[vue-tinymce](https://github.com/lpreterite/vue-tinymce) 只是基于tinymce封装的vue组件，让用vue的同学能快速使用tinymce富文本编辑器。\r\n## 过程\r\n### 从tinymce开始\r\n接下来分享一些开发过程中的一些问题，首先要学会**初次化**，我们先来看看tinymce的官方例子：\r\n```\r\n\r\n\r\n\r\n \r\n\r\n\r\n \r\n \r\n\r\n\r\n```\r\n能看出tinymce需要引入全局\b才能使用，就没其他方式了？于是我找了一下[npmjs.org](https://www.npmjs.com/search?q=tinymce)有的有的，可以用import引入。\r\n\r\n于是不用想立马写个例子试试\r\n```\r\n# index.html\r\n\r\n\r\n\r\n \r\n \r\n\r\n\r\n\r\n# main.js\r\nimport tinymce form 'tinymce';\r\ntinymce.init({\r\n selector:'textarea'\r\n //or\r\n // target: document.querySelector('textarea')\r\n});\r\n```\r\n结果发现tinymce是加载出来了，但是样式和图标那些没了...好吧不折腾还是直接引入吧目前来说问题不大。（看看其他库都是直接引入，我不折腾算是对了）\r\n\r\n好了，第一步完成了，接下来第二步是**获得/设定富文本内容**，来看看以下代码：\r\n```\r\n# main.js\r\ntinymce.init({\r\n selector: 'textarea',\r\n // 获得editor，当有多个textarea实例时会多次调用setup\r\n setup: (editor)=> {\r\n // 初次化编辑器\r\n editor.on('init', ()=>{\r\n // 设置默认值\r\n editor.setContent('

Default Value!

');\r\n // 注册事件\r\n editor.on('input change undo redo', ()=>{\r\n // 获得编辑结果\r\n console.log(editor.getContent());\r\n });\r\n });\r\n }\r\n})\r\n```\r\n上面这段是已总结怎样获得或设置富文本内容，tinymce知道怎样用就能开始写vue组件。\r\n\r\n### 需要怎样的vue组件\r\n作为组件配置当然可以自己设定的固需要`setting`的传入，可能也需要在初次化动手再自定义一些功能所以加上`setup`，再来是获得`editor`进行处理一些富文本数据。起步代码是这样的：\r\n```\r\n\r\n\r\n```\r\n\r\n#### 自管理id\r\n对比其他vue-tinymce组件都要传入id我感到很不解，因为根本没这个必要，所以接下来先解决id自管理问题。\r\n```\r\nexport default {\r\n ...\r\n // 这里我用render写在template绑定:id一样可以\r\n render(createElement){\r\n return createElement('textarea', {\r\n attrs: {\r\n id: this.id\r\n }\r\n });\r\n },\r\n data(){\r\n return {\r\n //生成id\r\n id: 'vue-tinymce-'+Date.now(),\r\n }\r\n }\r\n ...\r\n}\r\n```\r\n\r\n#### 支持v-model双向绑定\r\n这个简单，只要传入字段(`props`)包含`value`，使用`v-model`就能从`value`获得绑定数据，然后当富文本编辑器数据跟新时使用`$emit('input', value)`方法便能通知变化跟新value。\r\n```\r\nexport default {\r\n ...\r\n watchs:{\r\n value(val){\r\n // 当传入值变化时跟新富文本内容\r\n tinymce.get(this.id).setContent(val);\r\n }\r\n },\r\n mounted(){\r\n const setting = {\r\n ...this.setting,\r\n {\r\n selector: `#${this.id}`,\r\n setup: (editor)=> {\r\n this.setup(editor);\r\n this.editor = editor;\r\n editor.on('init', ()=>{\r\n editor.setContent(this.value);\r\n editor.on('input change undo redo', ()=>{\r\n this.$emit('input', editor.getContent());\r\n });\r\n });\r\n }\r\n }\r\n };\r\n tinymce.init(setting);\r\n }\r\n ...\r\n}\r\n```\r\n到这里将近完成了，可惜\b这次问题静静地出现了：输入一个字光标就刷到最前面。接下来得解决这问题，思路我猜应该是editor的input事件触发`$emit('input')`然后进入watch调用了`editor.setContent()`方法后导致光标更新，这里解决办法是当前编辑不让触发`editor.seContent()`就不会导致光标更新（当然还有其他方法，比如记录光标位置）。\r\n\r\n```\r\nconst INIT = 0;\r\nconst INPUT = 1;\r\nconst CHANGED = 2;\r\n\r\nexport default {\r\n ...\r\n watchs:{\r\n value(val){\r\n // 只在外部引起变化时才跟新编辑器\r\n if(this.status === CHANGED || selt.status === INIT) return this.status = INPUT;\r\n tinymce.get(this.id).setContent(val);\r\n }\r\n },\r\n mounted(){\r\n const setting = {\r\n ...this.setting,\r\n {\r\n selector: `#${this.id}`,\r\n setup: (editor)=> {\r\n this.setup(editor);\r\n this.editor = editor;\r\n editor.on('init', ()=>{\r\n editor.setContent(this.value);\r\n editor.on('input change undo redo', ()=>{\r\n // 只在用户输入导致事件相应时才更新value数据\r\n if(this.status === INPUT || this.status === INIT) return this.status = CHANGED;\r\n this.$emit('input', editor.getContent());\r\n });\r\n });\r\n }\r\n }\r\n };\r\n tinymce.init(setting);\r\n }\r\n ...\r\n}\r\n```\r\n当value从外部更新时才更新编辑器内容，编辑器触发的内容更新并不需要绕一圈回来再更新编辑器，这样便能解决光标问题。\r\n\r\n## 结果\r\n就在这[vue-tinymce](https://github.com/lpreterite/vue-tinymce)，一些细节不补充，建议看源码。以下是使用方法：\r\n\r\n### 安装\r\n```\r\n$ npm i -D lpreterite/vue-tinymce\r\n```\r\n\r\n### 使用\r\n```\r\n# index.html\r\n

\r\n \r\n \r\n

\r\n\r\n\r\n\r\n# main.js\r\nimport Vue from 'vue';\r\nimport VueTinymce from 'vue-tinymce.vue';\r\n\r\nnew Vue({\r\n el: '#app',\r\n data: function(){\r\n return {\r\n content: '

html content

',\r\n setting: {\r\n height: 200,\r\n language_url: \"langs/zh_CN.js\",\r\n block_formats: \"Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;\"\r\n }\r\n }\r\n }\r\n})\r\n```\r\n目录结构\r\n```\r\ndist/\r\n- index.html\r\n- main.js\r\n- lang/\r\n -zh_CN.js\r\nnode_modules/\r\n- tinymce/\r\n```\r\n\r\n# 遇到的问题\r\n刚开始想写vue2组件我跑了一圈github也没发现比较好的例子，构建工具及配置直接能用的并没有，参考的倒是找到一些。webpack配置算是个麻烦事，想尽量简化工作就得动动脑子。\r\n\r\n[vue-cli](https://github.com/vuejs/vue-cli)是个好东西，能帮你快速创建项目，如想创建vue的单页项目可以这样使用：\r\n```\r\n$ vue init webpack-simple my-product\r\n```\r\n可是没见到有快速创建vue组件的项目，所以这里我写了一个[lpreterite/vue-component-project](https://github.com/lpreterite/vue-component-project)提供给大家使用。\r\n\r\n使用方法：\r\n```\r\n$ vue init lpreterite/vue-component-project my-vue-component\r\n\r\n```\r\n一路回车之后会提示\r\n```\r\n vue-cli · Generated \"my-vue-component\".\r\n\r\n To get started:\r\n \r\n cd my-vue-component\r\n npm install\r\n npm run dev \r\n npm run hot.\r\n```\r\n项目就这样创建好来👌，剩下交给你们发挥。\r\n\r\n这遍文章算是把手上这个大项目的副产品吧 :) 。希望日后有点时间继续分享其他在经验及一些大项目下的组件，欢迎评论和PR！\r\n> [前端手札——vue组件vue-tinymce开发经验分享](https://segmentfault.com/a/1190000009621081)","title","前端手札——vue组件vue-tinymce开发经验分享","last_reply_at","2017-06-01 09:14:21.118","good","top","visit_count",7185,"author",{"_13":14,"_22":23}]