Posted by samirnassar on November 1, 2009 at 4:04am
I am adding the structure necessary to make use of more HTML elements than provided by default for markitup in WYSIWYG API 2.0
This is fairly easy and repetitive but I am coming up against a small problem. I'd like block elements to end with a newline at the end of the closing tags and some block elements could use a newline after the opening element too. I tried shoehorning a \n in but that is just outputting \n.
In any case, I am happy to submit the expanded options for markup, H3-h6, p, dl, dt, dd, ul, li, ol as well as any others people call for.
Comments
More context: basic HTML set
markItUp! Has different sets.
I'm most interested in the basic HTML set found at the downloads page: http://markitup.jaysalvat.com/downloads/
The sets in markitup are easy to expand, it'll all JS. However, it seems that we also have to make changes to markitup.inc for the expanded functionality to show up.
Example from markitup.inc:
$default_buttons = array('paragraph' => array(
'name' => t('P'),
'className' => 'markitup-paragraph',
'key' => '',
'openWith' => '<p>',
'closeWith' => '</p>',
),
);
Corresponds to
function wysiwyg_markitup_plugins($editor) {return array(
'default' => array(
'buttons' => array(
'paragraph' => t('Paragraph'),
...
)
)
)
}
While the sets in markitup can set tags to end in newlines, WYSIWYG API doesn't seem to do so. As en axample:
$default_buttons = array('paragraph' => array(
'name' => t('P'),
'className' => 'markitup-paragraph',
'key' => '',
'openWith' => '<p>',
'closeWith' => '</p>\n',
),
);
Outputs:
</p>\nWhen it should translate the
\nas a newline not literal text.set.js and markitup.inc comparison
Let's compare the simple example from the set file to how it is done in markitup.inc:
set.js:
{name:'Paragraph', openWith:'<p(!( class="[![Class]!]")!)>', closeWith:'</p>\n' }markitup.inc:
'paragraph' => array('name' => t('P'),
'className' => 'markitup-paragraph',
'key' => '',
'openWith' => '<p>',
'closeWith' => '</p>\n',
),
It seems to be easy to map from set.js to markitup.inc. As I mentioned earlier the remaining issue seems to be that the set file actually expresses \n properly and the markitup facility in WYSIWYG API doesn't.
If people have example of how other editors output HTML (with whitespace or without) we can compare what is happening and find a solution.
Here is a more complex example from the character substitution set file:
name:'Encode Html special chars',className:"encodechars",
replaceWith:function(markItUp) {
container = document.createElement('div');
container.appendChild(document.createTextNode(markItUp.selection));
return container.innerHTML;}
A further note on markitup sets.js
It is also worth noting that markitup.inc and WYSIWYG API ignore the sets.js files in markitup downloads anyway.
From
wysiwyg/editors/js/markitup.jswe see that the only thing that's being looked for is:sets/default/images/. This is in addition to the jquery addition that is part of the library..css({ backgroundImage: 'url(' + settings.root + 'sets/default/images/' + button + '.png' + ')' })It should be possible to write some logic that will incorporate images from other sets or find a way to incorporate images from a different set. I'm trying to think of a good way to do this in JavaScript.
One possibility could be for WYSIWYG API to provide a set of icons that any editor can be made to use.
If you want to use your own icons with WYSIWYG and markItUp! you'll have to dump images into
sets/default/images/yourself or modifywysiwyg/editors/js/markitup.jsto look for the images at a place of your choosing.If anyone who has used WYSIWYG or knows the code better then I do I'm all ears.
If you want \n to be
If you want
\nto be interpreted as a newline in PHP, you need to use double quotes around the string instead of single quotes.Wysiwyg module cannot handle set files yet, part because we would need to include the set files from the server and there's no GUI to control this yet. I'm hoping this can be at least partially solved together with the issue about allowing advanced settings to be configured via the GUI. All the set files seem to put the settings into a global 'mySettings' variable, which we could tell the JS implementation to use and thus ignore the button configuration etc normally sent from the server, but doing so also means we need a GUI to tell the editor which set file(s) to use.
We don't want to have to create one editor library folder and editor implementation for each set being used. Instead, we should have one folder containing the original editor, one implementation in Wysiwyg module, and one folder for each set (including images etc). The editor implementation then presents a gui to select one of all the sets it has detected for use with that editor profile.