77

配置TinyMCE网页文本编辑器不显示html head body等标签信息

 5 years ago
source link: http://ourjs.com/detail/5c9388db44b4031138b4a1de?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

TinyMCE是一个非常优秀的HTML网页文本编辑器,可以完美地跟input结合。 项目主页: https://www.tiny.cloud/

使用非常简单

<textarea data-editor name="text" class="form-control" rows="6"></textarea>
<script src="/js/tinymce/tinymce.min.js"></script>

tinymce.init({

selector            : '[data-editor]'

, content_css         : $dataEditor.attr('data-editor') || ''

, language            : (FE_LOCAL.language || '').replace('-', '_')

, menubar             : 'edit insert format table'

, relative_urls       : false

, remove_script_host  : false

, convert_urls        : true

, plugins             : [

"advlist autolink lists link image charmap print preview anchor"

, "searchreplace visualblocks code fullscreen fullpage"

, "insertdatetime media table paste textcolor colorpicker contextmenu"

]

, image_dimensions    : false

, toolbar: "insertfile undo redo | styleselect | bold italic underline strikethrough | fontselect fontsizeselect | "

+ "forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | "

+ "link image code print"

, setup: function(editor) {

editor.on('init', function(e) {

})

editor.on('change', function(e) {

editor.save()

})

editor.on('keyup', function(e) {

editor.save()

})

}

})

其中监听editor的事件可以让文本有改动时,立即存储到对应的form表单元素中

不过默认配置获取的结果是带HTML/head/body等标签的,如果只想要你编辑部分的HTML代码可将 fullpage 插件去掉即可。

, plugins             : [

"advlist autolink lists link image charmap print preview anchor"

, "searchreplace visualblocks code fullscreen"

, "insertdatetime media table paste textcolor colorpicker contextmenu"

]


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK