vue2 利用 tinymce富文本编辑器

莫张周刘王  金牌会员 | 2024-8-4 04:33:41 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 698|帖子 698|积分 2094

注意：
在vue2中利用tinymce有版本限制的，最新版都是支持v3的，官方也阐明了；
vue2中不能利用@tinymce/tinymce-vue 为4以上的版本；
利用步骤：

1、vue项目中安装 tinymce；
npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S
2、将富文本编译器封装成组件；
在src/components目次下新建一个tinymce文件夹（每个文件的代码在文章末了提供）

3、将组件引入到页面中进行利用；
哪个页面利用富文本编译器 就在哪个页面引入组件；
  1. <tinymce
  2.   v-model="addContent"
  3.   @input="(info) => tinymceInput(info)"
  4.    id="tinymceId"
  5. ></tinymce>
  7. import tinymce from '@/components/tinymce/index.vue' // 注意引入路径
  8. components: { tinymce },
  10. data () {
  11.   return {
  12.     addContent: '',
  13.   }
  14. },
  15. methods: {
  16.         tinymceInput (info) {
  17.        console.log(info,'info------------');
  18.      },
  19. },
复制代码
注意：可能会遇到的题目
import “tinymce/icons/default” 路径找不到需要升级tinymce版本
解决方法：
终端执行：npm i tinymce -S
代码：

