Geekly Articles each Day
📜 ⬆️ ⬇️

MarkitUp! - Easy jQuery editor

Introduction


Greetings to all!

Most recently, I had to slightly expand the functionality of the editor of one project. But as it turned out in my case, I came across some difficulties. In this article I will share with readers how I got out of this situation.

How it was


In the project, the editor of which should be slightly updated, was used as in most cases by the well-known old-timer TinyMCE. Personally, I have nothing against him. This is an excellent editor that copes well and now copes with its responsibilities on many sites. I myself use it as the main one in my projects. But back to the topic topic, because it is not about him goes on.

The main task: I didn’t need to refine the existing editor much, namely, to add a frame to the text with tags that are not in the current version of the editor.
Of course, at first I had the idea to simply modify the current editor, I mean TinyMCE. Not much reading the documentation, I realized that in general, and nothing complicated about it. But there were substantial disadvantages in the ways that are described in the network.
')
And here are some of them:

As it turned out, during the process of finishing editing the editor, you need to use the editor without compression. That is, you need to edit the src files of the editor themselves, and then you need to re-compress them with compressors, for example, YUI Compressor , JSMin or Google Closure Compiler .

I immediately had thoughts on this. If you select the option described above, at least there would be a problem with possible future updates of the editor.

Decision



By this I decided not to go much the other way. Since the site used a wonderful jQuery javascript framework, I thought, “Why not find some other editor?”.

Not a lot of searching, I found an editor called markItUp! .
The first thing I noticed when choosing a new editor:
  1. The ease and flexibility of its settings.
  2. Minimum problems with cross-browser compatibility.

By getting acquainted closer with markItUp! , I found out that this editor is quite flexible, in spite of its lightness. To all this, he also supports different modes of working with text.

Here are the basic goodies that you may be interested in:
  1. Quick and easy integration;
  2. Hot key support;
  3. Preview using Ajax;
  4. Easily customizable skins.

You should also pay attention to the fact that the editor allows you to work with different sets of tags:
Html, BBcode, Wiki syntax.

Installation


The installation of the editor is very easy.
First, we connect the editor itself and jQuery.

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="markitup/jquery.markitup.js"></script>


Next we need to connect the file with the settings of the editor, which is undoubtedly very convenient.

 <script type="text/javascript" src="markitup/sets/default/set.js"></script>


Otherwise, you need to configure yourself, which I basically did.

 <script type="text/javascript" > mySettings = { ... } //   </script>


And here, for example, what the working config looks like:

 function mySettings() { return { previewParserPath: '', onShiftEnter: {keepDefault:false, replaceWith:'<br />\n'}, onTab: {keepDefault:false, replaceWith:' '}, markupSet: [ {name:'H4', className:'editor-h4', openWith:'<h4>', closeWith:'</h4>' }, {name:'H5', className:'editor-h5', openWith:'<h5>', closeWith:'</h5>' }, {name:'H6', className:'editor-h6', openWith:'<h6>', closeWith:'</h6>' }, {separator:'---------------' }, {name: '', className:'editor-bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' }, {name: '', className:'editor-italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)' }, {name: '', className:'editor-stroke', key:'S', openWith:'<s>', closeWith:'</s>' }, {name: '', className:'editor-underline', key:'U', openWith:'<u>', closeWith:'</u>' }, {name: '', className:'editor-quote', key:'Q', replaceWith: function(m) { if (m.selectionOuter) return '<blockquote>'+m.selectionOuter+'</blockquote>'; else if (m.selection) return '<blockquote>'+m.selection+'</blockquote>'; else return '<blockquote></blockquote>' } }, {name: '', className:'editor-code', openWith:'<code>', closeWith:'</code>' }, {separator:'---------------' }, {name: '', className:'editor-ul', openWith:' <li>', closeWith:'</li>', multiline: true, openBlockWith:'<ul>\n', closeBlockWith:'\n</ul>' }, {name: '', className:'editor-ol', openWith:' <li>', closeWith:'</li>', multiline: true, openBlockWith:'<ol>\n', closeBlockWith:'\n</ol>' }, {separator:'---------------' }, {name: ' ', className:'editor-image', replaceWith:'<img src="[!['+'  :'+':!:http://]!]" />' }, {name: ' ', className:'editor-video', replaceWith:'<video>[!['+'  :'+':!:http://]!]</video>' }, {name: ' ', className:'editor-link', key:'L', openWith:'<a href="[!['+' url :'+':!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'  ...' }, {separator:'---------------' }, {name: '  ', className:'editor-clean', replaceWith: function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } } ] } }


You also need to connect CSS style files.

 <link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" /> <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />


Well, finally connect the markItUp itself to the textarea.

 <script type="text/javascript" > jQuery(document).ready(function() { jQuery("#markItUp").markItUp(mySettings()); }); </script> ... <textarea id="markItUp"></textarea>


Lastly, a few links:

That's all for today. Thank you for your attention and wish you all success!

Source: https://habr.com/ru/post/128352/

More articles:


All Articles