vue项目中使用tinymce编辑器的步骤详解

发布时间：2020-12-16 23:36:18 所属栏目：百科来源：网络整理

导读：Tinymce富文本也是一款很流行编辑器把文件放在static下，然后在index.html文件中引入这个文件在其他子文件中引入这个然后就可以调用起这个组件了。下面看下vue项目中使用tinymce编辑器的方法，具体内容如下所示：第一步： npm install tinymce -S 第二

Tinymce富文本也是一款很流行编辑器

把文件放在static下，然后在index.html文件中引入这个文件

在其他子文件中引入这个

然后就可以调用起这个组件了。

下面看下vue项目中使用tinymce编辑器的方法，具体内容如下所示：

第一步：npm install tinymce -S

第二步：创建组件

</div>
</template>
//在script中引入
import tinymce from "tinymce/tinymce";
import "tinymce/themes/modern/theme";
import "tinymce/plugins/paste";//这个到最下面那个为需要使用的工具栏模块
import "tinymce/plugins/link";
import "tinymce/plugins/lists";
import "tinymce/plugins/image";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/media";</pre>
</div>
<p>第三步：对tinymce进行个性化配置</p>
<div class="jb51code">
<pre class="brush:js;">
tinymceinit() {
   const _this = this;
   const setting = {
    selector: "#tinymce",language: "zh_CN",//语言设置中文
    menubar: false,//去除文件栏
    branding: false,//去除右下角的'由tinymce驱动'
    elementpath: false,//左下角的当前标签路径
    content_css: ["css文件路径"],//对编辑器内部需要的一些样式
    language_url: "zh_CN.js文件的路径",//导入中文语言文件
    skin_url: "../../../static/skins/lightgray",//在node_modules中tinymce文件夹中
    setup: function(editor) {//设置自定义功能的按钮
     editor.addButton("uploadimg",{//单个按钮，此处的uploading是该按钮的名称
      icon: "image",//显示的图像
      tooltip: "上传图片",//鼠标放上去后现在是内容
      onclick: function() {}
     });
     editor.addButton("geshi",{//按钮列表，此处的geshi是该按钮的名称
      text: "格式",//显示的文字
      type: "menubutton",menu: [
       {
        text: "标签",onclick: function() {}
       }
      ]
     });
    },plugins:
     "lists paste link image contextmenu wordcount colorpicker textcolor media imagetools",//对应上方import引入的文件，下面toolbar需要使用到
    toolbar:
     "geshi bold bullist numlist | uploadimg | alignleft aligncenter alignright alignjustify outdent indent"//定义工具栏
   };
   Object.assign(setting,_this.setting);
   tinymce.init(setting);
  },</pre>
</div>
<p>第四步：在watch中监听传入的value，并修改tinymce的内容</p>
<div class="jb51code">
<pre class="brush:js;">
value(newV,oldV) {
  tinymce.activeEditor.setContent(newV);
},</pre>
</div>
<p>其他：设置图片</p>
<p>第一种：使用tinymce提供的接口</p>
<div class="jb51code">
<pre class="brush:js;">
images_upload_handler: function (blobInfo,success,failure) {
  //blobInfo图片对象
  uploadimg(){ //上传图片(自己写的方法)
    success('图片的路径')
    failure('错误提示')
  }
}</pre>
</div>
<p>第二种：我自己使用的方法，简单说一下思路</p>
<p>1.使用setup自定义一个按钮，按钮的点击事件就是选择图片(参考input,type=file)，并上传</p>
<p>2.将服务器返回的路径包装成<img src='返回的路径'></p>
<p>3.将自己包装的img标签放入鼠标当前指针处</p>
<div class="jb51code">
<pre class="brush:js;">
let dom = tinymce.activeEditor.dom;
tinyMCE.execCommand("mceInsertContent",false,dom.createHTML("img",{src: 路径}));</pre>
</div>
<p><h3>总结</h3></p>
<p>以上所述是小编给大家介绍的vue项目中使用tinymce编辑器的步骤详解。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。</p>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/337963.html" target="_blank">[Flash教程]ClearCase教程－－开发人员加入ClearCase项目</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/348920.html" target="_blank">c# – MVC 5：如何在Global.asax中调用Application_PostAut</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/80091.html" target="_blank">: &#34;no such file to load -- sqlite3&#34; Rails</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/376833.html" target="_blank">FlashPaper的安装以及基本使用</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/242458.html" target="_blank">objective-c – 从XCode Bundle读取文本文件</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/218517.html" target="_blank">如何在swift中的类中定义静态常量</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/45061.html" target="_blank">如何从Oracle SQL Developer中的DateTime字段中仅提取时间？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/433972.html" target="_blank">C语言中对字母进行大小写转换的简单方法</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/466375.html" target="_blank">将数据从XML文件导入R</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/422326.html" target="_blank">C#基础算法题 找出最大值和最小值</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/250290.html" target="_blank">xcode – 仅为UICollectionViewFlowLayout缓存不</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/549720.html" target="_blank">ruby-on-rails – 轨道视图中的多组单选按钮</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/80647.html" target="_blank">SQLite数据库操作</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/47054.html" target="_blank">Oracle 数据库之最：你见过最高的 SQL Version 是</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/401834.html" target="_blank">highcharts与ajax的应用</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/354374.html" target="_blank">c# – lock语句使用什么类型的锁定机制</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/198306.html" target="_blank">swift – 像macOS上的Photos.app一样的macOS应用</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/536421.html" target="_blank">ruby-on-rails – 如何从rails中的URL获取ID</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/338615.html" target="_blank">c# – 用于mscorlib.XmlSerializers.DLL的FileNo</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/366218.html" target="_blank">在c#中重构这个静态类的最佳方法是什么？</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>