index.vue

  1. <template>
  2.   <div class="tinymce-editor">
  3.     <editor
  4.       :id="id"
  5.       v-model="myValue"
  6.       :init="init"
  7.       :disabled="disabled"
  8.       @onClick="onClick"
  9.     ></editor>
  10.   </div>
  11. </template>
  13. <script>
  14. // 引入组件
  15. import tinymce from 'tinymce'
  16. import editor from '@tinymce/tinymce-vue'
  18. // 引入富文本编辑器主题的js和css
  19. import 'tinymce/skins/content/default/content.css'
  20. import 'tinymce/themes/silver'
  21. import 'tinymce/icons/default/icons' // 解决了icons.js 报错问题，不用定制icon可以忽略
  23. // 编辑器扩展插件plugins
  24. import 'tinymce/plugins/paste' // 粘贴插件
  25. import 'tinymce/plugins/image' // 上传图片插件
  26. import 'tinymce/plugins/media'// 插入视频插件
  27. import 'tinymce/plugins/link' // 超链接
  28. import 'tinymce/plugins/code' // 源码
  29. import 'tinymce/plugins/table' // 插入表格插件
  30. import 'tinymce/plugins/lists' // 列表插件
  31. import 'tinymce/plugins/wordcount' // 字数统计插件
  32. import 'tinymce/plugins/preview' // 预览
  34. // import 'tinymce/plugins/table'
  35. import 'tinymce/plugins/lists'
  36. import 'tinymce/plugins/colorpicker'
  37. import 'tinymce/plugins/textcolor'
  38. import "tinymce/plugins/code";
  39. import "tinymce/plugins/link";
  40. import "tinymce/plugins/advlist";
  41. import "tinymce/plugins/anchor";
  42. import "tinymce/plugins/codesample";
  43. import "tinymce/plugins/hr";
  44. import "tinymce/plugins/fullscreen";
  45. import "tinymce/plugins/textpattern";
  46. import "tinymce/plugins/searchreplace";
  47. import "tinymce/plugins/autolink";
  48. import "tinymce/plugins/directionality";
  49. import "tinymce/plugins/visualblocks";
  50. import "tinymce/plugins/visualchars";
  51. import "tinymce/plugins/template";
  52. import "tinymce/plugins/charmap";
  53. import "tinymce/plugins/nonbreaking";
  54. import "tinymce/plugins/insertdatetime";
  55. import "tinymce/plugins/autoresize";
  56. import "tinymce/plugins/pagebreak";
  57. import "tinymce/plugins/print";
  58. import "tinymce/plugins/save";
  59. import "tinymce/plugins/tabfocus";
  61. // import 'tinymce/plugins/contextmenu'
  62. // import "tinymce/plugins/imagetools";
  63. // import "tinymce/plugins/autosave";
  64. // import "tinymce/plugins/emoticons";
  65. // import "tinymce/plugins/spellchecker";
  68. import plugins from './plugins'
  69. import toolbar from './toolbar'
  71. export default {
  72.   name: 'tinymce',
  73.   components: { editor },
  74.   props: {
  75.     value: {
  76.       // 默认的富文本内容
  77.       type: String,
  78.       default: ''
  79.     },
  80.     id: {
  81.       type: String,
  82.       default: ''
  83.     },
  84.     disabled: {
  85.       // 禁用
  86.       type: Boolean,
  87.       default: false
  88.     },
  89.   },
  90.   data () {
  91.     return {
  92.       init: {
  93.         language_url: '/tinymce/langs/zh_CN.js', // 语言包路径
  94.         language: 'zh_CN', // 语言
  95.         skin_url: '/tinymce/skins/ui/oxide', // 主题路径
  96.         content_css: '/tinymce/skins/ui/oxide/content.css', // 为编辑区指定css文件,该参数的值是你的css文件路径，可使用绝对路径或相对路径。
  97.         min_height: 80,
  98.         // height: 500,
  99.         // width: this.calcWidth(),
  100.         plugins: plugins, // 指定需加载的插件
  101.         toolbar: toolbar, // 自定义工具栏
  102.         toolbar_mode: 'sliding', // 工具栏模式
  103.         // paste_data_images: true, // 允许粘贴图片
  104.         branding: false, // 不显示富文本支持方
  105.         statusbar: false, // 隐藏状态栏
  106.         menubar: false, // 禁用菜单栏
  107.         theme: 'silver', // 默认主题
  108.         placeholder: '请输入',
  109.         fontsize_formats: "12px 14px 16px 18px 20px 22px 24px 36px 48px 56px 72px",
  110.         font_formats: "宋体='宋体';仿宋='仿宋';微软雅黑='微软雅黑';楷体='楷体';隶书='隶书';幼圆='幼圆';Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Helvetica=helvetica;",
  111.         content_style: `
  112.         body { font-family:宋体,Arial,sans-serif; font-size:14px;line-height: 1.5; }` +
  113.         `table { width: 100% !important;}` + `td { border: 1px solid #ccc !important; }`,
  114.         zIndex: 1101,
  115.         style_formats_merge: false, //是否将style_formats设置中的样式附加到默认样式格式还是完全替换它们。true为附加
  116.         style_formats_autohide: true, // 隐藏当前不可用的样式列表
  117.         object_resizing: false, //禁用表格内联样式拖拽拉伸
  118.         table_resize_bars: false,//禁用表格单元格拖拽拉伸
  119.         forced_root_block: '', // 删除在tinymce中自动添加的p标签
  120.         force_br_newlines : true,
  121.         force_p_newlines : false,
  123.         // style_formats: [
  124.         //   // {
  125.         //   //   title: '首行缩进',
  126.         //   //   block: 'p',
  127.         //   //   styles: { 'text-indent': '2em' }
  128.         //   // },
  129.         //   {
  130.         //     title: 'Headings',
  131.         //     items: [
  132.         //       { title: 'Heading 1', format: 'h1' },
  133.         //       { title: 'Heading 2', format: 'h2' },
  134.         //       { title: 'Heading 3', format: 'h3' },
  135.         //       { title: 'Heading 4', format: 'h4' },
  136.         //       { title: 'Heading 5', format: 'h5' },
  137.         //       { title: 'Heading 6', format: 'h6' }
  138.         //     ]
  139.         //   },
  140.         //   // {
  141.         //   //   title: 'Inline',
  142.         //   //   items: [
  143.         //   //     { title: 'Bold', format: 'bold' },
  144.         //   //     { title: 'Italic', format: 'italic' },
  145.         //   //     { title: 'Underline', format: 'underline' },
  146.         //   //     { title: 'Strikethrough', format: 'strikethrough' },
  147.         //   //     { title: 'Superscript', format: 'superscript' },
  148.         //   //     { title: 'Subscript', format: 'subscript' },
  149.         //   //     { title: 'Code', format: 'code' }
  150.         //   //   ]
  151.         //   // },
  152.         //   {
  153.         //     title: 'Blocks',
  154.         //     items: [
  155.         //       { title: 'Paragraph', format: 'p' },
  156.         //       { title: 'Div', format: 'div' },
  157.         //       // { title: 'Blockquote', format: 'blockquote' },
  158.         //       // { title: 'Pre', format: 'pre' }
  159.         //     ]
  160.         //   },
  161.         //   {
  162.         //     title: 'Align',
  163.         //     items: [
  164.         //       { title: 'Left', format: 'alignleft' },
  165.         //       { title: 'Center', format: 'aligncenter' },
  166.         //       { title: 'Right', format: 'alignright' },
  167.         //       { title: 'Justify', format: 'alignjustify' }
  168.         //     ]
  169.         //   },
  170.         //   // {
  171.         //   //   title: "行高",
  172.         //   //   items: [
  173.         //   //     { title: "1", block: "p", styles: { "line-height": "1.0" } },
  175.         //   //     { title: "1.5", block: "p", styles: { "line-height": "1.5" } },
  177.         //   //     { title: "1.75", block: "p", styles: { "line-height": "1.75" } },
  179.         //   //     { title: "2", block: "p", styles: { "line-height": "2" } },
  181.         //   //     { title: "3", block: "p", styles: { "line-height": "3" } },
  183.         //   //     { title: "4", block: "p", styles: { "line-height": "4" } },
  185.         //   //     { title: "5", block: "p", styles: { "line-height": "5" } },
  186.         //   //   ],
  187.         //   // },
  188.         // ],
  190.         // init_instance_callback: (editor) => {
  191.         //   console.log(editor,'editor');
  192.         //     // 更改元素为Div
  193.         //     editor.execCommand('mceInsertContent', false, '<p></p>')
  194.         // },
  196.         // images_upload_handler: (blobInfo, success, failure) => {
  197.           // console.log(blobInfo, success, failure,'blobInfo');
  198.           // console.log(success, 'success');
  199.           // console.log(failure,'failure');
  200.           // const img = "data:image/jpeg;base64," + blobInfo.base64();
  201.           // success(img);
  202.         // },
  204.       },
  205.       myValue: this.value,
  207.     }
  208.   },
  209.   beforeDestroy () {
  210.     tinymce.remove()
  211.   },
  212.   created () {},
  213.   mounted () {
  214.     tinymce.init({})
  215.   },
  216.   computed: {},
  217.   watch: {
  218.     value(newValue) {
  219.       this.myValue = newValue
  220.     },
  221.     myValue(newValue) {
  222.       this.$emit('input', newValue)
  223.     },
  224.    
  225.   },
  226.   methods: {
  227.     onClick(e) {
  228.       this.$emit('onClick', e, tinymce)
  229.     },
  230.    
  231.     // clear() {
  232.     //   this.myValue = ''
  233.     // },
  235.     // calcWidth() {
  236.     //   return document.body.clientWidth / 2 + 'px'
  237.     // },
  238.   },
  239. }
  240. </script>
  242. <style lang="scss" scoped>
  243.   ::v-deep .tox .tox-tbtn--select {
  244.     width: 100px;
  245.   }
  246.   ::v-deep .tox .tox-sidebar-wrap {
  247.     padding: 5px;
  248.   }
  249. </style>
复制代码
plugins.js

  1. // autoresize 编辑器高度自适应
  2. // autosave 添加此插件跳跳转url时会弹出一个提示框(提示信息：重新加载此网站？ 系统可能不会保存您所做的更改。)
  4. const plugins = ['advlist anchor autolink  code codesample colorpicker directionality fullscreen hr image insertdatetime link lists media nonbreaking pagebreak paste preview print save searchreplace tabfocus table template textcolor textpattern visualblocks visualchars wordcount autoresize']
  6. export default plugins
复制代码
toolbar.js

  1. // Here is a list of the toolbar
  2. // Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
  4. // const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
  6. // styleselect 行高
  7. // table 表格
  8. const toolbar = ['bold italic underline | fontselect | fontsizeselect | forecolor backcolor | removeformat']
  10. export default toolbar
复制代码
展示效果图：



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

莫张周刘王

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表